I was making a single page site recently with a navigation bar that scrolls the user up and down the page. The site was built in WordPress and I wanted users to be able to setup their navigation as they normally would without needing to worry about the scolling. The nav could use standard URL’s to single pages so that they would still work if javaScript was disabled and if not, the scrolling would be handled automatically.

Here’s what I did. First I needed the sections on the page to have an id based off the slug of the page, so that if the slug changed, the navigation could be changed to point to the new slug and everything else would be done automatically. Here is the bit of code that assigns a section of the page an id based on the page slug:

$args = array(
        'post_type' => 'page',
        'meta_key' => '_wp_page_template',
        'meta_value' => 'template-work.php',
        'post_status' => 'publish'
    );
    $query = new WP_Query( $args );
    $slug = $query->posts[0]->post_name;
    
    if ( $query->have_posts() ) :
    ?>
        <div class="full-width-container work-section primary-color" id="section-<?php echo $slug; ?>">

You can see above that I am finding the page assigned to the template called ‘template-work.php’ and I find the slug of that page using $slug = $query->posts[0]->post_name;. I then use that slug to set the id of the section that the nav will scroll to using id=”section-<?php echo $slug; ?>”.

So far, so good. Now I needed to scroll to each part of the page using jQuery. Here is the code:

'scrolling' : function(){
    $('#menu-primary-navigation a').click(function(){
        var location = $(this)[0].pathname;
        var locationSplit = location.split("/");
        if ( null != locationSplit[2] ){
            var section = '#section-' + locationSplit[2];
        }
        else {
            var section = '#section-' + locationSplit[1];
        }
        $.scrollTo(section, 500, {
        offset : -80
    });
    console.log(section);
    return false;
});

The above code simply gets the last part of the URL in the link that was clicked and scrolls to the part of the page with an id that matches the last part of the URL (the slug). It should be noted that I am using the scrollTo plugin to do the scrolling. You can get the last part of a URL using var location = $(this)[0].pathname; where $(this) refers to the link being clicked. In my case, I was running on a local machine with a URL structure of http://localhost/theme/ so that means that when I clicked a link to the work section the URL would be http://localhost/theme/work. This means that when I tried to get the last part of the URL using $(this)[0].pathname; I actually got /theme/work/ which means it would not match the slug used in for the id of the page section.

For this reason I split the value returned from $(this)[0].pathname; using var locationSplit = location.split(“/”); and this provided me with two strings ‘theme’ and ‘work’. Then I just did an if / else statement to check if the second part of the split ‘work’ existed. If so I used the second part as the text in the id and if it does not exist, I used the first part. This is becuase if I was not on a local machine the path to the theme would most likely be http://domainname/work, so there would be no second value returned from the split. By doing it this way it means the navigation would work on my local machine and more importantly it would work when someone else installed the theme locally, as well as on a live server.