post

Tweaking the Archives

One great feature of the Twenty Ten theme is that is displays the category description at the top of the archive page, for that category. This is great for search engine optimization (SEO), because you can include keywords in the category description that add relevance to your category archive pages. It is also great for your readers, because they can quickly skim the description and see what the articles listed on the page are all about.

The category description is displayed on the category archive page

The category description is displayed on the category archive page

This is a huge time saver over the premium theme that I use on my other blog, because it does not support this, forcing me to write a long WordPress function that inserts a description on each category page.

The only thing that I do not like about the archive page is the title that the Twenty Ten theme displays. Since my navigation menu shows the category names, repeating them on the page is of little value to the reader. In addition, the Twenty Ten theme uses an h1 tag for this title, which gives a lot of weight to the words “Category Archives” – words that have nothing to do with my blog.

The first thing that I would like to do is make this title go away. The title is controlled by the .page-title class, so this is an easy modification.

.page-title {
display: none;
}

With the title gone, I can turn my attention to the formatting of the category description, itself. I want to make the description standout from the rest of the page text, so I am going to increase the font size and change it to the sans-serif style, which further delineates it from the post text. The category description text is controlled by the .archive-meta class.

.archive-meta {
font-family: "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;
font-size: 18px;
}

The category description now stands out from the rest of the text

The category description now stands out from the rest of the text

The result is a better overall look to the category pages, better SEO and a more intuitive layout for readers. Enhancing your category pages provides a lot of benefits and the changes are not difficult to make.

9 thoughts on “Tweaking the Archives

  1. Hi Roy,

    Thanks for sharing all your tricks. In which file do I have to insert the code for the modifications?

  2. You can also remove the “Category Archives” – words by
    deleting these lines in the category.php page

    <?php
    printf( __( 'Category Archives: %s', 'twentyten' ), '’ . single_cat_title( ”, false ) . ” );
    ?>

    Thus, the titles in other static pages doesn’t get effected.

  3. Pingback: Wordpress, one blog, multiple posts pages | mc's notices

  4. Awesome Roy!

    You have no idea how much that helps :) I so wish I knew more about PHP :) ) Now it looks much better, my niche sites were showing only titles and now at least I can produce pages with full product display from any categories.

  5. Widmaer,

    With the Twenty Ten theme, you can display full posts on the archive pages by removing some code. Copy loop.php into your child theme and then open it up in a text editor and look for this line:

    [cc lang="php"]< ?php if ( is_archive() || is_search() ) : // Display excerpts for archives and search. ?>[/cc]

    This is the conditional statement that forces archive and search results pages to display summaries, instead of full posts. To force the archive pages to display full posts, just remove them from this conditional loop by deleting “is_archive() ||” from that line. Your archive pages will now display full posts.

    Thanks for the question!
    Roy

  6. Hi Roy!

    Thanks for the great tips. Would you know, also if there is any way for me to add a little snippet of code inside the Twenty Ten theme, that would display, the full post and not just a summary?

    Thanks Roy!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>