Do you want to style categories differently in WordPress? Most WordPress themes use the same style for all category archive pages. However, if you run a content rich website, then you can style each category differently to maximize their potential. In this article, we will show you how to easily style categories differently in WordPress.

Why Style Categories Differently in WordPress?

As we said earlier, most WordPress themes use the same template for each category archive page. That’s because theme developers don’t know how you will be using the categories on your website and what those categories will be.

However, if you are running a content rich site, then changing the layout of a category archive page can have a dramatic impact on how users engage with the content on that page.

For example, if you run a news or magazine site, then you can have local ads displayed on the local news category. You can show weather information, show most popular stories in that category, and so on.

Having said that, let’s see how to easily style individual categories differently in WordPress.

Styling Individual Categories Differently in WordPress

There are multiple ways to style categories in WordPress. We will show you two different methods to style categories, and you can choose the one that best suits your needs and skill level.

Using Single Category Template in WordPress Theme

WordPress themes follow a standard template hierarchy. Depending on a template file name, WordPress can automatically pick the right template to display a page.

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

WordPress also allows you to create templates for individual categories as well. Let’s suppose you want to style the ‘Apple’ category differently. You can do that by adding a new template file to your theme and naming it category-apple.php.

Connect to your WordPress site using an FTP client and then go to /wp-content/themes/your-current-theme/ folder and create a new file category-apple.php. Don’t forget to replace apple with your own category name.

You can use your theme’s category.php file as a starting point. Simply edit and copy all of its content. Now edit your newly created category-apple.php file and paste the code inside it.

After that you can start making changes to your individual category template. You can create and use a different sidebar for this category, make it a full-width page, add a welcome message, or anything else you want.

Style Individual Categories in WordPress Using CSS

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

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

You can use this CSS class to style each individual category differently by adding custom CSS.

Here is some example 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 your own category name.

Google is on a quest to make online ads less obnoxious, which makes sense for a company that makes its living on web-based advertising. People hate videos that play automatically, glaring slogans, and ads that suck down bandwidth and slow down the browsing experience, and Google is serious about making a fix.

The company will be officially blocking some kinds of ads in its industry-dominating Chrome browser starting in 2018, and it’s already stopping ads that try to pop up in new tabs. Google is also taking steps to make its own ads less unruly, as ZDNet reports.

It’s doing all this by applying compression to its display ads using the Brotli compression algorithm. This specific compression scheme promises to reduce the size of Google’s ads by 15 percent compared to gzip compression, with a more than 40 percent reduction in some ads. While not every Google ad will enjoy this level of compression, Google says it’s applying Brotli compression “whenever possible.”

Google display ads have historically been heavy on browser resources

The benefits from putting its ads on a diet can be significant. As Michael Burns, a software engineer on Google’s Publisher Tagging and Ads Latency Team says: “[The use of compression] reduces the amount of data sent to end users by tens of thousands of gigabytes every day.” What that means for individual users is faster page loads, better overall performance, and, ultimately, lower battery consumption.

The Brotli compression algorithm is supported in the top web browsers today, including Chrome, Microsoft’s new Edge browser that’s featured in Windows 10, and Firefox. Only Apple’s Safari browser doesn’t support the new tool, which superseded the earlier Zopfli algorithm and provides up to 26 percent better compression.

In 2018, Google Chrome will start blocking any ads that don’t conform to the new Initial Better Ads Standards defined by the Coalition for Better Ads, including its own display ads. That means that users should gain a tremendous boost in their ability to enjoy the browsing experience without being subjected to the most obnoxious ads. In the meantime, Google will be working to make the ads that do show up just a little more efficient.