How To Set Up Your Thesis Theme 404 Page To Drive SEO Results

(Reading time: 3 – 5 minutes)

When a reader browses into your blog by requesting a page that doesn’t exist, the web server delivers a 404 error, and may deliver a custom page as well. WordPress is configured to allow such custom pages to be served to the user in lieu of the page or post that the user was requesting. However, the default page is not very useful for keeping reader’s attention.

A better way to deliver 404 errors is to give the user a page full of interesting, compelling content to help her decide to stick around and read what you have to say.

There are several ways to do this, and some of them depend on the theme you are using.

Customizing your Thesis theme

Setting up your custom 404 page in Thesis Theme is easy. I used Sugar Rae’s Thesis 404 tutorial, and it worked perfectly… once I remembered about cutting and pasting…

>>>WARNING: If you cut and paste code from a web page, do NOT be surprised when it doesn’t work. I’ve discussed this before. If you cut and paste Sugar Rae’s code, it won’t work and you will get the problem shown in the screen capture to the right: the “smart” quotes do not paste correctly for source code. They need to be “dumb” quotes.

Bad (red) quotes from cut and paste

You should implement Sugar Rae’s bare bones implementation first, then test it to make sure it’s working correctly. Once it’s working correctly, make sure you understand how it works using the Thesis hook system.

Building Smarter 404 pages

Wouldn’t it be great if your 404 page returned some related pages, instead of a dumb error, or some stupid snide remark?

I think so too, and so did Michael Tyson, who wrote the Smart 404 plugin. I can’t say it any better than he can, so in his words:

When a page cannot be found, Smart 404 will use the current URL to attempt to find a matching page, and redirect to it automatically. Smart 404 also supplies template tags which provide a list of suggestions, for use on a 404.php template page if a matching post can’t be immediately discovered.

This sounded like a great idea, so I embedded his suggested code into Sugar Rae’s Thesis custom hook shown above, and with a minimum of effort I have a new, customized “smart” 404 error page! Here’s my finished implementation:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

/* Custom 404 Hooks */
function custom_thesis_404_title() {
?>
We're checking it out for you.
<?php
}
 
remove_action('thesis_hook_404_title', 'thesis_404_title');
add_action('thesis_hook_404_title', 'custom_thesis_404_title');
 
function custom_thesis_404_content() {
?>
<p>Can't find what you want?</p>
 
<?php if (smart404_loop()) : ?>
<p>Try one of these posts instead:</p>
<?php while (have_posts()) : the_post(); ?>
<h4><a href="<?php the_permalink() ?>"
  rel="bookmark"
title="<?php the_title_attribute(); ?>">
<?php the_title(); ?></a></h4>
  <small><?php the_excerpt(); ?></small>
<?php endwhile; ?>
<?php endif; ?>
 
<?php
}
 
remove_action('thesis_hook_404_content', 'thesis_404_content');
add_action('thesis_hook_404_content', 'custom_thesis_404_content');

Go ahead and test it out. Use a dumb URL like http://website-in-a-weekend.net/foo-bar-header-twit-plugin. Nice, eh?

And remember, if you don’t surf, you’re not allowed to use the word “gnarly.”

Tagged as: design, Links, Programming, Thesis