Displaying one category differently from all others in the WordPress loop

One of the categories of my blog is “My Bookmarks.” This is where I add the contents of my del.icio.us bookmarks to my blog to share with others. However, since these are not really “posts” for the blog, I set them apart using a different style within the WordPress loop. This is a tutorial of how to set that up.

First, one must understand “The Loop.” Here is how WordPress defines The Loop:

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.

The Loop begins with the following code:

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

and ends with:

<?php endif; ?>

Everything in between is how WordPress displays your posts. There are certain tags and WordPress functions that can be used within the loop. We will be using the function in_category().

We will also need to know the ID of the category that will be displayed differently. This can easily be obtained by going to the WordPress admin and selecting Manage > Categories. Then find the ID in the leftmost column. My Bookmarks happens to be ID 13, so that will be used in the example.

I will assume that reader does not know php. If you do, this part will be rudimentary. In order to display Category My Bookmarks (13) differently from all others, we will use what is known as a conditional statement. This means if this is true, do this, otherwise do something else. This is done in php with the following:

<?php if (this condition is true) {

do this

} else {

do this

} ?>

Our condition is to know if we are in the category My Bookmarks and then display differently. Everything else is the same. Your primary display then is the “else” condition. Look at your theme’s index.php (or your theme might use home.php) and select everything between the following:

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

This is going to be the else condition
<?php endwhile; else: ?>

Make note of this. Just after line that begins the loop (if(have_posts())…), you are going to put in a new line to test for our condition of category My Bookmarks (13), change the number 13 to whatever the ID is of the category you are displaying differently:

<?php if (in_category(13)) { ?>

Now you may put whatever you like. As an example, I have displayed how mine is set up:

<div class=”delicious”>
<h4>From my bookmarks:</h4>
<?php the_content(__(‘Read more &raquo;’));?><div style=”clear:both;”>
<p class=”more”><a href=”/category/web/my-bookmarks/”>View my other bookmarks here.</a></p>

Notice I have defined a specific class to style this, and have added those CSS definitions to my stylesheet. I have eliminated various post details and the post title, choosing to display all with the title “From My Bookmarks” followed by the content of the post which is put out with the_content(). The last part provides a link to the category archive.

This will be followed by closing our condition of being in the category My Bookmarks and if that is not true, then all others would be displayed using the block we already have. So to close this condition, add the following:

<?php } else { ?>

This should go just before your existing output that we discussed earlier. Leave your original output intact and all other categories will be displayed using that. At the end of this we need to close our new conditional statement. Go to the following line:

<?php endwhile; else: ?>

And just before that put a new line to close our new conditional block:

<?php } ?>

That’s it! Now all of the posts in the category My Bookmarks (or whatever you choose) will display using a special style, and all others will use our themes “standard” style.


Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>