Making your new posts stands out with a custom style

Creating a Featured Posts block, as we have seen earlier, allows you to specify some posts to be displayed on your blog as the featured posts. However, you may prefer to automatically make your latest posts stand out. In this recipe, we shall learn to modify the classic WordPress loop to give another style to your latest posts.

If you're just getting started or vour web site doesn't take up too much traffic just yet, then a shared webhost may be all you need.

The only problem is, not all shared hosting is created the same.

The Problems With Shared Hosting

You may think about a shared hosting server like a big house. Every customer who purchases an account gets access to some space inside the house but everyone has to share the dining room, kitchen and even washroom.

You may think about a shared hosting server like a big house. Every customer who purchases an account gets access to some space inside the house but everyone has to share the dining room, kitchen and even washroom.

Add Google-Style Page Design Review: yamidoo

Navigation to your Category Magazine and Search Pages

Add Google-Style Page Design Review: yamidoo

Navigation to your Category Magazine and Search Pages

Getting ready

Similar to the previous recipe, you only need a text editor, a WordPress theme, and—of course—this book to achieve the hack. This recipe is based on the WordPress default theme, but can be adapted on any other theme as well.

How to do it

1. Open the index.php file from your theme and look for the WordPress loop. In the WordPress default theme, the WordPress loop is located on line 5 and looks similar to the following code:

<?php while (have_posts()) : the_post(); ?> <div class="post" id="post-<?php the_ID(); ?>">

<h2><a href="<?php the_permalink() ?>" rel="bookmark"

title="Permanent Link to <?php the_title_attribute(); ?>">

<small><?php the_time('F jS, Y') ?><!-- by

<div class="entry">

<?php the_content('Read the rest of this entry &raquo;'); ?>

<p class="postmetadata"><?php the_tags('Tags: '<br />');

?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', ' | '); ?>

<?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p> </div>

2. Replace that loop with the following code and save the file. You can edit the number of posts that will be marked as "featured" on line 4. As the earlier code displays only one featured post, let us use the following code.

<div class="featured post" id="post-<?php the_ID(); ?>"> <h2><a href="<?php the_permalink() ?>">New Post: <?php the_title(); ?></a></h2>

<small>Posted in <?php the_category(', ') ?> on <?php the_time('F jS, Y') ?>.</small> <div class="entry">

<?php the_content('Read the rest of this entry &raquo;'); ?>

<div class="post" id="post-<?php the_ID(); ?>"> <h2><a href="<?php the_permalink() ?>"> <?php the_title(); ?></a></h2>

<small><?php the_time('F jS, Y') ?></small> <div class="entry">

<?php the_content('Read the rest of this entry &raquo;'); ?>

<p class="postmetadata"><?php the_tags('Tags: '

<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', ' | '); ?>

<?php comments_popup_link('No Comments &#187;', '1 Comment &#18 7;', '% Comments &#187;'); ?></p>

3. Now, edit the style.css file from your theme. The preceding code creates and adds a "featured" class to your latest posts—with the help of the "featured" class you can modify the post displays. Add the following code to the style.css file and style it your way:

post.featured {

background:#f9f9f9; font-weight:bold;

How it works

At the beginning of the code, and before the loop, I have created a PHP variable named $count and initialized at the value 0. This variable is a counter—on each iteration through the loop, the code changes its value to its current value + 1.

On line 4 of the earlier code, I test whether the $count value is smaller than 2. If yes, a post with the "featured" style is displayed, otherwise the posts are displayed in normal style.

The PHP counters are very useful and can be used to achieve various tasks. For example, the following code, similar to our previous code will display some AdSense ads after the first post:

<?php while (have_posts()) : the_post(); ?> <?php $count++; ?>

<div class="post" id="post-<?php the_ID(); ?>"> <h2><a href="<?php the_permalink() ?>"> <?php the_title(); ?></a></h2> <small><?php the_time('F jS, Y') ?></small> <div class="entry">

<?php the_content('Read the rest of this entry &raquo;'); ?> </div>

<p class="postmetadata"><?php the_tags('Tags: '<br />');

?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', ' | '); ?>

<?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>

<!-- INSERT ADSENSE CODE HERE --> <?php endif; ?> </div>

<?php endwhile; ?> That's it! Your latest posts are now displayed with a custom style.

In this chapter, you have learned how to modify and enhance a WordPress theme to definitely make your blog different.

Instant Ways To Monetize Your Blog

Instant Ways To Monetize Your Blog

Get Paid For What You’re Worth. Benefit From Your Talent. Get Your Due Credit. Provide Your Skills A Platform To Shine. Enhance Your Opportunities. Learn how to monetize your blog and reap the rewards of your skills.

Get My Free Ebook


Post a comment