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»</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(); ?>»</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(); ?>»</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.
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.
Popularity: 18% [?]
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
wow - brillant.
thats why i need a own wordpressblog, because
I use at present a freeaccount on wordpress …
Great idea - one question, don’t feeds pull the excerpt? If so, they’d be pulling the image and not the post?
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.
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!
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!
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.
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!
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.
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.
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!
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.
thx!
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?
Hello! Good Site! Thanks you! xapemmoodu
Darren,
Thanks for the great info!
I for one would love to see a WP template based on the Mimbo example.
Best,
Matt
A ‘Mimbo’ Wordpress theme is in the works. If all goes well, it might be done by Sunday or Monday, check back soon…
I think this could be a great theme!
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/)
@The Traveler:
The ‘Mimbo’ theme is now available, and the new version no longer requires the “Read More” function.
great job on this
its awesome