How to Create a Unique WordPress Category Archive Page


In WordPress, if you would like make your category archives different from each other (for example, giving them different styles or including different types of information on each), then it’s pretty easily done. You will only need to make a new category template file for the categories you would like to change.

How to Make a New Category Template

Create a New File

You will need to go into your theme’s folder on your server to make your new category template.

Go to wp-content > themes > (your current theme). You should see a file there named category.php.

(Note: Some themes do not have a file named category.php. If that’s your case, look for a file named archive.php.)

To make a new category template, create a new file and name it “category-(name).php”  where (name) is the name of your category.

For example, say you want to make a category template for your “Food” category. Name the new file:

category-food.php

(Note: You are really naming the file according to your category “slug.” Unless you changed the slug to something different when you set up your categories, it should be named exactly the same as your category. If your category has more than one word, you will have hyphens between the words – e.g. Breakfast Food = breakfast-food, and so your category template would be named category-breakfast-food.php.)

 


Copy Your Original Category File

Probably the easiest way to create a new category template is to start with the same information that’s in your original category file. So open up your original category.php file. (In many systems you will need to click “Edit” to open it). Copy the original file and then open your newly created file (e.g. category-food.php) and paste everything into that new file.

You can then change the new file to suit your purposes for your Food category. You can give it new styling through your stylesheet, you can include or delete functions, etc.

 

An Example

For a quick example, I will add a line of text to my new category-food.php file that I created.

After saving it, this line of text should appear only on my Food Category archive page. And taking a look at it, it does.

New Category Template Pages

You can change your new templates to look however you like – giving them completely different styles or making them “behave “ in a completely unique way. You’re only limited by your imagination.

Photo: Be Unique from BigStock

More articles about WordPress Categories:

17 Responses

  • Hi Joe, thank you for the reminder for this!
    I want to add two things:

    1. When you produce the copy of the category or archive.php you should put the copy into the child theme (which you have hopefully created for your theme) … that makes it easier for you when your theme gets updated.

    2. Before you even copy the files: Think what you really want to change! If you want just to change the styling, then it is better to that without a copy. Because every category or archive page has a class name added to its body by default: In case of the food example the body class added is category-food.
    Knowing this in your styles.css you can add a rule e.g. like

    .category-food p{color:magenta;}

    which would show all your text in paragraphs in magenta color – BUT ONLY on the category Food archive.
    This way you can change colors, add decorations (with background-picture), hide parts of the page (with display:none) and even rearrange certain things (if you know how to use float and clear properties in css …) … and all of that without having to add/delete/change a single line of PHP … ;)

  • New Recruit

    I saw this tutorial (via wpmail.me) just when I was contemplating if it was possible to make different category archive pages. Now that I’ve done that (thanks to you) I wonder; is it possible to have the category subpages (pages 2,3,4 etc.) use a different template? I’d like to have different archive pages for each category, but I’d like to have all subapages from all categories share the same template (one without the big header I designed for each category archive)\. Thanks again.

  • Hi Curtis,
    I have done that with some of my categories in this way:
    1. you need to extend the body class on the single post page that tells you, which categories your post is from
    2. with this extended body class you can style the bigger headline “away” in your style sheet.

    More details:

    1. Add this code in your functions.php:

    function add_category_name_to_body_classe($classes = ”) {
    if(is_single() or is_archive()) {
    $category = get_the_category();
    foreach($category as $no => $cat) {
    $cat_slug = $cat->slug;
    $classes[] = ‘category-‘.$cat_slug;
    }
    }
    return $classes;
    }

    add_filter(‘body_class’,’add_category_name_to_body_classe’);

    This makes that on every single post page the body tag will have added classes for each category the post is in. Example: if the post is in category “Food” then the body tag will have the class “category-Food”.

    2. In your style sheet you can now provide styles applicable only for the single pages in this way (lets assume you have an header you want to hide on the single pages):

    .category_Food.single h1{ display:none;}

    while the style for your category page would look like:

    .category_Food.category h1{ font-size:36px;}

    Have fun with it …

  • Typo alarm:
    The styles in my last post should be with dashes (not underlines):

    .category-Food.single h1{ display:none;}

    .category-Food.category h1{ font-size:36px;}

  • Hi Curtis – the website looks really good ;-)

    You already found the way to have a different layout for the category pages.

    But now you want to have the layout for a single post in category “Business” different than for a single post in category “Health” – is that your problem?

    If so, the solution is to make files for each category like single-health.php, single-business.php etc. which reflect the layout for posts in that special category.

    Then you replace the content of the original wordpress single.php with an if statement like:

    post;

    if (in_category(‘Health’)) {
    include(TEMPLATEPATH.’/single-health.php’);
    } elseif (in_category(‘Business’)) {
    include(TEMPLATEPATH.’/single-business.php’);
    } else {
    include(TEMPLATEPATH.’/single-default.php’);
    }
    ?>

  • New Recruit

    No – I’m sorry I’m not making myself clear. I want to make the category ARCHIVE SUBPAGE different from the Main Category Archive. In other words, when someone goes to the archive pages for a category, I want to welcome him with a large image (and advertisement) like this: http://bit.ly/s21WDt

    But then, when he clicks to the SUBPAGES (page 2, 3, 4) of the same category archive, I don’t want that big image and advertisement. If someone, clicks through 5 or 10 pages of archive listings – they shouldn’t have to see the same “welcome” and banner ad ten times. It should look like this: http://bit.ly/uS55Q2 (this is a category where I have not added a top image and banner ad to the archive page).

    So how can I use a different template for all category *SUB*pages? Know what I mean?

    Thanks again,

    Curtis

  • Ok, Curtis, sorry I did not understand that right from the beginning.

    So the layout of a category page with so many posts that it gets paginated should differ: first page with big advertisment on top – all other pages not – ok?

    1. The style sheet solution is:
    the body tag of the pages 2 and higher has a “paged” class in it – the first page does not have that. So you can style something like
    .category-Food.paged div.advertisment{ display:none; }
    This solution is quick but has the disadvantage that the advertisment is loaded – just not shown on the page …

    2. The solution in PHP for your category template is:
    Use
    $paged = (get_query_var(‘paged’)) ? get_query_var(‘paged’) : 1;
    to find out on which page of the paginated category listing you are and create code for the specific pages.
    With this you could also add the advertisment on the first and the fifth page.
    (I have to say I never did that myself – so no guarantee for this solution)

    Happy New Year, Curtis!

  • New Recruit

    I’m not sure if it’s the same as what you said to do, but I found this in the WordPress Codex and it worked perfectly:

    <?php if ( $paged
    **all the junk I only want to display on the first page of archive***

    While the codex said to use it for text you only want to display on page 1, I applied it to a few DIVs.

    Here’s the page I found it on: http://codex.wordpress.org/Category_Templates

    Thanks again Peter — you steered me in the right direction.

  • New Recruit

    I know this top is a little old, but I’m hoping someone might be able to help me. First off, thanks for this post, I didn’t know you could make specific category and archive pages. So thank you! Second, is there any way to easily show annual or monthly archives of a specific category? In other words, WP handles archives annually by default very simply with http://www.mysite.com/2012. Any way to do that on a per category basis? Thanks!

  • New Recruit

    I have a category called “Alphabetics”, In this category have many subcategory like, A, B, C, D, E ………. etc etc….
    i have created file called “category-alphabetics.php”. This is working fine on Alphabetics category (slug:aalphabetics), But not for subcategory… What to do Can any one help ?
    I am trying to remane my A,B,C,D…. slug, but its not changing..

Comments are closed.