WordPress Category Page Tweaks

Editing your category page to make it look better:

This tut/hack explains how to:

• Show Category Title on top of each category page.
• Show Category Description below the Category Title on each category page.
• Show only a bulleted list of Post Titles in the corresponding category.
• Format the titles via style.css.

1. If your theme does not have a category.php page, copy singlepost.php and rename it to category.php

2. Show Only Post Title:

Inorder to show only title of your posts on the category page, remove the following code:

<div class=”post”>

<?php the_content(‘Read the rest of this entry »’); ?>

</div>

Alternately if you wish to show only excerpts then change

the_content(‘Read the rest of this entry »’)

to

the_excerpt()

3. Remove Post Footer Options:

To remove the footer options – comments, posted in etc., then remove the following:

<div class=”post-footer”>Posted in <?php the_category(‘, ‘) ?> <strong>|</strong> <?php edit_post_link(‘Edit’,”,'<strong>|</strong>’); ?> <?php comments_popup_link(‘No Comments »’, ‘1 Comment »’, ‘% Comments »’); ?></div>

4. To make post titles appear as a list with bullets:

Add

<ul> (for theme based bullets) and <li>

and close these tags after the following, making it look like this:

<ul><li><h8 class=”post-title”><a href=”<?php the_permalink() ?>” rel=”bookmark” title=”Permanent Link to <?php the_title(); ?>”><?php the_title(); ?></a></h8>
<p>Posted on: <?php the_date(); ?>; <?php the_time(); ?></p></li></ul>

5. Format Header via style.css:

Define a new header font style in style.css according to your preferences:

1. Open style.css
2. Under headings (you will find a lot of h1, h2 etc. add a new parameter say h8, I have used h8.
3. Find the following in style.css:

h3 { font-size: 24px; }

h4, h5, h6 { font-size: 20px; }

h7 { margin-left: 70px; }

and add this below it:

h8 { font-size: 16px; font-weight: normal; }

you can change it as per your wishes.

6. To show Category title on each category page:

find:

<div id=”wrapper”>

<div id=”content-wrapper”>

add below:

<p><h9>Category: <?php single_cat_title(); ?></h9></p>

as you see I have added a new header parameter h9 for the titles shown on the category page

The properties for h9 in my style.css are:

h9 { font-size: 17.5px; margin-left: 20px; color: #5186b1; }

8. To show category description below the title on each category page:

find:

Category: <?php single_cat_title(); ?>

add below:

<p><?php echo category_description(single_cat_title()); ?></p>

the ‘p’ tag is for paragraph formatting.

Thank you for reading, all the best.