There is something I have really appreciated on web for years: one page website. One of the best example: http://lesscss.org/
Anyway, as I’m a big fan of Thematic, I thought that I could use Thematic to create easily this kind of website. So I wrote some lines and made a child theme. Also, you can easily use this child theme as a template page with your own child theme.
Features
Basically you will display on only one page, let’s call it ‘page 1′, every child page (subpage). Your page 1 is a wrapper that contains many page with a submenu. Each part is linked as an anchor using the slug. Therefore URLs are pretty friendly.
The menu is defined once and then printed everytime.
I still didn’t add some JS to make the page scroll up and down but I will… one day. Now it’s done and its based on Ariel Flesler’s plugin.
Documentation
If you want to use it on its own, you can download the files and add them in the themes folder. If you want to add it to your child theme you can follow these steps.
The template page
In your folder create a new php file called ‘onepage.php’ and paste this code. The file name is important for the css rules (cf: thematic_body_class function).
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
/**
*
* Template Name: One Unique Page
*
**/
// calling the header.php
get_header();
// action hook for placing content above #container
thematic_abovecontainer();
$id = get_the_id();
thmonepage_navigation($id); //Define the menu
query_posts( "post_type=page&post_parent=$id&orderby=menu_order&order=ASC" );
$count = 1;
if ( have_posts() ) : while ( have_posts() ) : the_post();
if(function_exists('childtheme_override_onepageloop')){
childtheme_override_onepageloop();
} else {
$the_slug = basename(get_permalink());
?>
<div id="container" class="container-<?php the_ID(); ?> container-<?php echo $the_slug; ?> <?php echo ($count%2==0)?'even':'odd'; ?>">
<a name="<?php echo $the_slug; ?>"></a>
<?php thematic_abovecontent(); ?>
<div id="content">
<?php echo MY_MENU; ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h3><?php the_title(); ?></h3>
<?php the_content(); ?>
</div>
</div><!-- #content -->
<?php thematic_belowcontent(); ?>
</div><!-- #container -->
<?php
}
$count++;
endwhile;
else:
echo "<em>No content available</em>";
endif;
wp_reset_query();
// action hook for placing content below #container
thematic_belowcontainer();
// calling footer.php
get_footer();
?>
The Style
Add these following lines in your style.css file.
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
-------------------------------------------------------------- */
/*
One Page template
*/
.page-template-onepage-php #main {
width:100%;
}
.page-template-onepage-php #container {
margin:0;
width:100%;
}
.page-template-onepage-php #content {
margin: 0 auto;
width:940px;
}
.page-template-onepage-php #comments {
width:940px;
}
.page-template-onepage-php #comments {
width:940px;
}
.page-template-onepage-php h3 {
font-size: 24px;
margin: 10px 0;
}
.page-template-onepage-php #container #access {
margin: 16px 0;
}
.even {
background: #f5f5f5;
}
.odd {
background: #ffffff;
}
The functions.php
And finally add this simple function in you functions.php file.
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function thmonepage_navigation($id){
$indexurl = get_bloginfo('url');
$content.= "<div id='access'><div class='menu'> \r\n <ul class='sf-menu sf-js-enabled'> \r\n";
query_posts( "post_type=page&post_parent=$id" );
while ( have_posts() ) : the_post();
$post_id = get_the_id();
$title = get_the_title();
$slug = basename(get_permalink());
$content.="\t<li class='page_item page_item_".$post_id."'><a href='#".$slug."'>".$title."</a></li> \r\n";
endwhile;
wp_reset_query();
$content.= "</ul> \r\n </div></div>\r\n";
define(MY_MENU, $content);
}
Miscellaneous
Remove Thematic menu
If you want to use this page into a bigger website you will probably keep a main menu. To display this menu on everypage except these using this templage, ass these lines in your styles.css.
2
3
4
.page-template-onepage-php #header #access {
display: none;
}
If you want to purely remove the access menu, add these lines in your functions.php
2
3
4
remove_action('thematic_header','thematic_access',9);
}
add_action('init', 'thmonepage_remove_access');
ChangeLog
0.2
- Added JS to scroll
- Corrected the page order (now in the menu order)