How to Create Category Templates in WordPress
Have you visited a site where each category has different layout? In WordPress theme development, it is a common practice to use different templates for categories, tags, custom post types, and taxonomies. By creating templates for categories you can add specific features on category pages. For example, you can allow users to subscribe to categories, add category images, show category description and choose a different layout for each category. In this guide, we will show you how to create category templates in WordPress.
WordPress Template Hierarchy for Category Pages
WordPress has a powerful templating system. You can create a WordPress theme by using different templates for different sections of your website. WordPress looks for a template in a pre-defined hierarchical order when displaying any page. To display a category page, it looks for templates in this order.
category-slug.php → category-id.php → category.php → archive.php → index.php
First WordPress will look for a template specific for that particular category using the category slug, for example, category-design.php template will be used to display ‘Design’ category. If it does not find a category-slug template, then WordPress will look for a template with category id, for example category-6.php. After that it will look for the generic category template which is usually category.php. If there is no generic category template present, then WordPress will look for generic archive template, i.e. archive.php. Lastly it will use index.php template to display the category.
Creating a Category Template in WordPress
Lets first take a look at a typical category.php template.
<?php /** * A Simple Category Template */ get_header(); ?> <section id="primary" class="site-content"> <div id="content" role="main"> <?php // Check if there are any posts to display if ( have_posts() ) : ?> <header class="archive-header"> <h1 class="archive-title">Category: <?php single_cat_title( '', false ); ?></h1> <?php // Display optional category description if ( category_description() ) : ?> <div class="archive-meta"><?php echo category_description(); ?></div> <?php endif; ?> </header> <?php // The Loop while ( have_posts() ) : the_post(); ?> <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> <small><?php the_time('F jS, Y') ?> by <?php the_author_posts_link() ?></small> <div class="entry"> <?php the_content(); ?> <p class="postmetadata"><?php comments_popup_link( 'No comments yet', '1 comment', '% comments', 'comments-link', 'Comments closed'); ?></p> </div> <?php endwhile; else: ?> <p>Sorry, no posts matched your criteria.</p> <?php endif; ?> </div> </section> <?php get_sidebar(); ?> <?php get_footer(); ?>
Now lets assume that you have a category called “Design” with the category-slug “design” and you want to display this category differently than others. To do that, you need to create a template for that particular category. Go to Appearance » Editor. From the list of theme files on your right, click on category.php, if you do not have a category.php file there, then look for archive.php. If you can not find either of these templates then there is a good chance that you are using a WordPress Theme Framework and this tutorial may not useful for you. We suggest that you refer to the specific framework you are using.
If you find the files above, then copy all the contents of category.php and paste them in a text editor like Notepad. Save this file as category-design.php.
Connect to your website using FTP client. Go to /wp-content/themes/your-current-theme/ and upload category-design.php file to your theme directory. Now any changes you make to this template will only appear in this particular category’s archive page. Using this technique you can create templates for as many categories as you want. Just use category-{category-slug}.php as the file name. You can find category slugs by visiting the categories section in WordPress admin area.
Here is an example of a category-slug.php template, notice that we have used the same template as category.php with little changes. Since we already know the category it will be used for we can add title, description, or any other details manually. Also notice that we have used <?php the_excerpt(); ?> instead of <?php the_content(); ?>. Check out why we think using post summary or excerpt instead of full post is a good idea.
<?php /** * A Simple Category Template */ get_header(); ?> <section id="primary" class="site-content"> <div id="content" role="main"> <?php // Check if there are any posts to display if ( have_posts() ) : ?> <header class="archive-header"> <?php // Since this template will only be used for Design category // we can add category title and description manually. // or even add images or change the layout ?> <h1 class="archive-title">Design Articles</h1> <div class="archive-meta"> Articles and tutorials about design and the web. </div> </header> <?php // The Loop while ( have_posts() ) : the_post(); <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> <small><?php the_time('F jS, Y') ?> by <?php the_author_posts_link() ?></small> <div class="entry"> <?php the_excerpt(); ?> <p class="postmetadata"><?php comments_popup_link( 'No comments yet', '1 comment', '% comments', 'comments-link', 'Comments closed'); ?></p> </div> <?php endwhile; // End Loop else: ?> <p>Sorry, no posts matched your criteria.</p> <?php endif; ?> </div> </section> <?php get_sidebar(); ?> <?php get_footer(); ?>
If you do not want to use category-slug template, then you can use category-id template to create a template for specific category ID (How to find a category ID in WordPress).
Using Conditional Tags for a Category
When creating templates for your theme, you need to ask yourself do you really need a separate template to do what you want to do? In some cases, the changes you want to make are not too complicated and can be achieved using conditional tags inside a generic template, like category.php or even archive.php.
WordPress comes with support for many conditional tags that theme authors can use in their templates. One such conditional tag is is_category(). Using this conditional tag, you can change your templates to display different output if the condition is matched. For example, lets suppose you have a category for featured posts called “Featured”. Now you want to show some extra information on the category archive page for this particular category. To do that add this code in category.php file right after <?php if ( have_posts() ) : ?>.
<header class="archive-header"> <?php if(is_category( 'Featured' )) : ?> <h1 class="archive-title">Featured Articles:</h1> <?php else: ?> <h1 class="archive-title">Category Archive: <?php single_cat_title(); ?> </h1> <?php endif; ?> </header>
Learning WordPress theme development is not something that can be achieved overnight. But you can start learning by tweaking your templates and making smaller changes. It is a risk, and you will break things more often than you would like, but the joy of finally getting it right will keep you motivated.
We hope this article helped you create category templates in WordPress. If you have any questions about modifying category templates in WordPress, then please leave a comment below.
