Multiple Wordpress Page Layouts in One Single Template
The Problem
Our client wants a medium-sized site he can edit using Wordpress as a CMS. Some sections in the navigation will have subpages, while some will not. We’re going to need a conditional that checks for subpages, and if they exist, uses a two-column layout…
…but if they don’t exist, removes the sidebar and uses a full-width <div>…
Multiple layouts can always be achieved with custom page templates, but to keep things clean and economical, it’s much better to rely on one global template (”page.php”) if you can get away with it. So how will it work?
The Solution
The first bit of code will set the “children” variable and determine which <div> class will wrap the content:
<div class=<?php if($post->post_parent)
$children = wp_list_pages("title_li=&child_of=".$post->post_parent."&echo=0"); else
$children = wp_list_pages("title_li=&child_of=".$post->ID."&echo=0");
if ($children) { ?>"narrowcolumn"<?php } else { ?>"widecolumn"<?php } ?>>
The second bit of code inserts a sidebar if necessary:
<?php if ($children) { ?>
<div id="sidebar">
In this section:
<ul><?php echo $children; ?></ul>
</div>
<?php } else { ?>
<?php } ?>
Bonus Challenge
Almost done, but wait — our client now wants just the “Resources” page to have a third column containing a list of useful sites:
Here we’ll use the is_page conditional to insert the column while the wp_list_bookmarks function grabs the links:
<?php if (is_page('resources')) { ?>
<div id="sidebar-resources"><?php wp_list_bookmarks(); ?></div>
<?php } else { ?>
<?php } ?>
The Final Template Code
With a few conditionals, our “page.php” template is now much smarter and can handle a variety of layouts:
<?php get_header(); ?>
<?php if (is_page('resources')) { ?>
<div id="sidebar-resources"><?php wp_list_bookmarks(); ?></div>
<?php } else { ?>
<?php } ?>
<div class=<?php if($post->post_parent)
$children = wp_list_pages("title_li=&child_of=".$post->post_parent."&echo=0"); else
$children = wp_list_pages("title_li=&child_of=".$post->ID."&echo=0");
if ($children) { ?>"narrowcolumn"<?php } else { ?>"widecolumn"<?php } ?>>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<h2><?php the_title(); ?></h2>
<div class="entry">
<?php the_content(); ?>
</div>
</div>
<?php endwhile; endif; ?>
<?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?>
</div>
<?php if ($children) { ?>
<div id="sidebar">
In this section:
<ul><?php echo $children; ?></ul>
</div>
<?php } else { ?>
<?php } ?>
<?php get_footer(); ?>
Popularity: 3% [?]
Nice tutorial, Darren.
Stumbled and ‘Floated’
Grande aiuto; grazie molte.
Ciao!
Thank you Darren. I learned more about WordPress and PHP from reading your theme tutorials and your articles. Great job and more power to you!
Peace.
Hello Darren
I came across your site, trying to find away to make a static frontpage.
I like the way you explain how to work with the tags on wordpress it
is better than going thur the codex. I think your tutorials are what I
needed to get the tagging of wordpress. Have a great 2008 and keep up the
good work.
Willie
I like very much!!
Thanks :)
Hi. Just wondering if you are aware that the first trackback for this post is in fact a splogger who has copied your own post?
The site in question links back to the source, at least. In their words: “It doesn’t steal content, because every post reports the source at the botton of the article…the exact way a feed reader does.”
You are a God send! Such clear, concise tutorial on the one subject I have been searching so long for, since wanting that “best of” tabbed feature as seen on the newly redesigned Problogger home page.
And yes, that excellent Mimbo template and accompanying tutorials of yours completes all parts of the puzzle. I can now redesign the template pages of any of my blogs with a new sense of confidence.
Darren, [PLEASE] can you per chance do a small tutorial on how to include one of those 3-4 tabbed “best of” boxes as seen on ProBlogger.net home page? I know its done with javascript, but cannot figure out where to get the .js code from and how to include it correctly so its only appears in the home page and/or where I wanted it to, like in the main category pages. Also how would you select and call the “amount” of posts you wanted in each tab.
The w.w.w is better off for the wisdom of folks like you who share their knowledge so generously.
best
Rox
Thanks for the feedback Rox! You may want to check out the latest post at WordpressGarage for a nice tutorial on tabs.
how did you get pages navigation to not be inserted in alphabetical order?
Great idea, thanks darren