WordPress Quick Tip: Target specific tag or category archives with CSS

by

This quick tip requires a basic understanding of WordPress, CSS, and how to identify styles of whatever element you want to change (either using the “inspect element” function in Firefox, or whatever method you prefer).

So, example scenario, you have a blog on WordPress, lots of tags, a few categories. Now you want to change the background colour of your page title sections on the category/tag archive pages, depending on the category or tag (for example, the archive pages of the category “Design” have a green page title background, while the pages for the tag “CSS” have a blue one).

1. Identify the class/id of the element you want to change

Go to one of your archive pages for either a category or tag. In Firefox you can right-click on the element you want to target and choose “inspect element” which brings up the Inspector with your element highlighted, and the associated classes or ids. Find the correct class/id for the element you want to change. (on chrome it’s the same thing but the menu item is called “inspect”).

Let’s say the page title section has the class .page-title

2. Change the background colour value of that class/id

If you’re in the Inspector in Firefox, you can change it right there and see the change instantly (same with Chrome). Change the value until satisfied.

3. Copy your changed style to a txt for later use

In this case, it would be

.page-title {
    background-color: #ffffff;
}

4. Identify your specific category and tag classes.

Next we need to find the unique class of the category or tag archives you want to target. To find this, use “inspect element” anywhere on your archives page, doesn’t really matter where as we’re looking for the body section (you could also just view the source). In my case I’ll do it with my category archives of “SEO”.

I found this -> <body class=”archive category category-seo category-12…

It’s the category-seo class that we need. With tag archives it’ll say something like tag-seo.

5. Add that class to your css to target it

Next go back to the code you copied to a txt file and paste the following in front of it -> .category-yourcategory or .tag-yourtag

In this case it becomes

.category-seo .page-title {
    background-color: #ffffff;
}

6. Putting the new css code to work

Paste the new code either in your custom css theme options (if available), or in your styles.css via Appearance -> Editor (definitely use a child theme if you’re using the editor, as without it, you’ll lose your changes when you update your theme).

If it doesn’t work, try and make use of the !important declaration.

.category-seo .page-title {
    background-color: #ffffff !important;
}

That’s about it! If you’re having trouble getting it to work, feel free to send me a quick message.