HeadsetOptions Web Design, SEO, WordPress, Etcetra

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

Since content is the most important part of a site, your WordPress powered theme must emphasis on its presentation. Most cookie cutter themes come with a post list that runs based on the time your posts were published, in other words a chronological list of posts irrespective of its importance. Let’s face it, not all posts are created equal. Some posts are special, some are important and then some not quite so. Why then should all posts get the same treatment?

Magazine styled themes do a fine job of addressing this by introducing the featured posts option. Posts of a certain category got “top of the page” real-estate, which helps the site highlight the more important content. 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.

So 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.

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

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

1. <?php get_header(); ?>
2. <?php while(have_posts()) : the_post(); ?>
3. <div class=”post” id=”post-<?php the_ID(); ?>”>
4. <h1><a href=”<?php the_permalink(); ?>” title=”<?php the_title(); ?>” rel=”bookmark”><?php the_title();
   ?></a></h1>
5. <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>
6. <?php the_content(‘Read the rest of this entry »’); ?>
7. <div class=”meta”>Published by <?php the_author() ?> // <?php comments_popup_link(‘Comment now »’, ’1 Comment »’, ‘% Comments »’, ‘commentslink’); ?></div>
8. <?php endwhile; ?>
9. <?php get_sidebar(); ?>
10. <?php get_footer(); ?>

The loop can be found within the index.php file (in 99 percent of the themes - K2 based themes have a file called theloop.php specifically for the loop code)

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, which is presented differently from the rest of the posts. 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 (page 1).

Without going into the details, we’ll dive right into the index.php file, explanation is proved below the 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.

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:

1. <?php get_header(); ?>
2. <?php while(have_posts()) : the_post(); ?>
3. <div class=”post” id=”post-<?php the_ID(); ?>”>
4. <h1><a href=”<?php the_permalink(); ?>” title=”<?php the_title(); ?>” rel=”bookmark”><?php the_title(); ?></a></h1>
5. <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>
6. <?php if (in_category(#)) : ?>
7. <?php the_content(‘Read the rest of this entry »’); ?>
8. <?php else : ?>
9. <?php the_excerpt (‘Read the rest of this entry »’); ?>
10. <?php endif; ?>
11. <div class=”meta”>Published by <?php the_author() ?> // <?php comments_popup_link(‘Comment now »’, ’1 Comment »’, ‘% Comments »’, ‘commentslink’); ?></div>
12. <?php endwhile; ?>
13. <?php get_sidebar(); ?>
14. <?php get_footer(); ?>

Again, you could download a copy of this file in text format or view the demo. Note in line 6, the # sign in (in_category(#)) must be replaced by the category number of the post you want to make the “featured” category.

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.

1. <?php get_header(); ?>
2. <?php while(have_posts()) : the_post(); ?>
3. <div class=”post” id=”post-<?php the_ID(); ?>”>
4. <?php if (in_category(#2)) : ?>
5. <div class=”asides_entry”>
6. <ul>
7. <li><?php echo wptexturize($post->post_content); ?> · <?php comments_popup_link(‘(0)’, ‘(1)’, ‘(%)’); ?></li>
8. </ul>
9. </div>
10. <?php else : ?>
11. <h1><a href=”<?php the_permalink(); ?>” title=”<?php the_title(); ?>” rel=”bookmark”><?php the_title();
    ?></a></h1>
12. <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>
13. <?php if (in_category(#)) : ?>
14. <?php the_content(‘Read the rest of this entry »’); ?>
15. <?php else : ?>
16. <?php the_excerpt (‘Read the rest of this entry »’); ?>
17. <?php endif; ?>
18. <div class=”meta”>Published by <?php the_author() ?> // <?php comments_popup_link(‘Comment now »’, ’1 Comment »’, ‘% Comments »’, ‘commentslink’); ?></div>
19. <?php endif; ?>
20. <?php endwhile; ?>
21. <?php get_sidebar(); ?>
22. <?php get_footer(); ?>

The addition of lines 4 though 10 and line 19 will make posts in a chosen asides category display within a unordered list. You could download a copy of this file in text format or view the demo, note that posts 2 and 3 in our demo are listed within a bulleted list with no heading. We use headings on this site, but most asides do not display any headings.

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!

References: Codex, David Herreman, MandarinMusing, Solostream, wpSnap and a whole bunch of premium theme demo’s