We keep up on the newest technologies and write about it every chance we can get. Feel free to browse.

Developing A Wordpress Magazine Theme – Part One

Posted: April 16th, 2009 | Author: Bryan | Filed under: Tutorial | 2 Comments »

This tutorial is going to teach you how to build some of the functionalities that are commonly found in magazine style themes. I am going to stick with pretty generic concepts as the pertain to Wordpress only. And mind you, I will not be teaching you how to build an entire theme from scratch, we’ll just focus on building the homepage with the classic magazine theme functionality.

Recent Posts Boxes Image Preview

A common feature in a Magazine theme is those 1/3 columns with thumbnails of an image in the post. The CSS is actually pretty easy, we’ll just divide the width of the total area into three sections. Let’s make it easy and say its 960px wide, so we have 3 boxes with a width of 320px each. Let’s also make them square, and they need to float to the left to stack horizontally. This is the ideal HTML and CSS:

Demo Feature Box
  1. <div class="featuredbox">
  2.  <img src="/image1.jpg" alt="this is a thumbnail" width="128" height="128" />
  3.   <h3><a href="#">Heading 1</a></h3>
  4.   <p>Post excerpt here orem blah blah….</p>
  5.  <a href="#">Read more…</a></div>
  6. <div class="featuredbox">
  7.  <img src="/image2.jpg" alt="this is a thumbnail" width="128" height="128" />
  8.   <h3><a href="#">Heading 2</a></h3>
  9.   <p>Post excerpt here orem blah blah….</p>
  10.  <a href="#">Read more…</a></div>
  11. <div class="featuredbox">
  12.  <img src="/image3.jpg" alt="this is a thumbnail" width="128" height="128" />
  13.   <h3><a href="#">Heading 3</a></h3>
  14.   <p>Post excerpt here orem blah blah….</p>
  15.  <a href="#">Read more…</a></div>
  1. .featured {
  2.   width:320px;
  3.   height:320px;
  4.   float:left;
  5. }
  6. .featured img {
  7.   float:left;
  8. }

This should pretty much prep us for what we want to do, let’s make the WP_Query to grab this data. There is obviously no use in repeating ourselves like we did with the HTML with PHP at hand, in fact, lets just use a standard loop, like this:

  1. <?php $featured = new WP_Query("showposts=3");
  2.   while($featured->have_posts()) : $featured->the_post();?>
  3.   <div class="featuredbox">
  4.    <img src="/imagenum.jpg" alt="this is a thumbnail" width="128" height="128" />
  5.     <h3><a href="#">Heading Num</a></h3>
  6.     <p>Post excerpt here orem blah blah….</p>
  7.    <a href="#">Read more…</a>
  8.   </div>
  9. <?php endwhile; ?>

Well that’s close, but let’s get those standard Wordpress tags in there, otherwise they’ll be uselessly looping on a worthless box, with no appropriate content gracing our Wordpress magazine theme. Let’s try:

  1. <?php $featured = new WP_Query("showposts=3");
  2.   while($featured->have_posts()) : $featured->the_post();?>
  3.   <div class="featuredbox">
  4.    <img src="/imagenum.jpg" alt="this is a thumbnail" width="128" height="128" />
  5.     <h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
  6.     <?php the_excerpt(); ?>
  7.    <a href="<?php the_permalink() ?>">Read more…</a>
  8.   </div>
  9. <?php endwhile; ?>

That’s much closer, however, we’re missing our thumbnail. Let’s make this simple, we can get fancier but this technique works well for new blogs. If you’re moving your blog, this type of Wordpress magazine theme might not be right. You’ll want to go into your Wordpress Settings->Media section and set the thumbnail dimensions to 128×128 (or whatever you set it to) and check the crop checkbox.

  1. <?php
  2.  
  3.   function match($regex, $str, $i = 0) {
  4.    if(preg_match($regex, $str, $match) == 1)
  5.     return $match[$i];
  6.    else
  7.     return false;
  8.   }
  9.  
  10.   $featured = new WP_Query("showposts=3");
  11.   while($featured->have_posts()) : $featured->the_post();
  12.  
  13.   ob_start();
  14.   the_content();
  15.   $imgBeg = strpos(ob_get_contents(), '<img');
  16.   $imgStuff = substr(ob_get_contents(), $imgBeg);
  17.   ob_end_clean();
  18.   $imgEnd = strpos($imgStuff, '>');
  19.   $postImg = substr($imgStuff, 0, $imgEnd+1);
  20.   $postImg = match('/src="(.*?)" /msi', $postImg, 1);
  21.   $postImg = preg_replace('/.jpg/','-128×128.jpg', ob_get_contents());
  22.   $postImg = preg_replace('/.png/','-128×128.png', ob_get_contents());
  23.   $postImg = preg_replace('/.gif/','-128×128.gif', ob_get_contents());
  24.  
  25. ?>
  26.   <div class="featuredbox">
  27.    <img src="<?php echo $postImg; ?>" alt="<?php the_title(); ?>" width="128" height="128" />
  28.     <h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
  29.     <?php the_excerpt(); ?>
  30.    <a href="<?php the_permalink() ?>">Read more…</a>
  31.   </div>
  32. <?php endwhile; ?>

This code grabs the first image URL, adds the -128×128.jpg to the end of the file name, calling the file created by Wordpress when you upload the image originally.

You can explore some more options for the WP_Query by browsing the official Wordpress site. You can select only certain categories, and go off of other more choosy criteria. Whatever you do, tune in for the next edition.

2 Comments on “Developing A Wordpress Magazine Theme – Part One”

  1. #1 Ellis Benus said at 2:52 pm on May 26th, 2009:

    Congratulations on getting your design featured on Smashing Magazine.

    http://www.smashingmagazine.com/2009/05/18/100-amazing-free-wordpress-themes-for-2009/

    I am also based in Columbia, Missouri and your title, MidMoDesign.com caught my eye.

  2. #2 Kiper IT-konsult said at 4:09 pm on June 3rd, 2009:

    Great tutorial!

    I was looking for a user friendly way to create thumbs for featured posts and this feels spot on. Darren Hoyt’s Timthumb-script is also excellent: http://www.darrenhoyt.com/2008/04/02/timthumb-php-script-released/

    But this feels smarter since you use the built in code for Wordpress!

Leave a Reply