Hello, I'm Chris Murphy — I specialize in creating engaging, user-centric interactive experiences.

POSTED:
September 6, 2008
Comments: 16
Next Entry
Previous Entry

How To Style Your Most Recent WordPress Posting

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:

Posts are displayed as excerpts with a “read more” link.
Posts are displayed with the full body of the posting.
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):

if (have_posts()) :
   while (have_posts()) :
      the_post();
      the_content();
   endwhile;
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:

Use query_posts with counter and offset.
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:

<!-- set main-entry -->
<?php query_posts('showposts=1'); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="main-entry">
    <h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
    <?php //the post meta ?>
    <ul class="meta-top">
        <li><strong>Posted:</strong> <?php the_time('F j, Y'); ?></li>
        <li><strong>Author:</strong>  <?php the_author(); ?></li>
        <li><strong>Filed under:</strong> <?php the_category(','); ?></li>
        <li><?php if( get_the_tags() != NULL ) { the_tags('<strong>Tags:</strong> ',', '); }else{ echo "<strong>Tags:</strong> No tags set for this entry."; }?></li>
    </ul>
    <?php
        the_content('Read more...');
    ?>
</div>
<?php endwhile; endif; ?>
<!-- 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:

<!-- set past-entry -->
<?php query_posts('showposts=9&offset=1'); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="past-entry">
    <ul class="dateblock left">
        <li class="top"><?php the_time('M Y'); ?></li>
        <li class="bottom"><?php the_time('j'); ?></li>
    </ul>
    <div class="entry-content">
        <h1><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h1>
        <?php
            the_excerpt();
        ?>
    </div>
</div>
<?php endwhile; endif; ?>
<!-- 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.

<?php query_posts('showposts=9&offset=1'); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<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:

“main-entry”
“past-entry”

/* CSS Snippet */
#post-container div.main-entry {
    background-color: #CCCCCC;
    color: #000000;
    font-size: 1em;
}

#post-container div.past-entry {
    background-color: #ffffff;
    color:#333333;
    font-size: .92em;
}

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:

<?php
    if (have_posts()) {
        // the counter (initialized to 0 );
        $n = 0;
        // the while loop
        while (have_posts()) {
            // the CSS class to apply
            $class = ( $n == 0 ) ? "main-entry" : "past-entry";
?>
            <!-- set post -->
            <div class="<?php echo $class; ?>">
                <ul class="dateblock">
                    <li class="top"><?php the_time('M Y'); ?></li>
                    <li class="bottom"><?php the_time('j'); ?></li>
                </ul>
                <div class="entry-content">
                    <h1><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h1>
                    <?php
                        if( $n == 0 ) {
                            the_content();
                        }else {
                            the_excerpt();
                        }
                    ?>
                </div>
            </div>
            <!-- set post -->

<?php
            // incriment the counter
            $n .= 1;
        }

    }
?>

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

$n — this is the counter used to determine which which is the most recent (starting at “0″ — the first).
$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.

farfromfearless

Posted: September 6, 2008
Comments: (16)
Permalink
Follow This Post: RSS 2.0

farfromfearless on Twitter

[+]

Readership is built through quality content that provides value... anything less is just traffic. (via @nickf) 2010-05-10
Well put: RT @pmonks: Finally posted a new blog entry: The Case for Killing 'ECM': http://bit.ly/c08TUj #cms #ecm (via @IanTruscott) 2010-05-05
Good thing were down wind--none of the sparks are heading this way. Time to up the home insurance. 2010-05-05
New urbandale homes near my place are on fire--you can see the sparks and smoke from the bedroom... 2010-05-05
Christening the new grill--thanks #BroilMate !!! 2010-05-02
More updates...

POSTED:
16 people have left comments
Add a comment

Comments on This Post:

Dainis Grave…
Date: September 6, 2008
Time: 10:16 pm

Pretty useful for me. Thanks for sharing, I And yeah, I never heard that most recent posting is displayed different, maybe you think more than like featured posting?
Michael Sori…
Date: September 17, 2008
Time: 6:58 pm

This is exactly what I’m looking for. Even though bits and pieces of it can be found in WordPress Codex – it’s still not laid out and presented as well as you did. Good job.
David Graff
Date: September 24, 2008
Time: 5:57 am

Hi Chris, Thanks for putting this together. I am far from a designer and couldn’t really figure it out. All I wanted was to bold the first entry. Are there common pitfalls to watch for? This method ended up with all my posts side by side. If it helps anyone else out there, I found this to work well… http://adambrown.info/b/widgets/easy-php-tutorial-for-wordpress-users/first-post-different-from-the-rest/
TheFrosty
Date: October 2, 2008
Time: 4:33 pm

Awesome tutorial..
Understand W…
Date: October 28, 2008
Time: 9:53 pm

[...] http://www.farfromfearless.com/2008/09/06/how-to-style-your-most-recent-wordpress-posting/ [...]
yugom
Date: April 3, 2009
Time: 6:45 am

thanks
michael sori…
Date: June 2, 2009
Time: 10:33 pm

is the second part: “The Loop With Counter & Conditions” the technique you used to align your articles section in your home page?
dana
Date: October 14, 2009
Time: 3:49 pm

Thank you. After searching the internet for 10 hours and read many many many blog post. This one did the trick. All other blog posts mentioned how to get/display post and offset them and all these funky things — but no-one talks about styling.

For me, I already had the style — I just needed the functionality with it scraping my styles.

Thanks once again…I was just about to give up and found this post.
zinymegan
Date: November 24, 2009
Time: 12:30 am

Hey Guys,

I am a student (limited budget) and have seen a few offers for free ipods and iphones. Does anyone Know if any if the free IPhone or Ipod offers are actually legit? I don’t want to waste my time filling out a hundred surveys and was hoping to hear from someone who may have had some success with this.

Thanks
Simon
Date: March 7, 2010
Time: 10:21 pm

Really really useful – Despite digging through the WordPress Codex and vaguely knowing what I needed to do…this post told me exactly what I needed to do. Thanks a mil!
Chris Murphy
Date: March 7, 2010
Time: 10:34 pm

Glad you found it useful Simon!
Amber Lynn
Date: March 12, 2010
Time: 2:42 am

Hi !! I’m the new right here but i’m really curious in web development.
Would really adore to talk about thoughts on php development and improvement myself here.
Would like to learn about jake?
That I have come to find out is virtually a bridge between Cakephp and Joomla?
How can these really merge and provide impression to web development in php??
keskeldergo
Date: March 29, 2010
Time: 11:10 pm

Hi
I am a newbie here.
Glad to find this forum…as what I am looking for
Holentoker
Date: June 30, 2010
Time: 10:00 am

Please visit Online Fine Arts site
stoodadus
Date: August 16, 2010
Time: 9:18 am

Hi there ,
I am looking forward to participating in your forum.

See you soon
http://www.bermantravel-atlantis.com/
hurda
Date: August 20, 2010
Time: 7:38 am

I think type of site that is useful in sharing information and it is important to shar.Web proliferation of new developments in the field of design and entrepreneurial spirit of people who have very beautiful and pleasing to be professional.Site concept and sharing are quality thank you.