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(); ?>
10:30 pm
Nice tutorial, Darren.
Stumbled and ‘Floated’
2:54 am
Grande aiuto; grazie molte.
Ciao!
2:27 pm
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.
7:07 pm
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
2:34 am
I like very much!!
Thanks :)
12:46 am
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?
12:53 am
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.”
6:07 am
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
12:26 pm
Thanks for the feedback Rox! You may want to check out the latest post at WordPressGarage for a nice tutorial on tabs.
11:26 pm
how did you get pages navigation to not be inserted in alphabetical order?
12:41 am
Great idea, thanks darren
4:06 pm
Some people use a hierarchy method in the naming of the template files to achieve multiple WordPress sidebars, but in my opinion it is too cumbersome for most user’s needs. The method of multiple sidebars for WordPress that I use involves only a very simple PHP snippet added to the template to call the desired sidebar file depending on the area of the site that you are in.
4:45 pm
Nice work, can’t get it to work with K2 theme though. But i will develop this later on. thx for the inspiration
9:15 pm
Thank you, Darren. Just the info I was looking for. Kudos on explaining and demonstrating in such a clear, concise manner.
Kat
2:24 pm
I’ve searched the Internet far and wide for an example of a 100% width page template for WordPress and I’m so glad to finally come across yours. Thanks!
6:13 pm
Hi Darren,
Thank you for providing such simple and clean code — that’s hard to come by these days. I’ve just started to implement this on a dev site with a custom built template and I’ve having some difficulty with the child pages.
The parent pages all have a header banner unique to each parent page. However, the child pages are not displaying this banner. For example:
Where the just contains a .png banner. But every parent page has a different banner and so I have a series of the condition above (all on the page.php). But the problem is that the child pages are not displaying the parent banner.
I’ve searched everywhere and can’t figure out a solution. Please help!
Many thanks for your time!
6:16 pm
Sorry…seems like the example condition I copied and pasted did not show up:
The parent pages all have a header banner unique to each parent page. However, the child pages are not displaying this banner. For example:
Where the
just contains a .png banner.Thank you!
12:03 pm
Again a great tutorial with complete code for making wordpress as a corporate or business website from a blogging platform. What I thought earlier not possible with wordpress is in my hands now. Thanks very much darrenhoyt. I don’t know your name.
2:08 pm
Hi,
Very nice tutorial!
Do i paste it “as is” on my “page.php” instead of the existing code?or is it supposed to be added to my theme code somewhere in the middle? I’ll give it a shot!
Thanks,
tamirco
12:35 pm
Thanks for the tutorial, but I have a problem here.
The Columns you created, and the content inside the columns are all generated dynamically. The problem I have is, my client want to have multiple columns on wordpress page template, But the content in side of each columns are not generated dynamically. How can I add contents inside those columns from the wordpress admin panel ?
I posted a more detailed question here, but so far no one seems have the answer
http://wordpress.org/support/topic/313271?replies=1
6:04 am
wow, useful!
11:11 pm
You Rock! Thanks man
10:25 am
hey their can we make mulitple layouts(i mean different number and position of sidebars),my client is really nuts bout his imaginative outlook.
thnx in advance
8:38 pm
Hi Great post thanks for sharing.
9:29 pm
Hi Great post thanks for sharing. finding it too easy now to create extra templates for my child theme
3:08 pm
Great article. Thanks a lot.
3:26 pm
Thank you so much this is the best tutorial I have found. Bookmarked :D
8:45 am
Great post. I can now create my own custom templates. Thank you for sharing.
12:57 am
Great sharing. I like to tweak my blogs now :)
2:16 pm
elo brother…seriuosly i dont understand all of ur tutorial…i dont know where to put all the code given….can u plz email me at petaiensem@gmail.com how to put the code….i really appreciate ur job…im new in wordpress….i hope ur help…tq…..
8:19 am
Great tutorial and and workaround.
I tried to add the ‘bonus challenge’ to a test page.php, and it works. But I don’t understand, how the php reads, that one column is on the right side, while the ‘resources’ extra sidebar is on the right side.
Can anybody explain me or link me to the explanation.
All the best,
Thomas
5:37 am
Hi Nice tutorial, How ever, how to have deferent lay outs to deferent pages in child theme of twenty eleven