WordPress Style Category Page

WordPress is super easy for the most essential task,s but there are some things that are still reserved for those that dare to find a way. Applying a style to a whole website is one thing but, what happens when you need to apply a specific style to a specific page or category? While WordPress will allow you to do that, it’s not easy nor user-friendly. What is most shocking is that while there are plugins for styling pages, there are none that allows you to easily target a specific post based on the category.

This type of customization is very necessary if you happen to have a magazine where there are different sections styled with different colors. You may find options to style categories with colors, but you won’t find options to style specific posts based on its category

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

Creating a template for individual category in your WordPress theme

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 Custom Templates

If you’d like to create a totally unique view for any category on your site, then you can create file templates for specific categories.

First, you’ll need to log in to your hosting account. Then click File Manager under the Files section of your cPanel.

Now click on the public_html folder on the lefthand side of your screen. Click on the wp-includes folder and locate the categories.php file. (In some themes, this file will be called archives.php.) Right-click to edit it.

WordPress user right clicks category.php file to edit it

Copy the contents of the category.php file. Now navigate to your wp-content folder. Click the folder labeled “themes.” Then click the folder with the name of your theme.

In this folder, create a new category template file and label it category-categoryname.php, replacing “categoryname” with the category you would like to style.

WordPress user creating a new category template file labeled "category-mycategory.php"

Source

Right-click to edit this new file and paste the contents from the categories.php file.

You can now make changes to this template that will only appear in the specific category slug. You can include an overview at the top of the page, add a sidebar, change the color scheme, or virtually anything else you want by entering different PHP commands.

For example, if you’d like to include some text that introduces the posts in the category, insert the following code in the category-categoryname.php file:

 
 
   <p>
This is some text that will display at the top of the Category page.
</p>
 

You’ll want to insert this snippet above The Loop section of your template file. The Loop is PHP code used by WordPress to display posts. It can be found in your theme’s index.php and in any other Templates used to display post information. The Loop may look different in these folders — sometimes it will contain dozens of lines of code, and sometimes only a few. The basic Loop looks like:

 
 
   <?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<!-- do stuff ... -->
<?php endwhile; ?>
<?php endif; ?>



You can repeat these steps to create as many custom category templates on your site as you want.

Style Individual Categories in WordPress Using CSS

Before creating dozens of templates, you’ll want to consider whether the changes you want to make to each category page require you to create a whole new template. If you’d like to only make one or two small changes, like changing the color of the post titles on the category page, then you could add conditional tags in the Additional CSS module in your WordPress dashboard.

To begin, you’ll need to find out the ID of the categories you want to style. You’ll then use this ID to reference individual category pages in your CSS declarations.

To find out the category ID, you can inspect the category page in your WordPress dashboard. After logging in to your dashboard, navigate to Posts > Categories. Then hover over the category you want to style and click “View.” In the screenshot below, I’ll inspect the “Uncategorized” category.

WordPress user hovering over "Uncategorized" category to view and inspect its HTML output and CSS stylesheet

Right-click anywhere on the page and select “Inspect” from the drop-down menu.

WordPress user clicking "Inspect" on category page in dashboard to view its output HTML and CSS stylesheet

A new window will open that shows the output HTML and CSS stylesheet. It’s okay if you don’t understand everything on the page. Just look for the category-categoryname CSS class that contains the category ID in the body tag (which begins <body class= ). As you can see in the screenshot below, the category ID of the “Uncategorized” category is “1.”

WordPress user viewing body tag of "uncategorized" category page to find its category ID

Now say you wanted to change the color of the title on the “Uncategorized” page to read. Then you’d go to Appearance > Customize to launch the WordPress theme customizer interface. Click on the Additional CSS tab in your dashboard.

Conclusion

Following either of the methods above you can customize the category pages on your WordPress site so that each touchpoint a visitor has on your site is unique. It might seem like a small change, but it can have a big impact on how users view your website — and, by extension, your company.

0 Comments

No Comment.