Implementing simple dynamic routes in Wordpress

Question

Suppose I have a clean wordpress install, with a basic custom theme.

In that theme, I have a custom page template which is just an iframe, which is pointed at a webapp on a different domain.

So suppose my wordpress install can be reached at http://example.com, and my page with the iframe template is located at http://example.com/members/.

I now want to add dynamic routes, so that all requests to http://example.com/members/login, or http://example.com/members/event/1 (for example) all go to http://example.com/members/ but pass the second part of the route ('/login', or '/event/1') to the iframe inside.

What would be the best way to accomplish this, without having to hack into Wordpress' internals?

I found this plugin: https://wordpress.org/plugins/wp-on-routes/ but much to my dismay I discovered that when I tried using it it completely overwrites Wordpress' built in routing, which meant I would have to manually re-add each and every URL (as I understand it, I'm not that accomplished in PHP), which is a no go as my client still needs to be able to post without manually editing php files.

Thank you for reading.

Answer 1

I managed to find a solution for my problem, thanks to Fencer04's suggestion. I found this page: https://developer.wordpress.org/reference/functions/add_rewrite_rule/ where I found an example that was close enough to my problem to work.

So in functions.php:

function custom_rewrite_rule(){
    $page_id = 318; // replace this ID with the page with the iFrame template 

    $page_data = get_post($page_id);

    if(!is_object($page_data)){
        return; // all other pages don't have to support custom deeplinks
    }

    // catches deeplinks 1 level deep, i.e.: /members/profile
    add_rewrite_rule(
        $page_data->post_name . '/([^/]+)/?$',
        'index.php?pagename=' . $page_data->post_name . '&memberspage=$matches[1]',
        'top'
    );

    // catches deeplinks 2 levels deep, i.e.: /members/profile/edit
    add_rewrite_rule(
        $page_data->post_name . '/([^/]+)/([^/]+)/?$',
        'index.php?pagename=' . $page_data->post_name . '&memberspage=$matches[1]&members_param=$matches[2]',
        'top'
    );

    // catches 3 levels deep, i.e. /members/profile/edit/confirm
    add_rewrite_rule(
        $page_data->post_name . '/([^/]+)/([^/]+)/([^/]+)/?$',
        'index.php?pagename=' . $page_data->post_name . '&memberspage=$matches[1]&members_param=$matches[2]&members_param2=$matches[3]',
        'top'
    );

}

add_action('init', custom_rewrite_rule);

Next I added filters for the new query_vars:

add_filter('query_vars', function($vars) {
    $vars[] = "memberspage";
    $vars[] = "members_param";
    $vars[] = "members_param2";
    return $vars;
});

And then in my template-iframe.php, I can access these parameters like so:

<?php 

    // get query strings 
    global $wp_query;

    $page = $wp_query->query_vars['memberspage'];
    $params = $wp_query->query_vars['members_param'];
    $params2 = $wp_query->query_vars['members_param2'];

    $membersBaseURL = 'http://members.domain.com/';
    $iframeURL = $membersBaseURL;

    if(isset($page)){
        $iframeURL = $iframeURL . $page . '/';
    }

    if(isset($params)){
        $iframeURL = $iframeURL . $params . '/';
    }

    if(isset($params2)){
        $iframeURL = $iframeURL . $params2 . '/';
    }
?>

<iframe id="iframeLeden" src="<?php echo($iframeURL) ?>" frameborder="0"></iframe>

So now if I go to http://www.domain.com/members/login, it'll show me the correct static WP page, with inside an iframe that shows the page http://members.domain.com/login/ .