How to Style Individual Categories in WordPress?

To maintain a unique display between the home page and other sections of the website, many website owners decide to make some changes in the styling of Category pages.

Although most of the default free WordPress themes offer single display option for the home page as well as category pages, it is possible to make structural changes to the theme to display differently curated Categories on each page of the website. You can change either the color scheme or completely modify the style of every section, depending upon your requirement.

If you have a big content rich website, you may want to add some attractive features to the site by changing the color, content or style of each category. This will not only enhance the dramatic potential of the website, but it will save your site from being monotonous and encourage visitors to engage with the content.

How Can You Change the Style of Individual Categories?

If you are trying to build a new website, first you will have to either buy a theme or make a theme for your site. However, if you already have a theme or a running site, you will have to go to your primary theme’s stylesheet and create a child theme. Then, you will have to edit the stylesheet inside your child theme.

If you have an active and running website, with numerous posts, download WordPress theme test data and after activating your child theme, import it to the WordPress Install.

You can download the theme test data here.

How to Create a Child Theme?

If you know how to build a child theme, you can skip this section. To create a fresh child theme follow the below-mentioned code. Here we are editing Twenty Fifteen theme. You can use the same with any other theme, but do not forget to change the theme name in your code.

1. Go to your site’s theme folder (wp-content/themes), create a new folder and give it a name. For example, mytheme-style-posts-by-category.

2. Create a CSS stylesheet or CSS file, to begin with, your coding. This sheet is known as “style.css”.

3. In this file, start typing the following code:

Don’t forget to replace Author and Author URL with your details.

The code mentioned above give WordPress all the details it should know about your child theme. This will also import the stylesheet from the central theme. For example, in this scenario, it will import the stylesheet from Twenty Fifteen.

The next step is to activate your theme!

Import Your Data

Do you remember downloading the WordPress theme test data before creating the child theme? It is time to import the unit test data in your website. This is how you can import the test data:

  • Import test data into your WordPress install by going to Tools => Import => WordPress
  • Select the XML file from your computer
  • Click on “Upload file and import”.
  • Under “Import Attachments,” check the “Download and import file attachments” box and click submit.

How to Recognize Styles to Target?

Individual template tags modify the output class for your site pages and your posts. Here is the list of template tags that you would require to build the classes of your posts and pages.

1. To add class to the body component, as per the page type to be viewed, body_class(), is added to the body tag in your selected theme’s header.php file.

2. When you are explicitly working to design your posts post_class() is used.

These tags are helpful when you are making changes or working with your primary theme. However, if you are working with a child theme, these tags will already be there by default. Therefore, there is no need to add these tags manually.

In your browser, if you navigate to site’s category pages and employ the developer tools to understand how the HTML output looks, you will come to know that the body_class() template add has additionally created many subclasses to your page.

<body class=”archive category category-markup category-29 logged-in admin-bar no-customize-support”>

The body tag has classes, and these classes tell us which is a category archive page. For further styling, we are going to work on is the category-markup class.

How to Style the Archive Listing Post Titles?

To add different colors to the post titles, according to specific categorisation, this is the code you need to follow:

Here I have mentioned the color codes according to my choice; you can change them as per your preference. The list of all available color codes is available here.

Do not forget to save your stylesheet before you preview the changes. To Change Border Style, Add Padding above post titles and to change the border colour, Add this to your stylesheet:

.archive.category-markup .entry-title {
padding-top: 0.5em;
border-top: 2px #6cd2c8 solid;
}
.archive.category-template-2 .entry-title {
padding-top: 0.5em;
border-top: 2px #e5572f solid;
}
.archive.category-media-2 .entry-title {
padding-top: 0.5em;
border-top: 2px #933bbe solid;
}

How to Style the Archive Title?

In addition to designing each post listings, if you want to stylise archive title, first identify the classes and components to target, with the help of developer tools.

Target the page-header and page-title classes. You will also need to make changes in the body template tag for the archive.

To add colour to the archive title, add the following code to your stylesheet:

.archive.category-markup .page-header .page-title {
color: #6cd2c8;
}
.archive.category-template-2 .page-header .page-title {
color: #e5572f;
}
.archive.category-media-2 .page-header .page-title {
color: #933bbe;
}

With the below-mentioned code, you can match the border colour to the post.

.archive.category-markup .page-header {
border-left: 7px solid #6cd2c8;
}
.archive.category-template-2 .page-header {
border-left: 7px solid #e5572f;
}
.archive.category-media-2 .page-header {
border-left: 7px solid #933bbe;
}

You can even take this further by using the section colours with other elements like background, footer and layout. You can also add images to your background by editing the stylesheet accordingly. You can even take this method to the level, where your visitor will be amazed to see one website, as multiple sites under one URL.

How to Style Individual Categories in WordPress?
5 (100%) 1 vote

Know Everything About WordPress
Best Products in Your Inbox

Subscribe to our mailing list and we will surprise you with amazing WordPress freebies

Jupitar Theme

Know Everything About WordPress
Best Products in Your Inbox

Subscribe to our mailing list and we will surprise you with amazing WordPress freebies