WeDesignerWall currently has a pretty good list of WordPress Theme Hacks. This is a good resource if you either trying to create your own theme or customize someone else’s.

These is also a section on one way to get customized titles. They use this example:

<title>
    <?php
    if (is_home()) {
        echo bloginfo('name');
    } elseif (is_404()) {
        echo '404 Not Found';
    } elseif (is_category()) {
echo 'Category:'; wp_title('');
} elseif (is_search()) {
    echo 'Search Results';
} elseif ( is_day() || is_month() || is_year() ) {
    echo 'Archives:'; wp_title('');
} else {
    echo wp_title('');
}
?>
</title>

I personally use something similar for this page:

<title>
<?php /* Title for homepage is "blogtitle | blogdescription", all other pages get "pagetitle | blogtitle" */
    if (is_single() || is_page() || is_archive()) { wp_title('',true); echo ' | '; bloginfo('name'); } 
    else { bloginfo('name'); echo ': '; bloginfo('description'); } ?>
</title>

In my most recent blog design I’ve created a single page for all of my post archives. Previously, I had links to my monthly archive pages in the sidebar. After blogging for about 14 months, this list became a little bit unwieldy. My solution was to move the entire archives section out of the sidebar, and into its own page. The archives page is now more prominently linked from the main navigation bar.

Unfortunately, doing all of this in WordPress is not quite as straightforward as one might hope. Now that I have mine all set up, I figured I’d post a walkthrough of how to set up something like my archive index page.

Get A Plugin To Do the Dirty Work

Unless you’re interested in writing the PHP code and MYSQL queries to retrieve all of your archives in an organized fashion, a plugin is the way to go. After a quick Google search, I found the SRG Clean Archives plugin. This plugin is quite nice I’ve found. It’s realatively easy to implement and also (and importantly), it’s also very easy to modify to fit your site design.

The plugin will give you a list of all your post titles, organized by month. There is also the nice feature where the post titles begin with a post date. Check out the clean archives demo page for an example.

Simply install the plugin like any other normal plugin and then activate it.

Set Up the Archive Page In WordPress

The next step is to set up the actual archive page in WordPress. There is a tutorial in the WordPress codex about how to do this called Creating An Archive Index. I’m just going to briefly outline the steps here.

archives.php

Open your archives.php file. If you’re using a basic template, then this file probably already exists. If you’re using the default Kubric theme, your archives.php file will look like this:

<?php
/*
Template Name: Archives
*/
?>

<?php get_header(); ?>

<div id="content" class="widecolumn">

<?php include (TEMPLATEPATH . '/searchform.php'); ?>

<h2>Archives by Month:</h2>
    <ul>
        <?php wp_get_archives('type=monthly'); ?>
    </ul>

<h2>Archives by Subject:</h2>
    <ul>
         <?php wp_list_categories(); ?>
    </ul>

</div>

<?php get_footer(); ?>

As always, I would suggest making a backup of this file before changing anything. Now modify the archives.php file to look like this:

<?php
/*
Template Name: Archives
*/
?>

<?php get_header(); ?>

<div id="content" class="widecolumn">

</div>

<?php get_footer(); ?>

If you’re using your own template (like I am), then you may need to either update or create the archives.php file to make sure it is consistant with your blog design. A good starting place for this is to simply copy your single.php file to your archives.php. Now, delete the entire “loop”.

Note on Page Templates You can create any kind of page template you want. All you need to do is insert the following code at the very top of your PHP file.

<?php
/*
Template Name: template-name
*/
?>

Make sure your archives.php file starts with these lines, or else you’ll be banging you head against the monitor trying to figure out while ‘Archives’ isn’t listed as an option in the Page Template dropdown menu. Believe me, I speak from experience.

Create A Page In WordPress

Now have to set up a plain old page in WordPress.

1. Login to the WordPress Admin area
2. Go to Manage -> Pages
3. Click Create a new page
4. Enter an appropriate title. This will be the title of your archive index page.
5. Leave the content area blank
6. In the Page Template box, select Archives.
7. In the Page Slug box. Type something suitable as this will be the permalink for your archives page (http://www.your-blog-name.com/page-slug/).
8. Click Save.

Link To Your Page

Now obviously, you have to create a link to your new archives page. We already set it up, complete with the URL. Yours should be in the form of http://www.your-blog-name.com/page-slug/. Just make a link to it somewhere on your site.

Call the Plugin

As you’ll notice, our fancy Archive Index is empty. In order to get all of our archives in there, we have to use a simple PHP function to call the SRG Clean Archives plugin.

Open your archives.php file again. Find this section of the page:

<div id="content" class="widecolumn">

</div>

Now add the following PHP function to call the plugin:

<div id="content" class="widecolumn">
    <?php srg_clean_archives(); ?>
</div>

Save the archives.php file and refresh your browser. You should now see a nice list of all of your archives.

Customization

As I noted earlier, the SRG Clean Archives plugin is nice because it’s easy to modify if you want to. The Clean Archives website is well documented and the plugin contains a readme file explaining this as well.

The default style for SRG Clean Archives is to output the month and year, surrounded by <strong> tags. You might want something else, like a list or header tags.

To change this, open the srg_clean_archives.php file in your plugins folder and find the following line:

 echo get_archives_link($url, $text, '','<strong>','</strong>');

Modify the strong tags to suit your needs. For example, mine now looks like this:

 echo get_archives_link($url, $text, '','<h2 class="archivemonth">','</h2>');

You can find more information about this on the SRG Clean Archives plugin website.

SRG Clean Archives also provides you with class names so that you can style list however you want in your CSS. I’ve added the following styles to mine:

/* For Archive page */
h2.archivemonth {margin:30px 0 0 0;padding:0;}
    h2.archivemonth a:visited {color:#9db550;}
ul.archivelist {border-bottom:1px #ddd solid;list-style:none;margin:0;padding:0;}
    ul.archivelist li {border-top:1px #ddd solid;}
        ul.archivelist li a {display:block;padding:2px 0 0 20px;}
        ul.archivelist li a:link, ul.archivelist li a:visited, ul.archivelist li a:active {color:#000;}
        ul.archivelist li a:hover {background-color:#eee;color:#000;text-decoration:none;}

 

Note: I changed SRG’s default class name from ‘postpermonth’ to ‘archivelist’.

That’s All

Well, that’s pretty much it. I hope you guys find this useful. Feedback and corrections are always appreciated.

Update 2/25/09: This method was tested and works on SRG Clean Archives version 2.1. This version is old! Please check out all of the feature upgrades for the plugin from it’s home page. If you still want to proceed with my method, you can download the plugin here:

• SRG Clean Archives: Version 2.1

I’ve been reading Roger Johansson’s articles on 456 Berea Street for quite some time now. I think that I originally found his site when I was looking for a more graceful way to make transparent custom corners using CSS. I gratefully used his tips on the borders, and immediately subscribed to his feed.

Even though I have been reading Johansson’s newer stuff, I hadn’t taken the time to look back through his archives until last week. There is some really great stuff in there, I have to say.

CSS 2.1 Selectors

One of the first articles that I found was his 3-part review on CSS selectors. There’s not really any new information in this series, it is however a very elegant and concise review of them.

• CSS 2.1 selectors, Part 1

I don’t know about other people, but I’m constantly getting the Child (>) and Descendant (+) selectors confused. And as far as remembering the syntax for Attribute selectors, forget it.

Also, for the bleeding edge folk, there’s another article on CSS 3 selectors as well:

• CSS 3 selectors explained

Document Titles

The next article I found that was extremely useful was about document titles.

• Document titles and title separators

I’ve actually been trying to decide how to do the document titles on this website for awhile now. Well, at least, every time I remembered to think about it I thought to myself, “Oh yeah, I hate the way that looks. I should do something else. Hmmm.” I would then promptly forget to do something else.

The default style for WordPress blog titles goes something like this:

Blog Title » Blog Archive » Post Title

I didn’t take me very long to realize that I hated this format. First of all, it’s way too wordy. Second of all, the most important information, the post title, is left all the way at the end.

For instance, this post would end up looking like this in a search engine:

NerdStarGamer » Blog Archive » I'm Late To The 456 Berea Street Party

Yuck. Every single hit on a search engine will start “NerdStarGamer » Blog Archive”. Even worse, monthly archives look like this:

NerdStarGamer » 2007 » May

Changing the document title tags requires editing small bit of PHP and using the WordPress template tags If you want to serve up anything other than a static message. At first I took the advice in a Pearsonified article, The Simplest, Most Effective SEO Move You Can Make, which conveniently provides you with the appropriate PHP code.

Unfortunately, I wasn’t quite satisfied with the solution. It was better, but I had lost my website name in most of my titles. After reading Johansson’s article on the subject, I decided I liked his solution the best. So, now I’m sporting the 456 Berea Street-style document titles. Here is the code that I used, if you’re interested:

<title><?php if (is_single() || is_page() || is_archive()) { wp_title('',true); echo ' | '; bloginfo('name'); } else { bloginfo('name'); echo ': '; bloginfo('description'); } ?></title>

Final Note

There’s all sorts great stuff on 456 Berea Street. I have a lot more left to read. One of the best features on the site has got to be the “Best of Feature”. It’s easy access to Johansson’s own list of “most useful, interesting and/or thought provoking” articles.

• Best of 456 Berea Street

Enjoy.