Single page wordpress template. How to create new section in css

Question

I'm just curious about how this is done as eventually I want to develop my own single page wordpress theme.

I've seen themes that are all on one page but just scroll down, and as you add a new menu item (or page) it adds a new css section to the page. An example can be seen on this template demo: Wordpress In-Motion theme As you can see, you click the menu links and it takes you down to that section. In the css it adds #news or #about-us

Can someone explain to me how this is created as a function when designing a wordpress theme? Sam

Answer 1

That has nothing to do with Wordpess. It simply is using anchors to take you down or up the page.

If an element on the page has a unique id, you can create an anchor tag to link to that id (and it will take you there on the page)

e.g.

<div id="anchor">...</div>
<div id="something-else>...</div>

<a href="#anchor">Click here to go to id=anchor div</a>
<a href="#something-else">Clicker to go to something-else id div</a>

The Wordpress theme you gave an example of also had Javascript or jQuery smoothing - so it would scroll nicely to the anchor, instead of instantly taking you there like plain HTML would do.

Answer 2

Got the answer to this. Added this to my index.php page (slightly modified). For each page I add, a new is added which I can then anchor using jquery, obviously you can add n your own classes and ID's to control how the div will look.

<?php
$pages = get_pages( array ( 'sort_order' => 'asc', 'sort_column' => 'menu_order', 'depth' => 1));

        foreach ( $pages as $page ) {  
            $page_section = str_replace( " ", "", strtolower( $page->post_name ) );
            echo '<div id="' . $page_section . '" ></div>';
        }
?>

Hope this is helpful to someone, Sam

Answer 3

This is done with JavaScript. From what I can tell they use a jQuery plugin called onePageNav, which handles scrolling down to the selected menu section and adding a current class to the correct menu item while scrolling down.