Custom Category Style in WordPress
When I worked for an online newspaper, we put a customized header image at the top of every category page sort of like how NYTimes does it for their blog pages. These days, it’s a lot more attractive to use custom CSS styles for each category. In this tutorial, we’ll create a custom category style in WordPress so you can add your own CSS to pages belonging to a specific category.
In truth, there are two ways to do this. The first way is to create a custom category page for each category you want to stylize and add custom CSS to each of them (or a call to a custom CSS file). The faster, easier way* *involves editing just one file and customizing the CSS of whatever category you want to stylize there.
We’re going to do the second way.
Step 1: Edit header.php. #
Go to Appearance->Editor and open your header.php file.
Find the </head> tag and, just above it, copy and paste the following:
<?php if (is_category("Horses")) {
<style type="text/css">
/*BEGIN CUSTOM CSS*/
h1 { color: #FF0000; } /* make the headers red */
/*END CUSTOM CSS*/
</style>
<?php } ?>
Don’t forget to change “Horses” to the category name that you want to have custom CSS for, and to do something besides change your headers to red (unless that is exactly why you are reading this tutorial).