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

You can add routing using the add_rewrite_rule hook like so:

function custom_rewrite_rule() {
  add_rewrite_rule('members/([^/]+)/([^/]+)/?$',
    'index.php?memberspage=$matches[1]&event_id=$matches[2]',
    'top');
}

add_action('init', 'custom_rewrite_rule', 10, 0);

You may need to create several depending on the URLs you rewriting. You can then use the URL parameters in your template to load the appropriate page in your iframe.

Answer 2

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/ .