Editing category templates
Have you ever wanted to display category pages in a different way depending on the category? Maybe you have several sub-categories but don’t want them displayed the same way on the parent category page or displayed at all. WordPress has an easy method for dealing with this and we’ll walk you through the steps.
Before we begin, let’s make sure we are all on the same page – the category page. This is the archive page for your categories. If your website has a category called televisions and one or more posts within that category, the category template defines what posts are displayed and how they are displayed. Usually the url would be www.example.com/category/televisions/, unless you are rewriting the permalinks. So where will you find this template?
If you are using Elegant Themes, the name of the template is index.php. If you wanted to change how your category pages look and function, you could simply copy and edit this file to your child theme folder and it would affect every category within your website. But what if you only want to change one or two categories? Luckily, WordPress has made this easy by creating a Template Hierarchy. In other words, WordPress will decide which template to use for each category based on the following hierarchy:
- category-slug.php
- category-ID.php
- category.php
- archive.php
- index.php
Using our example from earlier, if you only want to change the televisions category page, you would create a file called category-televisions.php and place it in your child theme folder. You would probably want to copy the code from your index.php file and paste it into the category-televisions.php file so you had a place to start and could edit however you wished. This file will only affect the televisions category and would be used in place of the index.php file.
If this file does not exist in your theme or child-theme folder, WordPress will continue down the list in order until it found one of the files in the list above. Using the category-ID.php method, you would replace ID with the category ID number you want to create a custom page for. You can find this number by going to the Categories page in your dashboard and hovering over any category. In the bottom left corner of your browser you should see a long URL with “tag_ID” near the end, followed by the ID number of your category. The ID method is nice to use if you have several sub-categories with the same name and don’t want the category-slug.php template to apply to all of them.
Creating a file named category.php will apply to every category in your site but will not change author and date archive pages. Creating archive.php will affect all archives pages and creating index.php will affect your entire site.
Now that we know how to use the hierarchy to zero down on a particular category or group of categories, what can we do with this knowledge? Let’s first look at a sample index.php page from Elegant Themes for the Chameleon theme. Here’s the contents of the file:
<?php get_header(); ?>
<?php get_template_part(‘includes/breadcrumbs’); ?>
<?php get_template_part(‘/includes/top_info’); ?>
<div id=”content” class=”clearfix”>
<div id=”left-area”>
<?php get_template_part(‘includes/entry’); ?>
</div> <!– end #left-area –><?php get_sidebar(); ?>
</div> <!– end #content –><?php get_footer(); ?>
Pretty simple, right? This file is broken down into 6 sections: header, breadcrumbs, top_info, entry, sidebar, and footer. Each of these sections is created using the contents of another file in the includes folder. You can add to this file by inserting PHP or HTML in between each section. If you want to edit the content of the posts, which is pulled from the entry.php file in the includes folder, you will need to create a new file. The original file should not be changed because other templates will still need to use it. This is the line we need to change in the index.php file:
<?php get_template_part(‘includes/entry’); ?>
Change this line to read:
<?php get_template_part(‘includes/entry-custom’); ?>
You could rename it however you wish but whatever you name it, you would then create that file in a includes folder in your child theme. The path would look like this: /themes/themename-child/includes/entry-custom.php. You could then copy the code from the original entry.php file, paste it into the new file, and make any changes. You would then need to save the index.php file as category-slug.php or category-ID.php, whichever works for your case, and then place this file in your child theme folder.
4 Comments
Excellent walkthrough, thank you!!
July 11, 2017
Nice hook for, thanks.
May 1, 2018
Just found this site due to wanting to tweak my categories on Divi Shop module. Thanks and look forward to your info and Weekly Tweaks!
August 31, 2018
Thank you for you help.
May 28, 2020