28 June 2013

Create a WordPress Single Page Website

Here’s a simple way to create a WordPress one pager with individual pages outputted as list items and ordered using WordPress’s page order option. For the menu, simply set up your menu items as custom links with each URL set to #your-page's-name.

The args:

1
2
3
4
5
6
7
8
9
10
11
12
$args = array(
'sort_column' => 'menu_order',
'hierarchical' => 1,
'exclude' => '',
'child_of' => 0,
'parent' => -1,
'exclude_tree' => '',
'number' => '',
'offset' => 0,
'post_type' => 'page',
'post_status' => 'publish'
);

The loop:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$pages = get_pages($args);
 
echo "<ul class='thesections'>\n";
 
foreach ($pages as $page_data) {
 
    $content = apply_filters('the_content', $page_data->post_content);
    $title = $page_data->post_title;
    $slug = $page_data->post_name;
 
echo "<li>\n";
echo "<section id='$slug'>\n";
    echo "<h1>$title</h1>\n";
    echo "$content\n";
    echo "</section>\n";
echo "</li>\n";
}
 
echo "</ul>\n";

Lastly, a bit of jQuery:

1
2
3
4
5
$('#yournav a').click(function(){
    var top = $('html').find($(this).attr('href'));
    $('html, body').animate({scrollTop: top},1500, 'easeInOutCubic');
    return false;
});

To get back to the top, just add an id to your body tag e.g. body id="thetop" and get back to it with a link a href="#thetop".