Create a category archive page in TwentyTen Child Theme

You don’t new »statements«. Take a look at the Template Hierarchy: WP does most of the work for you.

1. Find the name

Just create a new post list template, similar to your index.php and name it category-slug.php.

To get the slug part, go to wp-admin/edit-tags.php?taxonomy=category and look at the column named … slug.

Screenshot
See the full size image

In my example image the slug for the category Cat A is cata, so your template’s name has to be category-cata.php.

2. Write the template

That is even easier: Include your usual suspects (header, sidebar, footer) and put a very basic loop inside.

Sample code

<?php # -*- coding: utf-8 -*-
get_header();
get_sidebar();
?>
<h1><?php wp_title(); ?></h1>
<ul class="postlist">
<?php
while ( have_posts() )
{
    the_post();
    ?>
    <li <?php post_class(); ?>><h2><a href="https://wordpress.stackexchange.com/questions/11580/<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    <?php
    the_post_thumbnail();
    // If you need the full content, use
    // the_content();
    // wp_link_pages();
    the_excerpt();
    ?>
    </li>
    <?php
}
echo get_previous_posts_link(), get_next_posts_link();
?>
</ul>
<?php
get_footer();

WordPress will choose the template automagically, you have nothing more to do.

3. Style the template

In your theme’s header the element body or the element html (if you use HTML5 already) should have a call to body_class():

<body <?php body_class(); ?>>

or

<html lang="<?php bloginfo('language'); ?>" <?php body_class(); ?>>

Make sure your theme has it. On your new category archive the class attribute will look very similar to this:

class="archive category category-cata category-58 logged-in admin-bar"

Note the category-cata. You may now add special rules to your stylesheet (usually style.css) to change only this page.

Sample code

body.archive.category-cata
{
    background: #345;
    color:      #fff;
}
/* The thumbnails */
body.archive.category-cata .attachment-post-thumbnail
{
    float:      left;
    margin:     0 10px 10px 0;
}

 
 
 
And that’s all.