WordPress add_rewrite_rule and routing to same page

Question

Thanks for reading this question.

I do not remember how I did this and the GIT repo is giving no clues.

I have a WordPress site where there are rewrite rules such as

add_rewrite_rule(
    'about',
    'index.php',
    'top'
);

and it goes to index.php, the home page.

Somehow I had it working so the url ending up displaying was

/about

BUT it would display the home page. This is what I wanted and the development site works but the productions site does not.

So the question is how did I make it so that it

http://www.thesite.com/ http://www.thesite.com/about

display the same page. I remember doing some other step but cannot find it.

thanks...

Answer 1

I am only documenting this because it had me truly stumped and now I am at peace with the world... at least this world.

Tricking the Permalinks

How to make it so you have multiple urls go to the same page to make your wordpress site seem like a SAP.

Meaning urls like

http://www.asdf.com

http://www.asdf.com/about

Resolve to the same url and then with JS you can do the fancy stuff with JavaScript.

THE CODE

Use add_rewrite_rule to rewrite urls to the home page for page sections. The script below in my functions file dynamically writes rules with Advanced Custom Fields as well but that is just for this implementation.

<?php

add_action('init', 'all_pages_home');
function all_pages_home()
{

    add_rewrite_rule(
        'home',
        'index.php',
        'top'
    );

    add_rewrite_rule(
        'about-us',
        'index.php',
        'top'
    );

    add_rewrite_rule(
        'about',
        'index.php',
        'top'
    );

    add_rewrite_rule(
        'portfolio',
        'index.php',
        'top'
    );

    add_rewrite_rule(
        'team',
        'index.php',
        'top'
    );

    add_rewrite_rule(
        'our-team',
        'index.php',
        'top'
    );

    add_rewrite_rule(
        'contact',
        'index.php',
        'top'
    );

    add_rewrite_rule(
        'press',
        'index.php',
        'top'
    );


    // custom rewrites for all team members
    // this accesses ACF and dynamically writes these out based on a field url_path
    $team_members = get_post_meta( 359, 'section_team', true );
    if( $team_members ):
        for( $i = 0; $i < $team_members; $i++ ) {
            $url_path = esc_html( get_post_meta( 359, 'section_team_' . $i . '_url_path', true ) );
            if($url_path <> ''):

                add_rewrite_rule(
                    $url_path,
                    'index.php',
                    'top'
                );

            endif;

        }
    endif;


    flush_rewrite_rules();
}

IN THE Javascript File you can do stuff like

<script type="text/javascript">

    var pathName = window.location.pathname;
    var pathNameClean = replaceAll(pathName, '/', '' );
    var isTeamMember = true;
    var arrSections = ['home','about-us','about','portfolio','team','contact','press'];

    for (i = 0; i < arrSections.length; i++) {
        if(arrSections[i] === pathNameClean){
            isTeamMember = false;
            break;
        }
    }

</script>

And then

<script type="text/javascript">
var anchorHref = '#' + pathNameClean;

$('html, body').stop().animate({
    scrollTop: $(anchorHref).offset().top - 64
}, 1500, 'easeInOutExpo');
</script>

This will scroll to the correct place in the page

Now it gets a bit wacky and confusing all at once.

STEP 1: Go to your permalinks.

Set it to post name

Save changes…

STEP 2: Download your .htaccess file.

STEP 3: Change the permalinks to Plain

STEP 4: Upload your .htaccsss file that you created.

IMPORTANT!!!! Do not update your permalinks on your site!

Answer 2

Try saving your permalinks settings. On the WordPress admin menu, go to Settings -> Permalinks, and click Save Changes.

You don't have to make any changes to the settings on that page, but clicking the save button causes WordPress to also save any rewrite rules (from add_rewrite_rule()) to the site's .htaccess file.