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.

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.

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 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. 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 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.

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.

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.

...