Would you like to categorize categories differently on WordPress?
Most WordPress themes use the same style for all category archive pages. However, if you have a content-rich website, you can choose to display each category differently 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 each category archive page. This is because the developers of WordPress themes don't know how you're 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.
WordPress also allows you to create models for individual categories. Suppose you want to classify the category "Apple Lossless Audio CODEC (ALAC),Differently. 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.
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.
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.
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.
Now you can add custom CSS code in WordPress. But, if you need a premium solution to get to add custom CSS code, we offer below 2 WordPress plugins premium that will help you in this task.
1. Easy Custom JS and CSS
Ce WordPress Plugin premium is a powerful CSS and JavaScript code editor that allows you to add them to any section of your website. It allows you to keep your customizations even after a major update to your WordPress theme.
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 can 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.
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.
- 8 WordPress plugins to add a translation system on a blog
- 5 WordPress plugins to create a calendar on a blog
- The guide in 4 steps to build your authority through your blog
- Some WordPress plugins to redirect
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.
...
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
Hello Miguel,
Please ask the question on an article regarding WooCommerce or Divi. And it is with pleasure that I will answer you. 😉