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 {+}

Dec 2
11:12 am

Jay
Thank you! I’ve just finished the basic tweaking of our site using your template. Excellent!
Dec 3
2:09 am

Miles
I basically took this idea to an extreme this past summer to create the website for my college’s online daily paper.

You can see it here: daily.swarthmore.edu/

I’d make it a theme, except there are a ridiculously huge number of individual categories called all over the place for posts and links etc. that anyone using it would have to heavily modify it themselves. Getting it to run has required, thus far, three custom plug-ins too.
Dec 3
12:03 pm

Roger
Hi,

The custom fields dont work for me. I can see it get printed in the source code from the website, but it stops just after …..image/ so it looks like the image name is not being parsed or something!

Can you help me with this ?

Thanks
Dec 5
3:29 pm

Jean-Phi
Hello Darent,

First, many thanks for this Mimbo.

I meet problem with display items category by category. Could you check my Url and click one of them. You’ll see. It’s problem of my configuration or yhe new version of Mimbo.

Regards.
Dec 7
2:17 pm

Roscoe
Brilliant work.

For Single Post Pages, is there a way to call other data from the user profile, for instance their url…

Keep up the good work.
Dec 7
4:26 pm

Fabian
omg, thank you sooooooooo much!!!
Dec 9
11:50 am

Sergio
Hi!
I have installed mimbo wordpress theme, is great but I have a problem. When click on Browse categories I don’t see nothing, The screen is black. Can you help me, please?.

Thank you.
Dec 9
11:52 am

Sergio
Hi!
I have installed mimbo wordpress theme, is great but I have a problem. When click on Browse categories I donâ€™t see nothing, The screen is black. Can you help me, please?.
My blog is http://www.tantoportanpoco.com

Thank you.
Dec 19
2:09 pm

Andy
Oh, and did not know about it. Thanks for the information …
Dec 30
2:03 am

Brad
This is great. i’ve been trying several things to get what you’ve created. I love it.

I was thinking of the “catagory blurb” section that it would be nice to be able to change the catagories listed the same way you change Lead and Feature stories. Can you advise me the write php changes needed to basically have a “Catagory Blurb 1″ “2″ “3″. I would need to make a catagory 1, 2, 3 (numbers, so they show up first) and where they print on the page it will say (instead of just 1) it will say “1 (name of other catagory selected)” (( for instance “1 Woodworking” )).

I appreciate your help. I’m not very good at PHP, but i’m sure a question like this would be like childs play to you.
Jan 2
8:02 pm

kristarella
I knew Wordpress could do this stuff. Thankyou so much for showing how!
Jan 5
12:14 pm

Kate Mag
Wow, you’re great! I like Mimbo and i learn a lot from you.
Jan 5
6:25 pm

Frank Pfabigan
your theme will be listed among our top-theme-list at http://wordpress-tutorials.de soon
Jan 10
5:16 am

Jim
Hi Darren,

Your theme is great.. but when I try to add images from url.. different website..the images is not displayed correctly..

example (I use the blog this tool from flickr to website)
http://farm2.static.flickr.com/1251/1206384591_1b9037881a.jpg

single post works fine
http://www.aboutoc.com/photos-videos/talega-san-clemente-orange-county.html

but from the Categories link the image don’t show up… (just the flickr css comments)
http://www.aboutoc.com/photo-videos

any idea how i can have the images show up in the Categories page??

Thank you,

Jim
Jan 10
2:26 pm

Clara-xt
122 capital street suite 200
Jan 14
3:39 am

Henry
Catchable fatal error: Object of class stdClass could not be converted to string in /home/ikooly/public_html/blog/wp-includes/category-template.php on line 31

i got this error in sidebar when going to default post of wordpress
Jan 15
5:58 am

Kiki
That’s a great WP templates MAGAZINE. by the way I’m still confuse with your Leading Story Module said “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:”

Perhaps you can more detail share us about it.
Btw, thanks for your attention.

Rgds
Kiki
Jan 16
9:33 am

Goran AniÄ?iÄ‡
Here is example ;)
http://www.ictmag.info
Jan 20
2:39 pm

jasa
I think you coded the template for the sake of your demo and did not think about its ease of use and installation for your users. If not for my background in php, I’d have given up trying to make it work.

But alas, its works and nice job! :) Though like I mentioned, you might want to edit the code to make it more user friendly, easier to install and customize.

Jasa
Jan 21
2:48 am

Hilmy
WebBizPowerTools.com Loves Mimbo

It’s simply awesome! Thanks a lot Darren.

I like it the minute I see it. After a little struggle to understand how Mimbo works, I was able to customise the way I wanted it.

It’s my site’s theme now.

Keep up the great work Darren!
Jan 21
7:23 am

Binusha Perera
great site and also very impressive wordpress template. good work
Jan 27
11:41 am

Senthil Kumar
I had start working on your theme for my website http://www.gadgetsgallery.com
No words to explain my expressions….Simply superb and amazing work….
Feb 1
12:08 am

@balootisme
thanks a lot darren for this template..

i’d apply this template to my DIET PILL REVIEW BLOG.

it takes me about a day to full customize this…
Feb 1
6:57 am

gmonger
Great theme, definitely different from the typical ones I’ve seen. And thanks for coming up with an informative installation and post installation reference above. Makes my life easier.
Feb 7
6:53 pm

Jos van der Vleuten
Hi Darren,

I started today a fresh new site wich is based on your wonderfull theme.
Keep up the good work!!!

cheers,
Jos van der Vleuten
Feb 15
4:07 am

John
I have a odd problem. The link ‘Lead Story’ does not show and is replaced by the words ‘NO CATEGORIES’ . I looked through the template and all the Category ID but cannot find the problem. Thanks for the great template.
Feb 15
5:57 am

John
What i mean is that i cannot seem to get the category name printed out and with a link to the ‘Lead Story’.
Is the code below correct?

<a href=”" rel=”bookmark” title=”Permanent Link to ”
It seems to show the ‘Lead Story’ word but does not link to the actual ‘Lead Storey’ Category.
Feb 21
3:06 pm

Shaun LePage
Darren,
Thanks for the great theme. I’ve got a question, though. I’m very unschooled in working with code, but I’m trying to learn. The author photo code I downloaded is different than what you have up above. This is what I have…

<img src=”/images/.jpg” alt=”" />

Can tell me exactly what I need to do with this? Do I replace “login” with my login name? Do I put it in the parentheses? Where do I put the jpg name? Right before “.jpg”? Sorry–probably dumb questions, but thanks for any help you can give.
Feb 25
7:05 pm

msn nickleri
thanks good template I’m now download
Feb 27
10:24 am

Adam Lehrhaupt
Darren:

Fabulous theme. We are customizing it for our new blog and I am having a spot of trouble with the author images. It seems to be similar to Shaun LePage’s issue above.

Here is the code I have:
<img src=”/images/.jpg” alt=”" />

I tried my login, lastname, firstname as the image file name. Any thoughts?

Thanks again for all the great work on this theme.

A-
Mar 5
10:32 am

Dominic
Adam Lehrhaupt: To make your author images work make sure the line is as follows (in the SINGLE POST template):

<img src=”/wp-content/themes/mimbo2/images/.jpg” alt=”" />

The author image will show up only if the author last name is the image name (must be a JPG).

If you want it to show the image with the author’s login, use this:

<img src=”/images/.jpg” alt=”" />

The lead story category title can be changed here in the INDEX template:

The include=3 is the category number. This decides the title of the category of the lead story.
Mar 5
10:34 am

Dominic
My above post lost the code for the lead story category title:

wp_list_categories(’include=3&title_li=&style=none’); ?>

The include=3 is the category chosen for the Title Category.
Mar 5
10:36 am

Dominic
Sorry, the above post on author images lost the code too…comments do not like the php tag.

email me at

dominic.willett
at
gmail.com

I can send you the code.
Mar 8
7:57 am

upskirt
upskirt
Mar 20
2:00 pm

Nicole
The theme is awesome. However, I just added my first post and while it is available in the side bar -nothing shows up on the homepage? TheLuxMaven.com.
Mar 22
9:43 am

Blogeeks
So good! Thank for your work!
Mar 23
6:39 pm

technology
thanks very good template.
Mar 23
10:59 pm

sachinKT
thanks !!! for this great template.this is exactly what I was looking for.probably the best guide to constructing a flexible WordPress template ….
Mar 27
10:43 am

Harry
I absolutely love this theme, thank you so much for it! Great job.

Does anybody know where the excerpt for the lead story can be changed? It pulls the first 55 words from the post – where can I customize that number? To 75 for example.

Cheers