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

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.

290 Responses {+}

Trackbacks

  1. Quality Peoples » Magazine Layouts with WP
  2. WordPress as an Online Magazine
  3. Customizing Wordpress the Easy Way!
  4. WordPress 作为一本网络�志 | wordpress blog xqxp.com
  5. Mit Wordpress ein Online Magazin bauen
  6. links for 2007-07-27
  7. marlyse.com » In Praise of Wordpress Template Tags, Part II: The Magazine Layout
  8. Entreprenews of the Week -- Young Go Getter
  9. links for 2007-07-29 « toonz
  10. Basic Thinking Blog » Wordpress als CMS
  11. links for 2007-07-30 | MY Vast Right Wing Conspiracy
  12. Mine del.icio.us-links den 31. juli
  13. one digital life » Blog Archive » Tutorial: Magazine layouts with Wordpress
  14. 10 Links für ein besseres WordPress-Blog | NanoPub
  15. Recommended Reading for 25th July through 4th August
  16. adventures of a blogjunkie » Blog Archive » del.icio.us bookmarks for August 4th
  17. links for 2007-07-26 en newdisco
  18. Thème Wordpress Magazine, un soupçon de CMS ?
  19. Mimbo Magazine-style WordPress Theme » D’ Technology Weblog: Technology News & Reviews
  20. blog do valdecir carvalho » Blog Archive » links for 2007-08-07
  21. Magazine Layout | The WP Journal
  22. Best of July 2007 | Best of the Month
  23. Nachlese Juli 2007- Die Seiten des Monats » Allgemeines
  24. Best of July 2007 .
  25. lost node » Blog Archive » Best of July 2007
  26. Mark Kirby - Brighton » Blog Archive » links for 2007-08-14
  27. links for 2007-08-14 | betohayasida.net
  28. My del.icio.us bookmarks for August 1st through August 14th
  29. Post-ferie linkopsamling | Webmercial.dk
  30. Wordpress Template Tags: The Magazine Layout
  31. The Rock ‘n’ Ro Show » Blog Archive » Entreprenews of the Week
  32. Web 2.0 Blog » Blog Archive » Nachlese Juli 2007- Die Seiten des Monats - aus dem Blog:Dr. Web Weblog[Quelle]
  33. » Wordpress Magazine Theme Released
  34. » Build A Dynamic Design Portfolio with Wordpress
  35. » Managing Wordpress Template Tags with Dreamweaver Snippets
  36. Darren Hoyt Dot Com » Blog Archive » Wordpress Magazine Theme Released
  37. Darren Hoyt Dot Com » Blog Archive » Updates to the Magazine Theme Tutorial
  38. Darren Hoyt Dot Com » Wordpress Themes Aren’t Just Pretty Packaging
  39. WP Deneme » Blog Archive » Wordpress Magazine Theme Released
  40. WP Deneme » Blog Archive » How do I add images to the homepage
  41. WP Deneme » Blog Archive » Why does the formatting of my excerpts look strange?
  42. josh fassbind » Blog Archive » Ladida, Ladida
  43. En bedre tegneserieside, del 1: 404 not found at superevil.org
  44. �CMS一样的WordPress 主题Mimbo : : MoonShow
  45. HIC SUNT LEONES » Blog Archive » News Post #1
  46. HIC SUNT LEONES » Blog Archive » News Post #2
  47. HIC SUNT LEONES » Blog Archive » Event #1
  48. HIC SUNT LEONES » Blog Archive » Event #2
  49. HIC SUNT LEONES » Blog Archive » Uncategorized
  50. HIC SUNT LEONES » Blog Archive » Incoming #1
  51. HIC SUNT LEONES » Blog Archive » Connection #1
  52. HIC SUNT LEONES » Blog Archive » History #1
  53. HIC SUNT LEONES » Blog Archive » Incoming #2
  54. HIC SUNT LEONES » Blog Archive » Event #3
  55. HIC SUNT LEONES » Blog Archive » Event #4
  56. » Wordpress Magazine Theme —— Mimbo中文说明 EZY Street» Blog Archive
  57. Thème en préparation : Mimbo 2.1 « Calyptratus WordPress Corner
  58. Mark Thomas Gazels websted » Blog Archive » links for 2007-11-19
  59. bubez.com » Blog Archive » Test del cazzo
  60. Le Blog de Brakwiz » News » Bienvenue sur “Brakwiz 2.0″
  61. Keren!!! Template Mimbo « Zoel’s Website & Blog
  62. Ett par snygga Wordpress mallar | Westberg Sökmotoroptimering
  63. 电影家 » æ–° » 11月 13th, 2007 WPæ?‚志模æ?¿Mimbo中文使用说明
  64. KodeeXII.Net » Blog Archive » Mimbo Theme It Is
  65. Rechangement de thème ! : Le Blog de Brakwiz
  66. gfhfhfdh |
  67. Mimbo Theme Live | Kelson Consulting
  68. YouR on This ! |
  69. Scratch » Features » Afridi Blazes A Tonne
  70. Scratch » Uncategorized » Walla!
  71. Mimbo中文使用说明 | 沿阶�堂
  72. Moving Over to Wordpress: My Observations
  73. claims4negligence.co.uk » Uncategorized » Person Injury Claim
  74. Moving Blogger Over to Wordpress: The Good, Bad and the Ugly
  75. E拉客 » 测试分类 » WPæ?‚志模æ?¿Mimbo中文使用说明
  76. Sollzustand » Eine kleine Geschichte über Eine, die unbedingt ein Wordpress Theme anpassen mußte
  77. Free WordPress templates, plugins » Blog Archive » Mimbo Free Wordpress Template
  78. Webzine | Ceci est un test d’article
  79. Vertrekkers Info » Welkom » Welkom bij Vertrekkers Info!
  80. La Pinta Medicea » Blog » prova
  81. Layoutica.com - Mimbo: Free Wordpress Magazine Theme
  82. Burwood » LEAD STORY WordPress » Wordpress Magazine Theme Released
  83. ç?µÂ·å??-[soulreturn] » 我喜欢的 » 感谢 | Mimbo theme !
  84. Jet Pack » Flagship » Testing the Ratings System
  85. vandervleuten.org » Lead Story » Mimbo Magazine
  86. instruccion juego dado
  87. Thèmes Wordpress | css-xhtml
  88. The Fresh Press » Lead Story » Checking…
  89. The end of Premium wordpress themes? » hervedesign(dot)com
  90. The Business of Art» Your website » About this site design
  91. Art Service Pfleging » Archive » Mimbo Magazine Theme
  92. Chylly`s Celebrity Magazine Reloaded | Chylly`s Celebrity Magazine
  93. Dumitru Bostan despre Web 2.0 » Wordpress » WP demo
  94. Eyka » Blog Archive » Nowruz
  95. en test rubrik
  96. 3 testet är här nu
  97. 二月河 » 康熙大帝 » Mimbo模板
  98. Hello | Y e e e e e e
  99. Mimbo v2.2 - Wordpress Magazine Theme : Themes Blog’s
  100. for the life category | michael john grist
  101. study | michael john grist
  102. reviews | michael john grist
  103. Mimbo WordPress Themes
  104. Best Wordpress Themes » Mimbo Pro
  105. NEVER WALK ALONG » my words » 我的未来
  106. CultureEnJeu » Actualités Agir » Initiative
  107. CultureEnJeu » Témoignages » Initiative
  108. Estrenos de DVD » Lead Story » lalalal
  109. Oltre il deserto » Senza categoria » rggg
  110. Oltre il deserto » Senza categoria » rfrvtv 4t 4
  111. Oltre il deserto » categoria seconda » rfr 4t
  112. Oltre il deserto » categoria seconda » r4r 4
  113. Oltre il deserto » terza categoria » terza prorr
  114. Oltre il deserto » terza categoria » quarta
  115. prova 2.5 CR 1 : oooo
  116. prova 2.5 CR 1 :
  117. 壹龍视觉 » 壹龍生活 » WordPress 模板
  118. WordPress Upgrade and New Theme :: radian
  119. The Magazine-Style Wordpress Theme Mimbo
  120. Sillery Animation » Les loisirs récréatifs » Nouvel essai
  121. mimbo magazine theme released
  122. actu 2 | Vibrations de santé
  123. rubatogandaia.mus.br » Lenine » Testando Novamente
  124. rubatogandaia.mus.br » Lenine » Testando Numero 2
  125. rubatogandaia.mus.br » Cultura Geral » Testando Cultura 02
  126. rubatogandaia.mus.br » Cultura Geral » Testando Cultura 03
  127. rubatogandaia.mus.br » Cultura Geral » Testando Cultural 04
  128. Lenine Fan Cultural » Teste001 » Nova Categoria
  129. Lenine Fan Cultural » Features » Teste Features
  130. INTELLIGENT NAIVETY » The Entrepreneurial Museum » First entry on Entrepreneurial museum
  131. BLOGPOSTER Magazine » Reportaje » Carteles guays
  132. Wordpress Magazine Theme Released | One Ummah
  133. Thursday Links Roundup - Putting Blogs First
  134. Wordpress Magazine Theme Released
  135. WP Junkie - Mimbo Magazine Theme
  136. p2ppr.co.uk » Testy » First post - testing the new theme
  137. Players Land » Uncategorized » Mais uma noticia com imagem
  138. 我的空间 » 未分类 » WP杂志模板Mimbo中文使用说明
  139. Magazin Themes: Vom Blog zum Internet-Magazin (1)
  140. Everybody Mimbo! « Tips from Idea15 Web Design
  141. PakistaniMusic.com Blog | Test Post #1
  142. The Genesis: Welcome to Internet Espionage, Awesome WP Links, and More | Internet Espionage
  143. represent.be » Blog Archive » test 2
  144. Gidman » Танцы » Аккордион в Плазме
  145. When To Use Magazine-Style Themes For Blogs? | How-To | Smashing Magazine
  146. duane-francis.com » Test » Test
  147. Customizing your Wordpress Theme – Part 2 | Neowster
  148. Customize your WordPress Theme | Neowster
  149. My Blog » Features » About This Theme
  150. WordPress Blog » Uncategorized » mambo
  151. WordPress Blog » Lead Story » Test
  152. Mimbo 2 - | Cwave Soft
  153. light in the shadows » Blogging Blogs » Wordpress Themes (revisited)
  154. Fish in the River » Tools » Wordpress Magazine Theme Released
  155. Digital Utopia » Nuts and bolts of news publishing with WordPress
  156. 6 Things You Didn’t Know WordPress Could Be - PuttingBlogsFirst
  157. AUTOMOBILE-PARTS-DEPOT » Articles Featured Products » test featured product
  158. Mellowish » Blog Archive » No Images Grid Based Mimbo Magazine Theme
  159. todos somos julian ross » Música y vídeos » Dummy 4
  160. todos somos julian ross » Qué pasó con... » dummy 8
  161. testing 1 | 68 Photoshop VietNam
  162. testing 2 | 68 Photoshop VietNam
  163. » Dance Crew » test 4
  164. Mimbo 2 - | Cwave Soft
  165. calidos.com Lo BLOC… » Blog Archive » Inci de les obres del tram tal