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

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:

1. <?php get_header(); ?>
2. <?php if ( $paged < 2 ) { // Do stuff specific to firstpage?>
3. <?php $my_query = newWP_Query(’category_name=Featured&showposts=1′); while ($my_query->have_posts()) :$my_query->the_post(); $do_not_duplicate = $post->ID; ?>
4. <div class=”featurepost” id=”post-<?phpthe_ID(); ?>”>
5. <h1><a href=”<?php the_permalink()?>” rel=”bookmark” title=”Permanent Link to <?php the_title(); ?>”><?php the_title(); ?></a></h1>
6. <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>
7. <?php the_content (’Read the rest of this entry»’); ?>
8. <div class=”meta”>Published by <?phpthe_author() ?> // <?php comments_popup_link(’Comment now »’, ‘1 Comment »’, ‘% Comments »’, ‘commentslink’); ?></div>
9. </div>
10. <?php endwhile; ?>
11. <?php if (have_posts()) : while (have_posts()) :the_post(); if( $post->ID == $do_not_duplicate ) continue;update_post_caches($posts); ?>
12. <div class=”post” id=”post-<?phpthe_ID(); ?>”>
13. <h2><a href=”<?php the_permalink()?>” rel=”bookmark” title=”Permanent Link to <?php the_title(); ?>”><?php the_title(); ?></a></h2>
14. <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>
15. <?php the_excerpt (’Read the rest of this entry»’); ?>
16. <div class=”meta”>Published by <?phpthe_author() ?> // <?php comments_popup_link(’Comment now »’, ‘1 Comment »’, ‘% Comments »’, ‘commentslink’); ?></div>
17. </div>
18. <?php endwhile; endif; ?>
19. <?php } else { // Do stuff specific to non-first page?>
20. <?php if (have_posts()) : while (have_posts()) :the_post(); if( $post->ID == $do_not_duplicate ) continue;update_post_caches($posts); ?>
21. <div class=”post” id=”post-<?phpthe_ID(); ?>”>
22. <h2><a href=”<?php the_permalink()?>” rel=”bookmark” title=”Permanent Link to <?php the_title(); ?>”><?php the_title(); ?></a></h2>
23. <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>
24. <?php the_excerpt (’Read the rest of this entry»’); ?>
25. <div class=”meta”>Published by <?phpthe_author() ?> // <?php comments_popup_link(’Comment now »’, ‘1 Comment »’, ‘% Comments »’, ‘commentslink’); ?></div>
26. </div>
27. <?php endwhile; endif; ?>
28. <?php } ?>
29. <?php get_sidebar(); ?>
30. <?php get_footer(); ?>

You can download a copy of this file in text format, it’s better than copying it from this post. With no style applied, this loop in conjunction with your exiting header.php, sidebar.php and footer.php will look something like this. Note how we included in line 2 a simple “if” tag to control the pagination aspect and to prevent the featured post from repeating on the top of each paginated page. By setting the conditional tag to $paged < 2, we are essentially restricting the featured post from appearing from paginated pages 2 and greater, in other words, the post will appear only in page 1.

01.11.2008 - 1:31 pm - Design, How to, Resources, Techniques, Tips - 1,549 views -