Skip to Main Content

How to give a unique style to different categories on WordPress

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 901.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

Would you like to categorize categories differently on WordPress?

Most WordPress themes use the same styling for all category archive pages. However, if you have a content rich website, you can choose to display each category in a different way to maximize their potential.

In this tutorial, we will show you how to display categories differently on your WordPress blog.

Without further ado, we invite you to discover our list. But first, if you've never installed WordPress, find out How to Install a WordPress Blog in 7 Steps et How to search, install and activate a WordPress theme on your blog 

Then back to why we are here.

Why give a different style to categories on WordPress

As we said earlier, most WordPress themes use the same template for every category archive page. This is because WordPress theme developers don't know how you are going to use categories on your website.

Read also: How to display content only to RSS subscribers on WordPress

However, if you have a content-rich website, changing the layout of an archive page category can have a dramatic impact on how users engage with the content on that page.

For example, if you manage a news or magazine website, you can display local announcements in the local news category. You can view weather information, view the most popular stories in this category, and so on.

That said, let's see how to easily customize individual categories on WordPress.

How to give a style to categories

There are several ways to categorize categories on WordPress. We'll show you two different methods to give the categories a different style, and you can choose the ones that best fit your needs and skill level.

Using a single category template on a WordPress theme

WordPress themes follow a standard template hierarchy. According to a template file name, WordPress can automatically choose the right template to display a page.

For example, it looks for the category.php file to display category archive pages.

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

WordPress also allows you to create models for individual categories. Suppose you want to classify the category "AppleDifferently. You can do this by adding a new template file to your WordPress theme and naming it category-apple.php.

Connect to your WordPress website using an FTP client, then navigate to / Wp-content / themes / your-theme / and create a new file named category-apple.php. Remember to replace "Apple" with the name of your category.

Add a new wordpress category

You can use the file " category.php Of your WordPress theme as a starting point. Just edit and copy all of its content. Now rename your new file to " category-apple.php And paste the code inside.

Then you can start making changes to your individual category model. You can create and use a different sidebar for this category, make it a full width page, add a welcome message or whatever you want.

Give a style to categories using CSS code

WordPress automatically adds CSS classes to different elements on your website. These include both the body class and the publication class.

For example, if you view a category archive page and then use the Inspect tool, you will notice the CSS classes "categories" and the name of the category in the "body" tag.

Body wordpress category tag

You can use this CSS class for each different individual category by adding custom CSS.

Here's an example of CSS that you can use as a starting point.

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

Body.category-apple {background-color: #EEE; Background: url ("http://example.com/wp-content/uploads/2017/background.jpg") no-repeat fixed; color: #FFFFFF; } .category-apple .site {background: #232323; } .category-apple a {color: #CCCCCC; }

Don't forget to change the category name in the CSS class with the name of your category.

Editing a wordpress css code category

Now you can add custom CSS code to WordPress. But, if you need a premium solution to get to add a custom CSS code, we offer below 2 premium WordPress plugins that will help you in this task.

1. Easy Custom JS and CSS 

This premium WordPress plugin is a powerful CSS and Javascript code editor that allows you to add these to any section of your website. It allows you to keep your customizations even after a major update to your WordPress theme. Easy custom js and css extra customization wordpress plugin

You have the option of limiting the field of use of your personalized code. For example, you can use your code only for an article in the video format.

See our articles on How to require acceptance of the terms of use on WordPress

Or you can limit your code to a specific WordPress theme; Which is handy if you are currently changing themes for your WordPress blog.

Download | Demo | Web hosting

2. Custom JavaScript & CSS in Pages!

Thanks to this WordPress plugin, you have the possibility to add CSS styles and custom JavaScript on specific pages. It also allows you to define rules for multiple pages. This way, you can have predefined or unique styles for specific sections.

Custom javascript css in pages wordpress plugin e1558356028853

Like any other feature offered by this WordPress plugin, you can easily include different scripts on different pages of your website.

Download | Demo | Web hosting

Recommended Resources

Find out about other recommended resources to help you build and manage your website.

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]

Conclusion

Here ! That's it for this tutorial, I hope it will allow you to add custom CSS code on WordPress. Feel free to share this article with your friends on your favorite social networks

However, you will also be able to consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation.

If you have suggestions or remarks, leave them in our section Comments.

...  

This article features 2 comments

  1. Hello!
    Please see if you can help me cause I'm smoking my head
    I'm doing an online store with divi and woocommerce and I'm having a problem because I can't customize the category page.
    I pass the link for you to see:
    https://chachocarp.com/product-category/los-mas-vendidos
    What I want to change is:
    1. I have 24 products in this category and instead of showing it on two pages of 12 products it shows them on three pages of 9, 9 and 6 and it is fatally clear.
    2. I did not keep the hover configuration when I hover over the products. I would like the transparency to be blue and the letters "view product to be naranaja" like in the store module of the main page.
    3. I would like the left sidebar to show all categories and subcategories.
    How did he do it?
    thank you for your help

    1. Hello Miguel,

      Please ask the question on an article regarding WooCommerce or Divi. And it is with pleasure that I will answer you. 😉

Leave a comment

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

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top
7 shares
Share4
tweet1
Save2