BlogsWeek.com

Building an index for a WordPress site is not difficult, using a page template. In this post we’ll see how to build a category index, also useful as a general site index.

We have to write a page template called “Category Index” containing the instructions to print the index, then create an empty page called “Index page” using the “Category Index” template. This page can then be called in the sidebar, or in a horizontal menu bar, to show or the index for a specific category or the general site index.

Step 1

We start from a clean Kubrick theme, and begin writing the page template “Category Index”.
We have to create a new text file cat-index.php in the theme folder wp-content/themes/default. In this file we write the following instructions, starting with our chosen template name:

<?php
/*
Template Name: Category Index
*/
?>

We add the instructions to call the blog header, then we open a div called “cat-index” to contain the index body. We retrieve $catID, the id value of the category we are interested in (we’ll see later how to pass this value to our template), so we can print the index title:

<?php get_header(); ?>

<div id=”cat-index”>

<?php $catID = $_GET['cat']; ?>
<h2 class=”title” ><?php echo single_cat_title(); ?></h2>

Now we have to write a query to retrieve from the database the posts belonging to our category; we specify the category id ($catID), the number of posts we want to show (10000, that is all of them), the sorting type (by date) and the sorting order (ascending):

<?php query_posts(‘cat=’ . $catID . ‘ & showposts=10000 & orderby=date & order=ASC’); ?>

It’s now time to open The Loop and, for each post, print its date and its title, followed by a horizontal line to separate the next index entry:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<small>
<?php the_time(‘F j, Y’); ?>
<?php edit_post_link(‘Edit’,'–’,”); ?>
</small>

<h2>
<a href=”<?php the_permalink(); ?>” ><?php the_title(); ?></a>
</h2>
<hr />

Finally we close The Loop and the div containing the index, and call the theme footer.

<?php endwhile; ?>
<?php endif; ?>
</div>

<?php get_footer(); ?>

We can now close the file cat-index.php saving the changes already made.

Step 2

Now we have to create an empty page using the page template we have just prepared. With the command Site Admin, Write, Write Page we open the page creation window. We specify in the Page Title field the text “Index page”, and in the Page Template field we select Category Index, our template’s name. Now we press the “Create New Page” button, and our index page is created; its name, Index page, will then appear in the Pages section of the sidebar, in our site homepage.

If we open this new link in the sidebar, we get the full blog index. It’s not a category index, and it’s not properly styled yet. So let’s start with the first question, how to get a category index.

Step 3

To show a category index we have to add a proper link in the sidebar, or in a horizontal menu bar, or elsewhere in our site.

For instance, to add this link in the sidebar, we open the file sidebar.php in the folder wp-content/themes/default and, after the second line, we add the following code:

<div id=”sidebar”>
<ul>
<!– start code insertion, after the second line of sidebar.php –>
<li><h2>Site map</h2>
<ul>
<li>
<a href=”<?php bloginfo(‘home’); ?>/?page_id=XY&cat=2″>Index of category 2 </a>
</li>
<li>
<a href=”<?php bloginfo(‘home’); ?>/?page_id=XY&cat=4″>Index of category 4 </a>
</li>
<li>
<a href=”<?php bloginfo(‘home’); ?>/?page_id=XY”>General index </a>
</li>
</ul>
</li>
<!– end code insertion –>

In page_id=XY we have to replace XY with the real page ID of our “Index page”; this number can be found in the administration panel with the command Site Admin, Manage, Pages.

When we save the file sidebar.php, in the sidebar we’ll find the following three new links:

Site map
Index of category 2
Index of category 4
General index

If we select them, we’ll find they actually do what they are supposed to do. The style is not perfect, but we can write a few simple CSS rules to take care of that.

Step 4

To modify the index style, we have to add four CSS rules in style.css, a file we can find in the folder wp-content/themes/default.

We open this file, and we add at its end the following code:

#cat-index {
padding: 0 30px;
margin: 0 0 0 10px;
width: 457px;
}

#cat-index h2 {
margin: 0;
padding: 0;
}

#cat-index h2.title {
margin: 0;
padding: 20px 0 30px;
color: red;
}

#cat-index hr {
display: block;
margin: 2px 0;
padding: 0;
}

The first rule specifies the correct position of our index, the second one defines the post titles format, the third defines the index title format, and the last specifies the format of the horizontal rule between two index entries.

Conclusions

Our index page is now complete. We can further customize its styles, modifying the CSS rules in style.css, and its structure, changing the code in cat-index.php.

You can find the relevant files, already modified according to this article, in the Download page. Happy experimenting!