Anatomy of a Magazine Style Premium WordPress Theme – Part 1 "The Loop"

Let me say it for the millionth time “content is king” and we all know that, don’t we?

Creating such category specific presentation on demand requires both PHP script manipulation within the WordPress Loop and some changes to the CSS stylesheet. In continuing with the series on dissecting magazine style themes, we will attempt three hacks that will allow you to do the following:

1. Create a featured post that is displayed at the very top of the page, followed by regular posts; all of which happens taking into consideration the pagination aspects of the site so as to not repeat the featured post on every paginated page.
2. Create a simple featured and non-featured posts distinction using minimal PHP hack, keeping it simple enough so as to not worry about pagination.
3. Create asides to highlight useful bits of information without hogging potentially critical presentation real-estate, or in other words, creating non-intrusive side posts without using a plugin.

What is The Loop?

The loop as the name suggests is a conditionally repeating statement that dynamically generates a string of posts within a WordPress theme. Essentially, this is the heart of the theme, no theme is without it and it controls what and where a post is presented.

What does it look like and where can I find it?

Typically, the Loop in one of our themes has the following format; all WP themes will have the loop in one form or the other (the meta portion is optional):

<?php get_header(); ?>
<?php while(have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<h1><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" rel="bookmark"><?php the_title();
?></a></h1>
<div class="meta">Posted on <?php the_time('F jS, Y') ?> under <?php the_category(', ') ?> <?php if (function_exists('the_tags')) { ?><?php the_tags('', ', ', ''); ?><?php } ?></div>
<?php the_content('Read the rest of this entry »'); ?>
<div class="meta">Published by <?php the_author() ?> // <?php comments_popup_link('Comment now »', '1 Comment »', '% Comments »', 'commentslink'); ?></div>
<?php endwhile; ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

How do you create a magazine style featured post?

Ah, the interesting part. Typically, the featured post is nothing more than a post within a chosen category, and is presented differently from the rest of the posts using a different CSS styling. For the sake of simplicity, we will use a category called “Featured” and manipulate the loop to present only one post from that category at the very top of the posts list in the home page (index).

Without going into the details, we’ll dive right into the index.php file and change the code, explanation of the changes follows this code:

<?php get_header(); ?>
<?php if ( $paged < 2 ) { // Do stuff specific to firstpage?>
<?php $my_query = newWP_Query('category_name=Featured&showposts=1'); while ($my_query->have_posts()) :$my_query->the_post(); $do_not_duplicate = $post->ID; ?>
<div class="featurepost" id="post-<?phpthe_ID(); ?>">
<h1><a href="<?php the_permalink()?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h1>
<div class="meta">Posted on <?phpthe_time('F jS, Y') ?> under <?php the_category(', ') ?> <?php if (function_exists('the_tags')) { ?><?php the_tags('', ', ', ''); ?><?php } ?></div>
<?php the_content ('Read the rest of this entry»'); ?>
<div class="meta">Published by <?phpthe_author() ?> // <?php comments_popup_link('Comment now »', '1 Comment »', '% Comments »', 'commentslink'); ?></div>
</div>
<?php endwhile; ?>
<?php if (have_posts()) : while (have_posts()) :the_post(); if( $post->ID == $do_not_duplicate ) continue;update_post_caches($posts); ?>
<div class="post" id="post-<?phpthe_ID(); ?>">
<h2><a href="<?php the_permalink()?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
<div class="meta">Posted on <?phpthe_time('F jS, Y') ?> under <?php the_category(', ') ?> <?php if (function_exists('the_tags')) { ?><?php the_tags('', ', ', ''); ?><?php } ?></div>
<?php the_excerpt ('Read the rest of this entry»'); ?>
<div class="meta">Published by <?phpthe_author() ?> // <?php comments_popup_link('Comment now »', '1 Comment »', '% Comments »', 'commentslink'); ?></div>
</div>
<?php endwhile; endif; ?>
<?php } else { // Do stuff specific to non-first page?>
<?php if (have_posts()) : while (have_posts()) :the_post(); if( $post->ID == $do_not_duplicate ) continue;update_post_caches($posts); ?>
<div class="post" id="post-<?phpthe_ID(); ?>">
<h2><a href="<?php the_permalink()?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
<div class="meta">Posted on <?phpthe_time('F jS, Y') ?> under <?php the_category(', ') ?> <?php if (function_exists('the_tags')) { ?><?php the_tags('', ', ', ''); ?><?php } ?></div>
<?php the_excerpt ('Read the rest of this entry»'); ?>
<div class="meta">Published by <?phpthe_author() ?> // <?php comments_popup_link('Comment now »', '1 Comment »', '% Comments »', 'commentslink'); ?></div>
</div>
<?php endwhile; endif; ?>
<?php } ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

In this example, this loop generates a post from the chosen category “Featured” and only one post is displayed, you can change this setting in line 3 (’category_name=Featured&showposts=1′) by changing the showposts=1 to the number of posts you want displayed. In line 10, the first loop terminates with the endwhile; tag.

The second loop starts in line 11 and ends in line 18, this loop generates regular posts in chronological order (with the exception of the featured post displayed earlier). We have now defined everything needed to create the loops for the home page (page 1), but we are only half way through.

At this point, most themes have the option for pagination or other functions built-in to navigate to previous posts. To define how those posts will be presented in paged pages (2, 3,.. and so on) we’ll add an “else” tag to close the “if” < 2 page tag (in line 19) and start our third and final loop code in line 20. Essentially the rest of the code is standard flair.

Also note that only the featured category will display full posts (line 07), the regular posts will only display excerpts (lines 15 and 24).

My content is best served chronologically. However I need to be able to make a subtle distinction between regular posts and featured posts. How can I do that?

The alternative to the aforementioned technique is to add some conditional tags and styling within the loop to separate posts based on its importance. An example of one such loop can be seen on this very site, note how the featured posts are presented in full length while the regular posts are shown as excerpts although the flow of posts are still chronological. The loop code (as included in the index.php) is as follows:

<?php get_header(); ?>
<?php while(have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<h1><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" rel="bookmark"><?php the_title();  ?></a></h1>
<div class="meta">Posted on <?php the_time('F jS, Y') ?> under <?php the_category(', ') ?> <?php if (function_exists('the_tags')) { ?><?php the_tags('', ', ', ''); ?><?php } ?></div>
<?php if (in_category(#)) : ?>
<?php the_content('Read the rest of this entry »'); ?>
<?php else : ?>
<?php the_excerpt ('Read the rest of this entry »'); ?>
<?php endif; ?>
<div class="meta">Published by <?php the_author() ?> // <?php comments_popup_link('Comment now »', '1 Comment »', '% Comments »', 'commentslink'); ?></div>
<?php endwhile; ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Asides anyone?

To add to this mix, popular sites like Photomatt and WLTC extensively use asides. We know it’s has not been adopted into magazine style themes yet, but it is potentially one the most useful hacks you can add to your theme. Just to keep things simple, we will use the loop we created earlier as an example code and add the asides.

<?php get_header(); ?>
<?php while(have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<?php if (in_category(#2)) : ?>
<div class="asides_entry">
<ul>
<li><?php echo wptexturize($post->post_content); ?> · <?php comments_popup_link('(0)', '(1)', '(%)'); ?></li>
</ul>
</div>
<?php else : ?>
<h1><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" rel="bookmark"><?php the_title();
?></a></h1>
<div class="meta">Posted on <?php the_time('F jS, Y') ?> under <?php the_category(', ') ?> <?php if (function_exists('the_tags')) { ?><?php the_tags('', ', ', ''); ?><?php } ?></div>
<?php if (in_category(#)) : ?>
<?php the_content('Read the rest of this entry »'); ?>
<?php else : ?>
<?php the_excerpt ('Read the rest of this entry »'); ?>
<?php endif; ?>
<div class="meta">Published by <?php the_author() ?> // <?php comments_popup_link('Comment now »', '1 Comment »', '% Comments »', 'commentslink'); ?></div>
<?php endif; ?>
<?php endwhile; ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Now for some styling

One more step and we are done. In order to style the various options, we will have to create and style the following divs and classes:

In the first example (featured and non-featured), define:

• .featurepost (to style featured posts)
• .post (to style regular posts)

The second example has only one distinctions between the featured and the non-featured post, that is the length of the posts (full and excerpt), so the styling will remain common for both.

The third example (asides), we need to define the following:

• .asides_entry
• .asides_entry ul
• .asides_entry ul li

What I did here was adopt a stylesheet by David Herreman with some personalization to style our demo theme; you can see it in action here or download the original CSS from David’s site if interested.

Next up, we will build cool tabbed interfaces for your sidebar using DOMtab, tabber and other free JavaScripts.

So there you have it. Happy hacking and share these ideas with all. Enjoy!