How To Style Your Most Recent WordPress Posting

• Posted: September 6, 2008
• |
• Author: Chris Murphy
• |
• Filed under: Developement, How To, Tutorial, WordPress, WordPress Themes
• |
• Tags: CSS, Techniques, WordPress Posts, WordPress Theme Design, XHTML

One question that I'm asked most often is: "how do I get my most recent post to look different than my older posts?", and second to that is, "how do I show alternate colors in my posts?"

How you choose to style your blog postings is largely dependent on the theme you’ve selected to use on your blog, your writing style, as well as — perhaps — your skill at modifying the themes.

For the most part, you may be stuck with using the setup that the Theme Designer decided to adopt.

Blogs typically take one of three common approaches to displaying posts:

1. Posts are displayed as excerpts with a “read more” link.
2. Posts are displayed with the full body of the posting.
3. Only one post is displayed with pagination available.

The first approach — the most common of the three — is likely a result of the Theme Designer choosing to use the out-of-the-box functionality of the blogging software (and to be fair, it is likely the most efficient); however, not everyone wants a cookie cutter solution to displaying their posts.

The reality is such that you don’t actually need to do a lot of work to get your blog postings to appear the way you want them to. I can’t speak for other blogging software packages, but when it comes to WordPress, there are a many techniques you can apply to customize your postings.

WordPress - The Loop

The meat-and-potatoes of WordPress is “The Loop“. If you’ve ever attempted to customize a WordPress theme, it’s likely you’ve encountered this The Loop (essentially a “while” loop). This is an example of a very simple loop (taken from the WordPress codex):

   1: if (have_posts()) :

   2:    while (have_posts()) :

   3:       the_post();

   4:       the_content();

   5:    endwhile;

   6: endif;

This is a better explanation if you’re not too familiar with code:

The Loop is used by WordPress to display each of your posts. Using The Loop, WordPress processes each of the posts to be displayed on the current page and formats them according to how they match specified criteria within The Loop tags.

If you examine one of the template files of your theme you may encounter a more complicated version of the above snippet.  The Loop is where we are going to start to customize the appearance of your postings.

Postings

A post in WordPress is comprised of a number of elements such as the Title of the post, the Content of the post, and assorted information like the Date/Time, etc. In the common approaches, all of the postings share the exact same format and display identical information.

Boring.

But it doesn’t have to be this way. The developers of WordPress were smart enough to realize that while the majority of theme designers don’t mind this type of homogenous approach, there are a few Theme Designers out there who prefer not to follow this pattern. As such, WordPress is built with with the ability to modify how The Loop is applied.

There are several approaches to modifying The Loop, but the two that I prefer are:

1. Use query_posts with counter and offset.
2. Use The Loop with counter and conditions.

The Loop With query_posts(…)

It took me a while to understand what this feature did; quite simply put, it adds additional parameters in the The Loop to instruct WordPress on what to output.

   1: <?php query_posts('showposts=1'); ?>

   2: <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

The snippet above was taken from one of my WordPress themes. In the theme, I use the above approach to display ONLY my most recent posting in full. Here’s a simplified version of the markup I use:

   1: <!-- set main-entry -->

   2: <?php query_posts('showposts=1'); ?>

   3: <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

   4: <div class="main-entry">

   5:     <h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>

   6:     <?php //the post meta ?>

   7:     <ul class="meta-top">

   8:         <li><strong>Posted:</strong> <?php the_time('F j, Y'); ?></li>

   9:         <li><strong>Author:</strong>  <?php the_author(); ?></li>

  10:         <li><strong>Filed under:</strong> <?php the_category(','); ?></li>

  11:         <li><?php if( get_the_tags() != NULL ) { the_tags('<strong>Tags:</strong> ',', '); }else{ echo "<strong>Tags:</strong> No tags set for this entry."; }?></li>

  12:     </ul>

  13:     <?php

  14:         the_content('Read more...');

  15:     ?>

  16: </div>

  17: <?php endwhile; endif; ?>

  18: <!-- end main-entry -->

In this example, The Loop is executed only once and only once. The query_posts() function passes instructions to The Loop to show only one post (using query_posts(’showposts=1′)). While The Loop is executed, it will output all of the post’s information that I’ve specified using the appropriate Post tags.

NOTE: I have set the container <div> class to “main-entry”. This references a rule in my CSS file that will style the output accordingly.

Unfortunately, you’re stuck with only one posting on your page. We need to display older postings as well, and ideally in a format that is different than the most recent.

As previously mentioned, The Loop was executed only once with the example above. This is a powerful feature of query_posts(), in that you have a tremendous amount of control over The Loop — in this case, how many times it is executed.

To render the older postings, you can do this:

   1: <!-- set past-entry -->

   2: <?php query_posts('showposts=9&offset=1'); ?>

   3: <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

   4: <div class="past-entry">

   5:     <ul class="dateblock left">

   6:         <li class="top"><?php the_time('M Y'); ?></li>

   7:         <li class="bottom"><?php the_time('j'); ?></li>

   8:     </ul>

   9:     <div class="entry-content">

  10:         <h1><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h1>

  11:         <?php

  12:             the_excerpt();

  13:         ?>

  14:     </div>

  15: </div>

  16: <?php endwhile; endif; ?>

  17: <!-- end past-entry -->

Aside from the simpler markup, the core difference between this second snippet and the first are the instructions/parameters in query_posts(), and the CSS class which is referenced.

   1: <?php query_posts('showposts=9&offset=1'); ?>

   2: <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

   3: <div class="past-entry">

If you combine both of the examples above, what you’ll find is that you’re actually running The Loop twice — in the first instance, The Loop only outputs the most recent post. In the second instance, it skips over the most recent  post completely, and outputs as many older posts as you defined in query_posts().

NOTE: if you examine the parameters in the second query_posts() instance, you should see “showposts=9&offset=1” — this will output 10 posts in total on your page, where 9 such posts are older.

Styling The Posts

What you need now are two CSS rules which define:

1. “main-entry”
2. “past-entry”

   1: /* CSS Snippet */

   2: #post-container div.main-entry {

   3:     background-color: #CCCCCC;

   4:     color: #000000;

   5:     font-size: 1em;

   6: }

   7:

   8: #post-container div.past-entry {

   9:     background-color: #ffffff;

  10:     color:#333333;

  11:     font-size: .92em;

  12: }

The XHTML markup does not have to be different between these posts, and as you can see in the CSS snippet above, you can get away with as little as displaying a different background color, font color or a larger font size.

The Caveat

Yes, there is a downside to using query_posts(). Programmatically speaking, you should try to optimize the number of queries you execute against your database. Since WordPress is largely database driven, you can expect a high volume of requests on any given page. Using query_posts() should be done sparingly (I limit it’s use to the homepage of my blog).

Also, if you are wanting to support pagination, you will need to do a little more work to setup the query properly — you can read more about it here.

The Loop With Counter & Conditions

The simplest method to determine and style your most recent post in contrast to your older postings is a pure implementation of “The Loop”. This implementation also relies on using a counter to keep track of how many posts you’re outputting (as determined by your WordPress settings), as well as a condition to determine which class to reference when styling the output.

Here is an example of this in action:

   1: <?php

   2:     if (have_posts()) {

   3:         // the counter (initialized to 0 );

   4:         $n = 0;

   5:         // the while loop

   6:         while (have_posts()) {

   7:             // the CSS class to apply

   8:             $class = ( $n == 0 ) ? "main-entry" : "past-entry";

   9: ?>

  10:             <!-- set post -->

  11:             <div class="<?php echo $class; ?>">

  12:                 <ul class="dateblock">

  13:                     <li class="top"><?php the_time('M Y'); ?></li>

  14:                     <li class="bottom"><?php the_time('j'); ?></li>

  15:                 </ul>

  16:                 <div class="entry-content">

  17:                     <h1><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h1>

  18:                     <?php

  19:                         if( $n == 0 ) {

  20:                             the_content();

  21:                         }else {

  22:                             the_excerpt();

  23:                         }

  24:                     ?>

  25:                 </div>

  26:             </div>

  27:             <!-- set post -->

  28:

  29: <?php

  30:             // incriment the counter

  31:             $n .= 1;

  32:         }

  33:

  34:     }

  35: ?>

As you can see from the example above, we’ve taken a basic instance of The Loop and added in two variables:

1. $n — this is the counter used to determine which which is the most recent (starting at “0″ — the first).
2. $class — this is the CSS class that we want to reference (”main-entry” or “past-entry”).

The method and approach to styling the post is the same as the examples in query_posts(). The XHTML markup can be re-used between new and older postings, but this is not required. With a little work you can supply The Loop with two different sets of markup to render.

The Caveat

While this implementation is rather straight forward, it can get complicated quickly if you want to include more and more variations between postings. Each variation requires a little more forethought, and the appropriate conditions to determine what to do and what to render. What you may end up with is a lot of messy markup that is difficult to read.

Conclusion

It doesn’t take a lot of work to modify your WordPress template to render your most recent posting in a unique fashion. In some cases, you can download plugins to help you style your postings; for me, having to rely on additional plugins seems more overhead than is necessary. The techniques outlined in this article are only two of many such approaches (and certainly a manual approach).

Don’t feel as if you have to select one over the other. In fact, your writing style and your choice of template play a large part in determining which method is most appropriate.

• (14) Comments
• Permalink
• RSS 2.0
•