Multiple Wordpress Page Layouts in One Single Template

Multiple Wordpress Page Layouts in One Single Template

December 26, 2007 ( 20 )
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…

subnav

…but if they don’t exist, removes the sidebar and uses a full-width <div>…

subnav

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:

subnav

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% [?]

20 Responses
  1. Armen said:

    Nice tutorial, Darren.

    Stumbled and ‘Floated’

  2. giucchio said:

    Grande aiuto; grazie molte.

    Ciao!

  3. Merci said:

    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.

  4. 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

  5. I like very much!!
    Thanks :)

  6. Ryan said:

    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?

  7. Darren said:

    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.”

  8. Rox said:

    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

  9. Darren said:

    Thanks for the feedback Rox! You may want to check out the latest post at WordpressGarage for a nice tutorial on tabs.

  10. chris said:

    how did you get pages navigation to not be inserted in alphabetical order?

  11. Chika said:

    Great idea, thanks darren

Trackbacks
  1. Wp Wordpress » Blog Archive » Multiple Wordpress Page Layouts in One Single Template:

    [...] Appeared on » SHARETHIS.addEntry({ title: “Multiple Wordpress Page Layouts in One Single Template”, url: “http://www.wp-wordpress.com/themes-and-tricks/multiple-wordpress-page-layouts-in-one-single-template” }); [...]

  2. links for 2007-12-28 | NewsErrado:

    [...] Darren Hoyt Dot Com » Multiple Wordpress Page Layouts in One Single Template Multiple Wordpress Page Layouts in One Single Template (tags: wordpress template layouts theme blog) Compare Preços de: DVD, MP3, LCD, Plasma, HDTV, Home Theater no Buscapé.Compartilhe!  Imprima este Post Sem posts relacionados.As desventuras de um paraibano em Pelotas (17)Adote um Post (15)Vacilão (14)FICA CPMF! XÔ Manipulação! (10)Well Come! (9)Cinema é maior diversão… (8) [...]

  3. Skylog » Blog Archive » links for 2007-12-29:

    [...] Multiple Wordpress Page Layouts in One Single Template (tags: wordpress) [...]

  4. Weekly Links - December 29th | Vandelay Website Design:

    [...] Multiple WordPress Page Layouts In One Single Template from Darren Hoyt. [...]

  5. Buffer Dump 29DEC07 « Feet up, eyes closed, head back:

    [...] Conditional Multi-column [...]

  6. Matt Herzberger.com » Blog Archive » Here is your del.icio.us goodness for 12-31:

    [...] 2 - Darren Hoyt Dot Com » Multiple Wordpress Page Layouts in One Single Template [...]

  7. Best Wordpress Beginner Articles and Worthy Plugins - Roundup:

    [...] Multiple Wordpress Page Layouts in One Single Template [...]

  8. Multiple Wordpress Page Layouts in One Single Template » Darren Hoyt Dot Com:

    [...] Multiple Wordpress Page Layouts in One Single Template » Darren Hoyt Dot Com [From: Multiple Wordpress Page Layouts in One Single Template » Darren Hoyt Dot Com] No Comments, Comment or Ping [...]

  9. תבניות לוורדפרס » ITbananas:

    [...] לוגו שיוצג בדפדפן: Favicon Wordpress Plugin משחק עם הגדרות עמוד: Multiple Wordpress Page Layouts in One Single Template מדריך בסיסי להמרת תבניות וורדפרס. שינוי הטקסט לעברית: [...]

Leave a Reply