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

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
Mar 28
7:01 am

dekan
Nice theme. Very good work. I’m using it for http://semesra.mywindowsxp.info :) Thanks.
Apr 7
3:52 pm

Marcus Aurelius
Hi guys, great work!
But I actually do not get how to make author’s avatar to appear. I know the image file is supposed to have the same name as the last name of the author is but is there a need to apply some special custom field as well or no.? Please support a detailed how to for us who are a bit dumber.thanx
Apr 12
11:36 pm

Zoran
Nice tutorial. I have been using Joomla for past 4 years to build CMS but after this I will try using Wordpress.
Apr 19
12:12 am

Norvell
Question will there be another breakdown of how to set things up for wordpress 2.5 or will you up date this templates?
Apr 19
3:01 pm

web development
cool! we develop online magazines too! we might use this.
Apr 23
4:23 am

Rick Lee
http://www.sofa-manufacturer.com
can youp please give advice on the above website? I do want to use this theme to replace. but I am not sure whether it is good or not.
Apr 27
8:42 am

ricland
The tweak that would allow the text and images to generate entirely from posts is what will make this really user-friendly.

Placing an image in the image file is time-consuming and doesn’t provide the formatting you get in a post.

Non-geek users won’t be able to do this.

If the process is more complicated than posting, they’ll say it’s too hard.

ricland
Jun 6
3:51 am

Seg
Thanks so much. This will pole vault my struggle :)
Jun 14
3:57 am

Josh
Hey Darren,

As a PHP’er myself, I have to commend you on how simple and elegant your solution is. Really nice work, and above all, great way to use existing tools to solve a relatively complex, and common problem: Complex content organization.

Nice work.

JZ
Jun 16
11:10 pm

Aditya Kuber
Tried to get the user photo in many ways, but finally, it worked when the username matched the filename and not the ‘last name’ as is mentioned above. Incidentally, elsewhere, you mention ‘first name’ should match… kind of confusing! But great theme and brilliant features.
Jun 19
1:34 pm

Steve
I wanted to say that this theme is a really good base for creating a magazine style wordpress CMS implementation. I will say though, that there is much to improve upon.

I have tested this fully with WP 2.5.1 and it is working all around. I will say that it would be nice to incorporate the ability to have images (the lead story, featured, and category articles) utilizing a build in plugin, or other functionality for user uploading rather than dealing with putting images into a theme folder.

Since I know PHP and WP’s inner workings, I can potentially enable something like this however, it would be nice to have a new version with this built in for WP 2.5 support.

Great theme though!
Jun 21
4:36 pm

Jack Shipley
Nice work. Do you have an overlay to your PSD file showing, roughly, the placements for your categories?

JD
Jun 22
10:48 am

Steve
Well I made some headway yesterday. I was able to incorporate a plugin that looks for an image placed in the article to be used as the “lead” article image displayed on the home page. It works, though not quite as well as i would like since there are different images being used on the entire front page. The good news though is that it can be done so you don’t have to FTP images to the /images/ directory and can use the built in media manager with WP 2.5+.
Jun 22
1:20 pm

Jack Shipley
OK. Figured it out. I’m imagination impaired!

Since I’m not a designer/programmer, one question: I’m having trouble IDing in the sytle.css how to change the color of the H tags from green to a more compatible blue. What am I missing?

I do need to upgrade to Pro, I think.

Jack
Jul 6
12:46 am

Vfanlkwq
This site is crazy :)
Jul 6
5:54 am

Juurrtxn
nice work man 10x
Jul 8
8:15 am

gpo
Very good, this is the blog theme for me…

keep up the work
Jul 9
10:05 am

Arrernoky
tests time mashine
Jul 15
6:13 pm

rhoen
I’ve been using it form the past couple of months – upgraded to WP 2.6… not a single problem. thanks, darren!
Jul 21
8:02 am

alÄ±ÅŸveriÅŸ
Ã¶nce anlayamadÄ±m bunun ne olduÄŸunu resimler gÃ¶sterilmiyordu. sonra ÅŸunu yapÄ±nca ana sayfada (index.php) sayfasÄ±nda resimli olarak kategoriler gÃ¶rÃ¼ndÃ¼. bunun iÃ§in yazÄ±yÄ± yazdÄ±ktan sonra “Ã–zel Alanlar” bÃ¶lÃ¼mÃ¼nde “Anahtar” kÄ±smÄ±na Image yazÄ±p “DeÄŸer” kÄ±smÄ±na da imaj resmini Ã¶rn:image.jpg yazÄ±yorsunuz.