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:
- Open style.css
- Under headings (you will find a lot of h1, h2 etc. add a new parameter say h8, I have used h8.
- 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.