How to apply post styling per category in WordPress

article header image

If you want to apply different styling to posts per category, follow this simple tutorial!
The basis for this tutorial comes from an article on the wordpresshero.com website (unfortunately not online anymore), but I expanded it a bit as not everything is explained in detail, which is handy if you’re just starting out with WordPress. There are a few simple steps:

1. Copy the existing single.php file and rename it to single-default.php.

As an example, I’m assuming a website with 3 main category posts which you want to style separately: blog, photography and video.

2. Replace the content of the original single.php with the following code:

if ( in_category('2') ) {
include(TEMPLATEPATH . '/single-blog.php'); }
elseif ( in_category('15') ) {
include(TEMPLATEPATH . '/single-photography.php'); }
elseif ( in_category('18') ) {
include(TEMPLATEPATH . '/single-video.php'); }
else {
include(TEMPLATEPATH . '/single-default.php'); }
3. Create the following files by copying and renaming single-default.php: single-blog.php, single-photography.php and single-video.php.

4. Make sure each category you wish to style separately is identified by its ID in the code above. You can find this ID by going to the Categories overview in the WordPress manager, and hovering over each Category title. A URL will show up on the bottom of your browser. The last part is the ID number. See the screenshot below:

screenshot of post ID in wp-admin

5. Now you can add or remove any functionality you want per category and use different CSS styling for different looks! The remaining single-default.php will be applied to the categories not specifically mentioned in single.php.

You can create as many different types as you like. Do keep in mind though, that if you list a post in more than one category, WordPress will automatically apply the styling applied to the category with the lowest ID (which in this example would be blog, as its category ID is 2).


foto Boris Hoekmeijer
My name is Boris Hoekmeijer, I'm a webdesigner and graphic designer.
I sometimes run into a problem for which I have to find my own solution because Google just won't tell me. That's when I climb behind my mechanical keyboard, and fire away until a tutorial materializes. One of the great things about the web: we can all help each other!
If this article has helped you, or if you have anything to add or ask, please leave a comment or share the post.
Cheers!

© 2010 ★ Published: July 18, 2010
Leave your thoughts

Leave a Reply

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