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

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):

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:

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:

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'); ?>
```
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.
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.

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; ?>

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 } ?>

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>

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>

Ads & Sponsors (Optional)If you wish to insert advertising, open sidebar.php and add whatever code is needed.
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.
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.

Follow me on Twitter

290 Responses {+}

Jul 25
12:13 am

gathadirect
Darren,
This is a terrific series — I’ve been looking for ages for a CMS to handle this type of thing for a local project: if only I’d known sooner that the mighty WordPress could handle this type of thing.
Keep up the good work – can’t wait to see what you have coming next.
Cheers – GD
Jul 25
5:46 am

Pierro
wow – brillant.
thats why i need a own wordpressblog, because
I use at present a freeaccount on wordpress …
Jul 25
3:00 pm

Brian Gardner
Great idea – one question, don’t feeds pull the excerpt? If so, they’d be pulling the image and not the post?
Jul 25
3:51 pm

Kris Black
This is awesome. A template would come in handy for my podcast site. My only question would be if the Lead Story Blurb could also display the Podpress plugin media player for podcasting.
Jul 25
6:21 pm

Chris In Cincinnati
I’ve done a couple of “WordPress as CMS” projects for clients and the first few were a bit of a battle. They’ve gotten easier but I think this post will ratchet up my dollars to effort ratio a bit more.

Thanks!
Jul 25
6:57 pm

Lindsey
This is one of the best, easiest to read and understand WordPress template articles I’ve ever read. I’d venture to even say the best I’ve found so far. Thanks for breaking it down so easily and giving me tons of great ideas!
Jul 25
10:45 pm

Darren
Thanks for the feedback, guys.

@ Brian: Wordpress feeds can show the entire post unless specified by the feedreader, in my experience, at least that’s what I’ve found with Netvibes, Bloglines and Google Reader. If I go ahead and create a working theme for the magazine layout, I’ll do some testing and see how the RSS issues pan out.

@ Kris: Far as I know, the Podpress/Flash bit appears at the bottom of full posts, but isn’t included in post excerpts or “Read More” snippets. Again, that’s something I’d be interested in testing out.
Jul 26
2:45 am

Miriam
This is an excellent description of how to use WordPress as a CMS? I use WordPress for CMS sites for clients, since it’s so flexible. But I never even thought of using it like this, and some of the things you describe here are new to me. Thanks for such an informative post!
Jul 26
5:10 am

waaah
poor wordpress. it wants to be a CMS so badly, but the admin code is so awful and static. broken dev process, old code.
i really wish someone would come with a more flexible blog-as-a-cms package and knock wordpress off.
Jul 26
7:39 am

Matt
I’d just like to add a voice saying, absolutely convert it to a theme if you’re able to and have the motivation. It’d be a brilliant addition to the Wordpress world.
Jul 28
3:28 am

Chris
Hi, I’d also definitely be really glad if you could find the time to convert it to a theme (it’s pretty well just what I need for a site I’m working on), but a great article either way!

Thanks!
Jul 28
11:19 am

Darren
Hi guys,

Technically the first part of the theme is already written; it’s what I used to test a lot of the functions described in the article. The code is sloppy and full of inline CSS styles, as it was just created for testing purposes, but it worked fine. Check back in a few weeks and I’ll put together a more complete theme available for download.
Jul 29
1:41 am

youyicun
thx!
Jul 29
10:31 am

Alex Richards
So I have a question: How do you style each of those Featured Stories boxes? Based on my experience over the past hour trying to do that, it groups all three stories into one div and I can’t (because I’m slightly retarded) figure out how to get a border box around each story separately; it just puts the border and styling around the entire container of the featured stories that are being pulled from the database.

Can someone enlighten me?
Jul 30
6:59 am

hmhuunzfew
Hello! Good Site! Thanks you! xapemmoodu
Aug 3
12:29 pm

Matt
Darren,

Thanks for the great info!

I for one would love to see a WP template based on the Mimbo example.

Best,
Matt
Aug 3
8:43 pm

Darren Hoyt
A ‘Mimbo’ Wordpress theme is in the works. If all goes well, it might be done by Sunday or Monday, check back soon…
Aug 7
11:19 am

Brian Pate
I think this could be a great theme!
Aug 7
6:19 pm

the Traveler
hi darren,
thx for this great template – i was looking for sth like this a long long time. but i have the problem, that the more-tag is not working. if i try it in the main-lead-story, the story is always shown in the full length. how can i correct this ?

thank u in advance,

the traveler (testblog on http://t1745.foto-outlet.de/wordpress/)
Aug 13
1:51 pm

Darren Hoyt
@The Traveler:

The ‘Mimbo’ theme is now available, and the new version no longer requires the “Read More” function.
Aug 15
12:20 pm

eddy
great job on this

its awesome
Aug 24
3:35 pm

vijay
this is exactly what I was looking for. But its not really meant for a single author blog.
Aug 29
3:59 pm

Adrienne Adams
Darren,

Thanks so much for this tutorial and theme. I am right now putting together a WP install for an online literary magazine, and this looks to be just the ticket to get me started. I’ll let you know how it goes!

–Adrienne
Sep 26
7:07 pm

Benji
Im having problems using this code because it messes up with the navigation; did you used an alternative for the navigation?
Oct 1
5:13 pm

Raffel Jill
How does Kineda do his homepage like that?
Oct 2
12:38 am

StrangeAttractor
This tutorial has been super helpful — probably the best guide to constructing a flexible WordPress template that I’ve seen! Thanks so much for making it available.

I have a question that maybe you can answer. I’m constructing a site for an online magazine using WP (and I’ve relied heavily on stuff I’ve learned from your site).

The magazine is a quarterly, and we’d like to have a table of contents on the home page that ONLY shows items from the current issue.

My idea is for the editors to assign a single date to all posts from a given issue (e.g. the Spring Issue posts would all have the date April 15 2007). That way it will be easy to pull up a whole issue from the archives (in theory, anyway).

But on the home page, I want to show the LATEST issue. What I’d like to do is somehow query the posts so that it checks for the LATEST month of posts — not necessarily THIS month (there might not be any new posts this month, since it’s a quarterly) but the MOST RECENT month.

I can kind of think of how this might be done (look to see if there are posts THIS month, IF NOT then look in the month before that, etc.) but this is beyond my extremely rudimentary PHP skillz.

Any suggestions?
Oct 3
7:26 pm

Adrienne Adams
I’m working on a similar problem as StrangeAttractor–a magazine based on issue, not date. My idea is to use the_meta template tag and insert a custom field into each post. For example, every post in a particular issue has the issue number as the key and the issue title as the value.

This is as far as I’ve gotten, but the plan is to then create a query for the post-meta-key. In theory, I think I can then organize all the content based on the meta data that I’ve attached to each post.

Right now I only have the current issue up. I’m working on the archives, which will be the true test of my theory! See the site here: http://sharkreef.org/

I’ll post again once I have made some progress (I hope!)
Oct 19
12:46 pm

glucko
Thank you!! It is one of the best themes i have ever seen!
Oct 24
9:51 pm

Jesse Petersen
This is quite possibly the best theme I have found. I’m a theme hunter, and this is a real winner, followed up by good documentation.
Oct 29
12:11 pm

stew
Hello i have try to add images to Feature article, but it not work, i have change the name of my original cat to Features, but, nope i can’t show the images, please help me if you can.

Bye
Oct 31
1:59 pm

Nic Johnson
Thanks for sharing, Darren.

I’ve played with the template a little bit and it seems to me that it would be more advantageous to use category_name instead of cat in the query_posts tag. At least it seems like it would be more flexible for the content owners to setup the categories. If you use the numbering scheme, you have to set them up in the right order.

Make sense? Am I missing something here?

Thanks,
Nic
Nov 1
4:27 pm

Nivas
hi darren,
i’m using “Mimbo’ theme in my site http://www.lifeofexcellence.com.

cool stuff…..

suppose i need to change right column a bit
where in which i jus wanno display the category along with the image and a short description of the category and the link of that category must go archive of that category..

and also how to display the child categories alone at the side ,because it also shows teh parent category…….

can you help me with the same..
Nov 6
10:04 am

Chris
@Waaah (better blog-as-CMS-package) try MovableType. The templates are in straight HTML, and itll do anything you want. Two good examples of its implementation are

simplebits.com
orderedlist.com

Both made by high profile web developers. Only downside is that it uses CGI instead of PHP.
Nov 7
4:12 pm

Clay Burell
Beautiful work AND support here. I’ve just finished figuring out the “Lead Story” configuration – easy peasy :) – but need more input on the “Features” formatting. Others might have the same questions, so here goes:

What dimensions should the images have for the “Features” image?

That’s all for now. You can see our Project Global Cooling site to watch it evolve.

Thanks again for the brilliant work.
Nov 7
4:42 pm

Clay Burell
Re: my own question about image size for “Features” fields: 256 X 88 works fine. I measured your demo page.

So far this is wonderfully easy. Thanks again!
Nov 9
11:12 am

peijin
hi, i just installed mimbo on my blog…but somehow the pictures in the features (the large ones) are not showing up…have the instructions changed? I tried the uploading, optional field thing and still no picture…it’s still “Image” and the full file name ****.jpg, right?
Is there supposed to be any code for the picture in the actual post?
Nov 9
11:14 am

Dave Milam
Hey,

What do I do for my contributors pics if two contributors share the same last name?

Dave
Nov 12
5:11 am

derdude
i love it! yes, i really do :)
playing around with it on my site linked above.
theres one thing i would like to change. if only i could code php. maybe you can help out ;)
in the ‘category blurbs’ section i would like to be able to use more than one post of each category beeing arrayed. any suggestions?
thanks a lot in advance!
Nov 12
10:32 am

beotiger
Darren, and others, there is bug I have just found while displaying the authors photo , in
single.php there is such string:
/wp-content/themes/mimbo2/images/.
Apparently, it should look like this (for version 2.1 at least ;) )
/wp-content/themes/mimbo2.1/images/

P.S. Thanx a lot for such great theme.
Nov 20
9:23 am

YouON
great work! really a fantastic template i’m using for a friend site karmainstitute.it/magazine
i’ve started to work yesterday i need some time to customize it, but it’ a pleausure workin on.

thanks, alessio