Design has always been one of the most important aspect of UI. A good user interface will lead to more visitors to your site and eventually more revenue for you.

There are millions of live websites today and you have to make your site is unique enough to stand apart from your competitors.

How Popular Is WordPress

There are many ways you can build your website but the platform you choose for your website can be a major factor in determining how much customization you can make. There are many platforms you can choose from but wordpress is one of the most popular CMS in the world because of its simplicity and ability to customize. WordPress may not be as simple as Wix or Squarespace to use but its customization power makes it so popular.

What Is The Problem Of Being So Popular?

WordPress has a huge community(very helpful one) and you could find solutions to any problem you may come across during your wordpress journey. The community is filled with information and resources, one of the main resources is wordpress themes. You can find thousands of free themes in wordpess.org library and the numbers are growing every day.

WordPress being as popular as it is there is a problem with so much popularity in a different way, since one theme can be used many times across different websites, sites using that particular theme will look somewhat similar. So your site may lack uniqueness if you just use the theme as it is.

Why Would You Want To Style Categories Differently?

Generally in a blog or a content rich site different topics are divided into different categories. This is the page where a visitor can get all the information of a certain topic and that gives you a chance to present categories in a unique way to provide them a great experience.

So styling each categories differently can give you an edge over your competitors even if they are using the same theme.

Difference can be as simple as different colors for each categories to different layouts.

Let’s see how you can do this.

Ways To Style Categories

Apart from free themes you can purchase premium themes from different marketplaces. Generally these themes are loaded with custom features but even then most of them won’t give you the options to style your categories differently.

Because one theme can be utilized differently from one website to another so theme author doesn’t know how you are going to use the theme.

So you should know how to style categories differently, there are two ways you can do this.

• With templates
• With CSS

Now let’s see each one with different use cases.

With Templates

If you are looking to make a structural change in the layout you have to use templates. Whether it will have sidebar or it will be full width page with templates you can control the layout of your page.

Must Work On Child Theme

One prerequisite for using templates is that you must use child themes. It’s not that it will not work in main theme but the problem of modifying the main theme is you can’t control the files there, once the theme is updated all your changes will be lost.

You can use some child theme ready premium themes but if you are using free themes which generally doesn’t include any child theme you have to create one. Once you have your child theme ready you can now create your category templates.

How To Create Category Template

WordPress works on a template system which follows a certain hierarchical order. You must know this template hierarchy in order to create category templates.

The hierarchical order for category is.

category-slug.php → category-id.php → category.php → archive.php → index.php

As per the order wordpress will look for category-slug.php where slug means category name, suppose you have a category named photoshop so it will search for category-photoshop.php first if that file doesn’t exist it will look for category-id.php i.e. it will look for any file with category id for example category-3.php if that one is not available it will look for category.php if this file is missing too it will try to use archive.php file as template if that one not found is well then it will finally use index.php as its base template.

In order to make a category template you have to find category.php file in your theme, most of the themes will have category.php file but if you don’t find that then look for archive.php.

Note: In some frameworks you may not find these files at all for those cases you need to follow that particular frameworks guideline.

Now assuming that you are working on a child theme copy the category.php or archive.php file from the parent theme and paste it in the same folder location of the child theme.

For example if you found the required file in the root directory of the parent theme you must place it in the root directory of the child theme similarly if it was in a subfolder then create a subfolder with same name and paste it there.

Now moving on say you have a category called photoshop re-name the new file in the child theme like this category-photoshop.php and that’s it the photoshop category will use this template.

Now let’s see it through an example.

Note: We will be using wordpress twenty seventeen theme here for our examples, the process will work on any theme but the html structure will differ from theme to theme.

Now we have created a category template let’s do some customization.

See how the current template looks.

This is what we are trying to achieve.

Basic Structure

Twenty seventeen theme has a two column layout but we want a single column layout, we will make this template full width with no sidebar.

In twenty seventeen theme there is no category.php file so we have use archive.php as our base template and named it as category-photoshop.php.

Old code (archive.php).

<?php
/**
 * The template for displaying archive pages
 *
 * @link https://codex.wordpress.org/Template_Hierarchy
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.0
 */

get_header(); ?>

<div class="wrap">

<?php if ( have_posts() ) : ?>
 <header class="page-header">
 <?php
 the_archive_title( '<h1 class="page-title">', '</h1>' );
 the_archive_description( '<div class="taxonomy-description">', '</div>' );
 ?>
 </header><!-- .page-header -->
 <?php endif; ?>

<div id="primary" class="content-area">
 <main id="main" class="site-main" role="main">

<?php
 if ( have_posts() ) : ?>
 <?php
 /* Start the Loop */
 while ( have_posts() ) : the_post();

/*
 * Include the Post-Format-specific template for the content.
 * If you want to override this in a child theme, then include a file
 * called content-___.php (where ___ is the Post Format name) and that will be used instead.
 */
 get_template_part( 'template-parts/post/content', get_post_format() );

endwhile;

the_posts_pagination( array(
 'prev_text' => twentyseventeen_get_svg( array( 'icon' => 'arrow-left' ) ) . '<span class="screen-reader-text">' . __( 'Previous page', 'twentyseventeen' ) . '</span>',
 'next_text' => '<span class="screen-reader-text">' . __( 'Next page', 'twentyseventeen' ) . '</span>' . twentyseventeen_get_svg( array( 'icon' => 'arrow-right' ) ),
 'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'twentyseventeen' ) . ' </span>',
 ) );

else :

get_template_part( 'template-parts/post/content', 'none' );

endif; ?>

</main><!-- #main -->
 </div><!-- #primary -->
 <?php get_sidebar(); ?>
</div><!-- .wrap -->

<?php get_footer();

New code (category-photoshop.php).

<?php
/**
 * The template for displaying photoshop pages
 *
 * @link https://codex.wordpress.org/Template_Hierarchy
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.0
 */

get_header(); ?>

<div class="wrap">

<?php if ( have_posts() ) : ?>
 <header class="page-header">
 <?php
 the_archive_title( '<h1 class="page-title">', '</h1>' );
 the_archive_description( '<div class="taxonomy-description">', '</div>' );
 ?>
 </header><!-- .page-header -->
 <?php endif; ?>

<div id="primary" class="content-area">
 <main id="main" class="site-main" role="main">

<?php
 if ( have_posts() ) : ?>
 <?php
 /* Start the Loop */
 while ( have_posts() ) : the_post();

/*
 * Include the Post-Format-specific template for the content.
 * If you want to override this in a child theme, then include a file
 * called content-___.php (where ___ is the Post Format name) and that will be used instead.
 */
 get_template_part( 'template-parts/post/content', get_post_format() );

endwhile;

the_posts_pagination( array(
 'prev_text' => twentyseventeen_get_svg( array( 'icon' => 'arrow-left' ) ) . '<span class="screen-reader-text">' . __( 'Previous page', 'twentyseventeen' ) . '</span>',
 'next_text' => '<span class="screen-reader-text">' . __( 'Next page', 'twentyseventeen' ) . '</span>' . twentyseventeen_get_svg( array( 'icon' => 'arrow-right' ) ),
 'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'twentyseventeen' ) . ' </span>',
 ) );

else :

get_template_part( 'template-parts/post/content', 'none' );

endif; ?>

</main><!-- #main -->
 </div><!-- #primary -->
</div><!-- .wrap -->

<?php get_footer();

Here you can see I have removed the <?php get_sidebar(); ?> because this template will have no sidebars.

This will remove the sidebar but the layout is still not full width we have to do some CSS adjustment. Remember all the CSS adjustment will be made to the child themes CSS files not the parent theme.

WordPress adds an unique class to each category with its category name in the body like this category-photoshop you can target that class to style the page.

CSS:

@media screen and (min-width: 48em) {
.category-photoshop #primary {
 float: none;
 width: 100%;
}
}

Using the media query simply to match the parent theme stylesheet.

Adding Category Description

You can show an additional description of each category by adding the description in the categories section. Providing additional information will help visitors better understand the topic but you can make this section more interesting by giving unique look for each category.

As per our design we will need a custom image on left side and category name with description on the right side.

<?php
/**
 * The template for displaying photoshop category
 *
 * @link https://codex.wordpress.org/Template_Hierarchy
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.0
 */

get_header(); ?>

<div class="wrap">

<?php if ( have_posts() ) : ?>
 <header class="page-header">
 <div class="header-category-img"><img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/photoshop-banner.jpg" alt="Photoshop"></div>
 <div class="header-category-title">
 <h1 class="page-title"><?php single_term_title()?></h1>
 <?php 
 the_archive_description( '<div class="taxonomy-description">', '</div>' );
 ?>
 </div>
 </header><!-- .page-header -->
 <?php endif; ?>

<div id="primary" class="content-area">
 <main id="main" class="site-main" role="main">

<?php
 if ( have_posts() ) : ?>
 <?php
 /* Start the Loop */
 while ( have_posts() ) : the_post();

/*
 * Include the Post-Format-specific template for the content.
 * If you want to override this in a child theme, then include a file
 * called content-___.php (where ___ is the Post Format name) and that will be used instead.
 */
 get_template_part( 'template-parts/post/content-photoshop', get_post_format() );

endwhile;

the_posts_pagination( array(
 'prev_text' => twentyseventeen_get_svg( array( 'icon' => 'arrow-left' ) ) . '<span class="screen-reader-text">' . __( 'Previous page', 'twentyseventeen' ) . '</span>',
 'next_text' => '<span class="screen-reader-text">' . __( 'Next page', 'twentyseventeen' ) . '</span>' . twentyseventeen_get_svg( array( 'icon' => 'arrow-right' ) ),
 'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'twentyseventeen' ) . ' </span>',
 ) );

else :

get_template_part( 'template-parts/post/content-photoshop', 'none' );

endif; ?>

</main><!-- #main -->
 </div><!-- #primary -->
</div><!-- .wrap -->

<?php get_footer();

CSS:

.page-header {
 border-bottom: 1px solid #ccc;
 box-sizing: border-box;
 margin-bottom: 1.5em;
 padding-bottom: 0.5em;
}
.header-category-title {
 float: left;
 padding-top: 15px;
 width: 85%;
}
.header-category-img {
 float: left;
 width: 15%;
}

You can see I have made quite a few changes in the page-header section but the most important one is single_term_title() because I want to display only category name like this Photoshop instead of Category:Photoshop.

Moving on.

Box View

We have made the basic changes like making one column layout and have modified the category description section now let’s do something little more advanced, we will convert the post listing from list view to a gird or box view with 3 items per column.

To make this changes we have to modify get_template_part path because the content is being called from a different location here but in some theme you may find content is directly placed in the base template.

get_template_part( 'template-parts/post/content-photoshop', get_post_format() );

Now to modify that content page you have to copy the file from parent theme to child theme and place it in the same folder structure then rename it as you want.

Here I have copied the content.php file from parent theme and pasted it as content-photoshop.php in child theme. It is renamed because whatever changes will be made here will affect this template only.

Code (content-photoshop.php).

<?php
/**
 * Template part for displaying photoshop posts
 *
 * @link https://codex.wordpress.org/Template_Hierarchy
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.2
 */

?>

<article id="post-<?php the_ID(); ?>" <?php post_class("one-third"); ?> >
 <?php
 if ( is_sticky() && is_home() ) :
 echo twentyseventeen_get_svg( array( 'icon' => 'thumb-tack' ) );
 endif;
 ?>
 <?php if ( '' !== get_the_post_thumbnail() && ! is_single() ) : ?>
 <div class="post-thumbnail">
 <a href="<?php the_permalink(); ?>">
 <?php the_post_thumbnail( 'twentyseventeen-featured-image' ); ?>
 </a>
 </div><!-- .post-thumbnail -->
 <?php endif; ?>
 <header class="entry-header1">
 <?php
 if ( is_single() ) {
 the_title( '<h1 class="entry-title">', '</h1>' );
 } elseif ( is_front_page() && is_home() ) {
 the_title( '<h3 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h3>' );
 } else {
 the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
 }
 if ( 'post' === get_post_type() ) {
 echo '<div class="entry-meta">';
 if ( is_single() ) {
 twentyseventeen_posted_on();
 } else {
 echo twentyseventeen_time_link();
 twentyseventeen_edit_link();
 };
 echo '</div><!-- .entry-meta -->';
 };
 ?>
 </header><!-- .entry-header -->

<div class="entry-content">
 <?php
 /* translators: %s: Name of current post */
 if ( is_single() ) :
 the_content( sprintf(
 __( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'twentyseventeen' ),
 get_the_title()
 ) );

ks29so_link_pages( array(
 'before' => '<div class="page-links">' . __( 'Pages:', 'twentyseventeen' ),
 'after' => '</div>',
 'link_before' => '<span class="page-number">',
 'link_after' => '</span>',
 ) );
 else:

the_excerpt( sprintf(
 __( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'twentyseventeen' ),
 get_the_title()
 ) );

ks29so_link_pages( array(
 'before' => '<div class="page-links">' . __( 'Pages:', 'twentyseventeen' ),
 'after' => '</div>',
 'link_before' => '<span class="page-number">',
 'link_after' => '</span>',
 ) );
 endif;
 ?>
 </div><!-- .entry-content -->

<?php
 if ( is_single() ) {
 twentyseventeen_entry_footer();
 }
 ?>

</article><!-- #post-## -->

Now few things to be noted here that I have added a custom class one-third in the article section and have changed the content type to excerpt for the box view, other stractural changes are self-explanatory.

CSS:

.category-photoshop main{
 margin:0 -15px; 
}
.one-third {
 box-sizing: border-box;
 float: left;
 padding: 0 15px;
 width: 33.333%;
}
.one-third .post-container {
 border: 1px solid #ccc;
 padding: 10px;
}
.one-third .post-thumbnail{
 margin-bottom:0;
}
.one-third h2{
 margin-bottom:0.2em;
}

Now this how the layout looks.

With CSS Only

If you are not comfortable with php code even then you can style the category pages with CSS only, but these changes will be limited in a way that you can’t add or modify the code, you can only style the existing elements.

Let’s see through an examples how even with these limitations you can make your category pages unique.

Let’s say we want to style our wordpress category from this.

to this.

Basic Styling

You can change the background color very easily with CSS by targeting the class that wordpress provides.

Something like this.

CSS:

.category-wordpress .site-content-contain {
 background-color:#eaeaea;
}

Adding Icon To Category Title

You can add unique icons to each categories with background images, as per requirement here we will add one to our wordpress category only.

CSS:

.category-wordpress .page-header {
 border-bottom: 1px solid #ccc;
 margin-bottom: 1.5em;
 padding-bottom: 0.5em;
}
.category-wordpress .page-header h1{
 background:url("assets/images/wordpress-logo.png") no-repeat left center;
 padding-bottom:5px;
 padding-left:35px; 
}

Making Full Width Page

You can convert two or more column page to a full width page at least visually through CSS.

CSS:

.category-wordpress:not(.error404) #primary{
 float: none;
 width: 100%;
}

.category-wordpress #secondary{
 display:none; 
}

I know its a CSS hack and not advisable as best practice but you can achieve your design goal in this way specially if you are not confident enough in working with templates.

But if you can work with templates then this method of making full width page is not advisable as a shortcut because all you are doing is hiding it from showing in the browser while it remains in the DOM.

Conclusion

As you can see you can do a lot to style different categories and above mentioned examples are just a starting point but the possibilities depends on your ability to work with templates and CSS. Depending on your skill level you can choose which way you want to style your categories.

So do you know any other ways to style different categories differently do let us know in the comments section below.