How To Create A WordPress Category-Specific Template
A little WordPress education first: WordPress has built-in logic so that when a Category is selected, it first looks for a program file named category-X.php. The –X is the category ID number. So if you have a template for a category named “Motorcycles” and its ID number is 9, then the file you create would be named category-9.php.
If this file is not found for the category, the code logic then looks for a program file named category.php, if this is not found, then it looks for archive.php, and finally if that is not found, it looks for index.php. Most Theme designers will include at least the archive.php and index.php program files.
To get started creating your custom category page template you will need to use a text editor like notepad or some other file editor.
- Review this article to learn how to discover your category ID numbers.
- Make a copy of archive.php and save it with the name category-X.php, using the Category ID number you determined in step 1, in place of the “X”.
Now you have a category-specific template that you can modify in order to create a unique page for this category.
Let’s create a custom template for our “Motorcycles” category by adding a header tag that tells Visitors what Category they are viewing along with a unique image.
- Open your new category-x.php file.
- To add a category-specific Title, in this case, “Motorcycles”, add this header tag code snippet within the content area*:
<h1><?php single_cat_title(''); ?></h1>
(Review the WordPress codex to learn more about single_cat_title() ) - To add a unique image that designates the Category, add this code snippet below the header tag code:
<img src="<?php bloginfo('template_url'); ?>/images/motorcycles.png" alt="<?php bloginfo('name'); ?>: <?php single_cat_title('',); ?>" />(Make sure that you have uploaded your image and that you have the correct path to where you have the image, in your code)
- Save the file and test results of your new category-specific page template.
- Of course, you may need to do some CSS tweaking to achieve proper spacing, etc.
Here’s an example of the entire category-X.php file:
<?php get_header(); ?>
<div id="content">
<div id="contentleft">
<div class="postarea">
<?php include(TEMPLATEPATH."/breadcrumb.php");?>
<h1><?php single_cat_title(''); ?></h1>
<img src="<?php bloginfo('template_url'); ?>/images/motorcycles.png" alt="<?php bloginfo('name'); ?>:
<?php single_cat_title('',); ?>" />
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h1><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h1>
<div class="date">
<div class="dateleft">
<p><span class="time"><?php the_time('F j, Y'); ?></span> by <?php the_author_posts_link(); ?>
<?php edit_post_link('(Edit)', '', ''); ?> <br /> Filed under <?php the_category(', ') ?></p>
</div>
<div class="dateright">
<p><span class="comment"><?php comments_popup_link('Leave a Comment', '1 Comment', '% Comments'); ?>
</span></p>
</div>
</div>
<?php the_content(__('Read more'));?><div style="clear:both;"></div>
<div class="postmeta2">
<p><span class="tags">Tags: <?php the_tags('') ?></span></p>
</div>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p><?php endif; ?>
<p><?php posts_nav_link(' — ', __('« Previous Page'), __('Next Page »')); ?></p>
</div>
</div>
<?php include(TEMPLATEPATH."/sidebar.php");?>
</div>
<!-- The main column ends -->
<?php get_footer(); ?>Want to take your WordPress Category-Specific Template to another level? What happens if you have child-categories? For the newbies, these are categories assigned to a Parent category. An example would be the example “Motorcycle” category as the parent and then having child-categories like “Harley Davidson”, “Honda”, “Suzuki”, etc.
