How to create a category template in WordPress?

In this post we will first learn what are categories in WordPress. Then we will learn how to create templates for categories in the frontend for WordPress.

Category in WordPress

Overview

In simple terms, a category in WordPress is what a blog post is related to or based on.

For example, if we create a recipe website, then the categories can be Breakfast, Lunch, Dinner, etc. All recipes will be related to these categories.

In technical terms, Category is one of the default taxonomies in WordPress.

Terms are items within our taxonomy.

Tables for categories in database

In the database, there are three tables to store taxonomies, terms, and the relation of the taxonomy to an object (like post):

wp_terms table stores the terms. In our case for a recipe website, Breakfast, Lunch, Dinner, etc.

We can see in the following screenshot of wp_terms table that Breakfast has been added to the wp_terms table and its term_id is 3.

wp_term_taxonomy table stores the term in a taxonomy.

We can see in the following screenshot of wp_term_taxonomy table that term id – 3 (term id is 3 for the Breakfast term in the wp_terms table) has been added to the wp_term_taxonomy table and category has been added as a taxonomy to this record.

wp_term_relationships table relates the taxonomy to an object. We see in the below screenshot of wp_term_relationships table a record is added with object_id = 1 and term_taxonomyId = 3. Here object_id refers to a blog post id in the wp_posts table.

Above we discussed about term and taxonomy and how term is stored in database and how term is saved in a taxonomy. Now we will discuss how we can create custom templates for this taxonomy to display the taxonomy on the front end.

Create custom category template

Theme overview

Using a WordPress theme, we can manage the display of the front-end of the WordPress website. Themes are collections of templates(like index.php, archive.php), stylesheets(like style.css), images, etc. With WordPress installation, we get themes like twentytwentyone, twentytwentytwo, twentytwentythree, etc which we can see by navigating from WordPress admin to Appearance -> Themes.

We can use any of these themes on our website or install any other theme or create our own theme. In case of using a theme on the front end, we need to activate the desired theme by navigating to the Appearance -> Themes section and then clicking Activate in the WordPress admin section.

Template files and priorities for category

Now the question is which of the multiple files index.php, archive .php, etc in the theme will be used to display the category-specific post when we browse URLs like http://<SITEURL>/category/breakfast.

Below we list the template pages according to the priority for displaying category-specific posts.

category-slug.php
category-ID.php
category.php
archive.php
index.php

During the term and taxonomy related discussion above we have created a category item called Breakfast and according to the screenshot of the wp_terms table we can see that its term_id is 3 and slug is breakfast for Breakfast.

If we have category-breakfast.php file in our theme folder then in case of Breakfast specific post display, this page layout will be considered first.

If we have category-3.php file in our theme folder and category-breakfast.php file is not present then in case of Breakfast specific post display, this page layout will be considered first.

If we have category.php file in our theme folder and category-breakfast.php and category-3.php files are not in the theme folder then the category.php file will be considered first to display Breakfast specific posts.

In this way, if the above 3 files are not in the theme folder, then according to the priority, the archive.php file will be used first and if it is not there, the index.php file will be used to display the post related to Breakfast.

The archive.php and index.php files are not only used to display category-specific posts. For example, we can use archive.php or index.php (when archive.php is not there) for custom post display.

So if we change the archive.php or index.php file then the whole site can have an effect.

That’s why we are making a category.php file to display the posts of the category so that we don’t have to change the archive.php or index.php file.

Create category.php file

First, if there is no category.php file in our theme folder, we will copy the archive.php or index.php file and create a category.php file.

category.php would look like:

<?php
get_header();
$description = get_the_archive_description();
?>
<div class="container">  
  <div class="row">
    <div class="col-md-8">      
    <?php
    if ( have_posts() ) {
    ?>
        <header class="page-header">
        <?php the_archive_title( '<h1 class="page-title">', '</h1>' ); ?>
        <?php if ( $description ) : ?>
            <div class="archive-description"><?php echo wp_kses_post( wpautop( $description ) ); ?></div>
        <?php endif; ?>
        </header><!-- .page-header -->
    <?php    
      // Load posts loop.
      while ( have_posts() ) {
        the_post();
        get_template_part( 'content');
      }
      // Previous/next page navigation.
      // calling function for pagination;
    } else {
      // If no content, include the "No posts found" template.
      get_template_part( 'content-none' );
    }
    ?>
    </div>
    <div class="col-md-4">
      <?php get_sidebar();?>
    </div>
  </div>
</div>
<?php
get_footer();

This way we can create custom category template in WordPress.

Here the layout of category.php page will be used to display posts of all category items i.e. breakfast, lunch, dinner, etc on our recipe related website.

Display different information for different category items

Now another question is if we have to display some information specific to our category then what should we do?

We have seen earlier that we can create pages for different category items using slug or id.
That is, we can create files like category-breakfast.php, category-lunch.php, category-dinner.php and category specific information can be displayed on these pages.

But the problem here is that the number of pages will increase and it will become difficult to manage.

It can be an easy solution if we write the following code outside the while loop in category.php. Here we can get the solution using a single page.

<?php if (is_category('Breakfast')) : ?>
<p>This is the additional information for category Breakfast</p>
<?php elseif (is_category('Lunch')) : ?>
<p>This is the additional information for category Lunch</p>
<?php elseif (is_category('Dinner')) : ?>
<p>This is the additional information for category Dinner</p>
<?php else : ?>
<p>This is the genric information for other categories</p>
<?php endif; ?>

So the final category.php for this requirement would look like:

<?php
get_header();
$description = get_the_archive_description();
?>
<div class="container">  
  <div class="row">
    <div class="col-md-8">      
    <?php
    if ( have_posts() ) {
    ?>
        <header class="page-header">
        <?php the_archive_title( '<h1 class="page-title">', '</h1>' ); ?>
        <?php if ( $description ) : ?>
            <div class="archive-description"><?php echo wp_kses_post( wpautop( $description ) ); ?></div>
        <?php endif; ?>
        </header><!-- .page-header -->
        <?php if (is_category('Breakfast')) : ?>
        <p>This is the additional information for category Breakfast</p>
        <?php elseif (is_category('Lunch')) : ?>
        <p>This is the additional information for category Lunch</p>
        <?php elseif (is_category('Dinner')) : ?>
        <p>This is the additional information for category Dinner</p>
        <?php else : ?>
        <p>This is the genric information for other categories</p>
        <?php endif; ?>
    <?php    
      // Load posts loop.
      while ( have_posts() ) {
        the_post();
        get_template_part( 'content');
      }
      // Previous/next page navigation.
      // Calling function for pagination;
    } else {
      // If no content, include the "No posts found" template.
      get_template_part( 'content-none' );
    }
    ?>
    </div>
    <div class="col-md-4">
      <?php get_sidebar();?>
    </div>
  </div>
</div>
<?php
get_footer();