Desizn Tech logo
  • Home
  • Freebies
  • Showcase
  • Tutorial
  • Photography

How to Create WordPress Category Template Page?

Posted August 1, 2012 & filed under Tutorial, Wordpress

WordPress is very easy to customize if you understand the template tags. That is one of the reasons many developers, designers chooses it over any other CMS. You can easily customize wordpress post and page. But , how about if you wanted to customize one category page or all of them. In this post, we will show you how you can easily template a category page just like post or page.

We will try to go in as much as detail we can. To do this, first log in to your theme folder and find the category.php file. That is the template for displaying wordpress categories. This page usually has customized headers that changes the tile according to the category you are browsing.

We will be using wordpress tag is_category(). Go to wordpress Dashboard > Post > Categories. You need find your wordpress category id/ids to redirect the category to the custom template page. When you hover over the category name, the category id will appear on your browser status bar. Write it down somewhere.

Now, lets open category.php file. Before we add the is_category() tag, let’s have a look at the file. We will be concerned with the top portion of the file.

The category file you are looking at is a theme based on wordpress Twenty Eleven theme. You wordpress theme will have something similar. Now paste the following code right after the header.


<!--?<span class="hiddenSpellError" pre=""-->php if (is_category( '78') || cat_is_ancestor_of(777, $cat)) { include(TEMPLATEPATH . '/freebie_template.php'); }
elseif (is_category( '1616')) { include(TEMPLATEPATH . '/page-magazine-archive.php'); }
else {;?>

It should look  the following image. In plain English this snippet means if the category your are browsing has an id ID of 78 load the specified template instead of regular category page.  I have also included cat_is_ancestor_of( $cat1, $cat2 ) tag. If there is child category, lets say PSD is a child category of Freebies, it will use that template.  Also, be sure to close your last else statement like this php }?;>. It should go right before the footer php get_sidebar(); ?>. Otherwise you will get the blank PHP page.

You can also use multiple category using arrays such as is_category( array( 9, ‘blue-cheese’, ‘Stinky Cheeses’ ) ) , as it is specified in the wordpress codex. If it is not too many categories, it is easier to separate them in different eleseif statement for different template as you see in the picture.

We have told wordpress if it is in category 77, go to the template and now we must create that template page. There are many ways to create this category template page using different kind of wordpress loops. If you want to know more about the wordpress loops see Jeff Stars post on Digwp. We will  be using most common worpress loop from your page.php file. However, it will be a little different because will be using limiting it by only one category , in our case category 77. Here is the modified loop.


<!--?<span class="hiddenSpellError" pre=""-->php single_cat_title('Currently browsing '); ?><!-- Gets the Category Title -->
<!--?<span class="hiddenSpellError" pre=""-->php query_posts($query_string . '&cat=3&posts_per_page=12');?><!-- Get only post from this category & Limit how many post -->
<!--?<span class="hiddenSpellError" pre=""-->php if (have_posts()) : while (have_posts()) : the_post();?>
<div>
<h2><a href="<<span class=">php the_permalink(); ?>" ></a></h2>
<small>Posted in <!--?<span class="hiddenSpellError" pre=""-->php the_category(', '); ?> | <!--?php the_time('F jS, Y') ?--> by <!--?php the_author_posts_link();?--></small>

<div>
<?php the_content() ?>
</div>
</div><!-- closes the first div box -->

<!--?php <span class="hiddenSpellError" pre="php "-->endwhile; else: ;?>
Sorry, no posts matched your criteria.

<!--?php <span class="hiddenSpellError" pre="php "-->endif; ?>

On the top of the loop we have added a query, which tells the loop to get only post from specified category.  Now, if you have little idea with wordpress tags, you can get creative with it. Just to show the title of the post as a list take off <?php the_content(); ?> tag. You can also make it into list, add thumbnails and  customize it more.  If you are using theme from a third party theme provider, your CSS div tags might be different. Easiest thing to do it copy your page.php file, rename it add the query string right before the while loop starts and name your category template.

Now, what would be post without demo? We have redesigned Desizn Tech’s freebies section just for purpose of this post. If you look at the freebie category, it looks different that any other category pages and we have used this same technique to achieve . We have also attached the category page and the freebie template page from our theme.

Download

In conclusion, while there are plugins to create WordPress Category template, why bloat your database with another table rather than using existing wordpress tricks. If you have any tips related to this post, share it in the comment.

More about Kawsar Ali

About the author

Kawsar Ali is a web designer who also likes blogging. He is the curator of Desizn Tech. In his spare time he walks around with a Nikon D5100 hunting for good textures.

Tags: category, PHP, Template


Related posts:
  • Remove WordPress Meta
  • WordPress Custom Fields and Hacks for Bloggers
  • WordPress and jQuery: Troubleshooting, Implementing Sidebar Tabs and More
  • M&M: A Free Modern, Minimalist and Smart WordPress Theme
  • WordPress Hacks for Members Only Website

Comments

Due to a high number of spam comments on site we have disabled comment system at desizntech.info. In a few days comments will be available again after we delete spam.

Cheap Tablet PC

Stay Connected

rss twitter facebook google pinterest
Get free updates in your inbox!

Subscribe via rss

Our Supporters

  • Cloud Storage
  • Dedicated Server
  • Modern Furniture
  • Online Business Printing
  • Online Backup
  • Logo Design
  • Wow Gold
  • Web Hosting UK
  • Secure and protect your business with SiteLock.
  • Festklänningar
  • Blogroll

    AnimHut
    Designmodo – Web Design
    Design Superhero
    Inspireyourway
    iBrandStudio
    OurTuts
    Skyje
    TextureQualityPro
    Stock Images
    Vector Pack
    365icon
    • About
    • Contact
    • Contribute
    • Theme

    Copyright © 2012 Desizn Tech ▲

    Theme by Kawsar Ali. Credit