Every time I visit The New Yorker website, I go straight to the Fiction & Poetry category to read the latest story. There’s no scrolling the homepage. No exploring the most popular articles of the week. I’m what they call a "non-subscriber" so I can’t spare any of my six free article slots per month on non-fiction.
To ensure that visitors can just as easily and quickly find the content they want on your WordPress site, you might organize your posts into categories like The New Yorker website. Then, every time a viewer clicks on a link to one of the categories on your site, they’ll be taken to a page listing the posts from that particular category.
By default, most WordPress themes only come with one template for category pages. This is not ideal if you organize your content into multiple categories.
Imagine if The New Yorker’s category page for “Crosswords” looked the same as their page for “News,” which looked the same as their page for “Cartoons,” and so on. One template can’t suit every type of content -- some pages would either look worse or be more difficult to navigate than others.
That’s why The New Yorker uses custom templates for each category. The “News” page, for example, is a single-column layout. That way, visitors can clearly look at each articles’ featured image, title, dek, author, and date to decide which articles to read as they scroll down the page.
The “Crosswords” page, on the other hand, is a multi-column layout so that visitors are able to quickly skim by date to pick one they haven’t tried yet.
If you would like to change what a visitor sees when clicking on each of your site's category pages, then you can create custom templates or modify the page’s CSS stylesheet in your dashboard. Below we’ll discuss these two ways.
How to Style Different Categories in WordPress
You have two options for changing the style of individual category pages on your WordPress site. You can edit the theme files in your hosting account’s cPanel to create your own custom category pages, or you can add custom CSS to the Additional CSS module in your WordPress dashboard.
Since both of these methods involve coding, customizing category pages in WordPress is only recommended for users with some experience in web development. Users without coding skills might need to consult with or hire a developer.
Let’s start by walking through the steps to create custom templates in your hosting account’s cPanel.
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.
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.
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; ?>
For more display choices for your category pages, including whether to display complete posts or post excerpts, check out this documentation from the WordPress Codex.
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.
Right-click anywhere on the page and select “Inspect” from the drop-down menu.
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.”
Now say you wanted to change the color of the title on the “Uncategorized” page to red. Then you’d go to Appearance > Customize to launch the WordPress theme customizer interface. Click on the Additional CSS tab in your dashboard.
Copy and paste the following line of code:
.category-1 .l-titlebar-content h1 { color: #f00; }
Make sure to click the Save & Publish button when you’re finished.
There are other code snippets of CSS you can use to customize the background color, font size, and other properties of your category pages to create a unique site.
Taking Control Over Your Site’s Appearance
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.
