In Praise of WordPress Template Tags, Part II: The Magazine Layout

Posted July 24, 2007 • 291 Comments

Previously, we saw how WordPress can capably handle data more like a small-scale CMS than a traditional blog, assuming the developer is willing to get creative with some Template Tags and The Loop. With that in mind, let’s move toward a more sophisticated homepage concept.

Sample scenario: a client needs your help in realizing his dodgy dream of starting an online men’s magazine in the vein of GQ or Details. His existing site already runs the standard WordPress blog format, but now he’s seeking a more ambitious, exploded-view layout to accommodate a variety of content modules and features somewhere between Nirali and Talking Points Memo.

With his love of hair gel, gossip and designer messenger bags, it’s not surprising our client’s new publication will be called Mimbo. He’s even sketched out a wireframe for the homepage (click for demo):

mimbo

It’s nothing too polished yet, just a grid-based concept illustrating the main content components we’ll need to tease out of WordPress: “Lead Story”, “Last Three Features”, “News”, “Contributors” and so on. How do we tie all this together on one page? Let’s start at the top and explore each module step by step:

  1. Logo and TaglineIn the upper corner of Mimbo‘s layout, you’ll see our branding which is really just the site title (“Mimbo”) and tagline (“by men, for men”) and can be edited from the control panel:

    tagline

    The functions are standard to any WordPress installation and can be added to your page like this:

    <a href="/"><?php bloginfo('name'); ?></a>
<?php bloginfo('description'); ?>
  2. Search moduleYou probably already knew that the search bar in the upper right corner originates from a PHP-include which looks like this: 
    <?php include (TEMPLATEPATH . '/searchform.php'); ?>

    You can always style the search bar to your liking, or create a custom search page.

  3. Lead Story ModuleEach issue of Mimbo will feature a Lead Story module with a photo, a category title, an article title and an excerpt.

    Let’s start with the photo. First find an appropriate image and resize it to 269×178. Next, upload it to the correct folder (example: /wp-content/themes/mimbo2/images/).

    Now I’ll begin a new post and create a category called “Lead Story”:

    After writing my post, I will scroll down to the “Custom Field” box. I’ll need to name the Key “Image” (with a capital “I”) and my Value will simply be the filename of that image:

    Before saving our post, know that the the_excerpt function will automatically pull the first 55 words from our post. If you’d like to provide alternative excerpt text, just fill in the “Optional Excerpt” field:

    When you’re done, save the post. Now, what PHP magic must happen to print it all to the homepage?

    <?php query_posts('showposts=1&cat=3'); ?>
<?php while (have_posts()) : the_post(); ?>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">
<img src="<?php echo get_option('home'); ?>/wp-content/themes/mimbo2/images/<?php
// this is where the Lead Story image gets printed
$values = get_post_custom_values("Image"); echo $values[0]; ?>" alt="" id="leadpic" /></a>
<h3>
<?php
// this is where the name of the Lead Story category gets printed
single_cat_title(); ?>
</h3>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>" class="title">
<?php the_title(); ?>
</a>
<?php the_excerpt(); ?>
{<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">More&raquo;</a>}
<?php endwhile; ?>

    In the query_posts function at the top, you’ll notice a parameter called “cat=3″. That id number will differ from user to user, depending on what number is assigned in your database. It can be viewed in your control panel under Manage->Categories:

    Be sure to adjust yours accordingly.

  4. Three FeaturesIn the lower left column, you’ll see three Feature boxes containing a photo and a title. Just like with the Lead Story, we’ll need to create a new category called “Features”, use Custom Fields to input the images, and pull it all together with Template Tags: 
    <?php
// this is where the Features module begins
query_posts('showposts=3&cat=4'); ?>
<h3>
<?php
// this is where the name of the Features category gets printed
single_cat_title(); ?>
</h3>
<?php while (have_posts()) : the_post(); ?>
<div class="feature">
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">
<img src="<?php echo get_option('home'); ?>/wp-content/themes/mimbo2/images/<?php
// this is where the custom field prints images for each Feature
$values = get_post_custom_values("Image"); echo $values[0]; ?>" alt="" /></a><a href="<?php the_permalink() ?>" rel="bookmark" class="title">
<?php
// this is where title of the Feature gets printed
the_title(); ?>&raquo;</a></div>
<?php endwhile; ?>
  5. Category BlurbsIn the lower middle column, you’ll see there are categories like Music, Style and Gadgets. For each we want to pull a photo, a title and an excerpt. Instead of duplicating the same Template Tags for each category, we put the categories into an array and pull them like this: 
    <?php
// this is where you enter the IDs of which categories you want to display
$display_categories = array(5,6,7);
foreach ($display_categories as $category) { ??>

<?php query_posts("showposts=1&cat=$category"); ??>
<?php
// this is where you enter the IDs of which categories you want to display
$display_categories = array(5,6,7);
foreach ($display_categories as $category) { ?>

<?php query_posts("showposts=1&cat=$category"); ?>
<h3><?php
// this is where the category name gets printed
single_cat_title(); ?></h3>
<?php while (have_posts()) : the_post(); ?>

<?php
// this grabs the image filename
$values = get_post_custom_values("Image");
// this checks to see if an image file exists
if (isset($values[0])) {
?>

<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">
<img src="<?php echo get_option('home'); ?>/wp-content/themes/mimbo2/images/<?php $values = get_post_custom_values("Image"); echo $values[0]; ?>" alt="" /></a>
<?php } ?>
<a href="<?php the_permalink() ?>" rel="bookmark" class="title"><?php the_title(); ?>&raquo;</a>
<?php the_excerpt(); ?>
<?php endwhile; ?>
<?php } ?>
  6. News HeadlinesAt the top of our sidebar are three headlines from the “News” category. You may have already guessed that we need a new category called “News” and another query_posts function: 
    <?php query_posts('showposts=3&cat=8'); ?>
<ul>
 <?php while (have_posts()) : the_post(); ?>
      <li><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></li>
 <?php endwhile; ?>
 </ul>
  7. Browse ArchivesBecause the archive list can become very long over time, we will display ours in a pull down menu: 
    <form id="archiveform" action="">
<select name="archive_chrono" onchange="window.location =
(document.forms.archiveform.archive_chrono[document.forms.archiveform.archive_chrono.selectedIndex].value);">
<?php get_archives('monthly','','option'); ?>
</select>
</form>
  8. Ads & Sponsors (Optional)If you wish to insert advertising, open sidebar.php and add whatever code is needed.
  9. ContributorsLast comes our “Contributors” module which uses the wp_list_authors function to query our database for contributors, print them in a list and include an RSS link for each: 
    <ul>
 <?php wp_list_authors('exclude_admin=1&show_fullname=1&hide_empty=1&feed_image=/wp-content/themes/mimbo2/images/rss.gif'); ?>
</ul>

    Using a few available parameters, I have opted to exclude myself (administrator) from the list, show the name of each author, hide the name of any author who has not published anything and display an RSS icon.

  10. Single Post PagesIf you view a single post, you will see author info at the bottom of the article. That info can be edited in the control panel under Users->Your Profile.

    The author’s photo uses a custom field to display the image. Note that the filename must match the author’s last name (ex: “Hoyt.jpg”):

    <img src="<?php echo get_option('home'); ?>/wp-content/themes/mimbo2/images/<?php the_author_lastname(); ?>.jpg" alt="" />

    The author’s name is called like this:

    <?php the_author_posts_link('namefl'); ?>

    The author’s bio is called like this:

    <?php the_author_description(); ?>

    The author’s email is called like this:

    <a href="mailto:<?php the_author_email(); ?>" title="Email this author">Email this author</a>

That seems like a pretty good start to our magazine empire. Now it’s up to the client (himself a confirmed mimbo) to hire some talented writers and hope for the best.