• Home
• About
• Contact
• Resources
• Subscribe

Creating a custom Error 404 page

Visitors come to your site for something in particular and helping them find it, or giving them some alternatives is what good Webmasters do.

Presenting your visitors simply with Error 404 Not Found when a resource cannot be located is not very helpful and may just be their ticket to move on.

Ensuring that you have a functioning error page in place is something you should do early on in the development of your site. Ensuring it’s a helpful, friendly and informative error page is even better.

Most WordPress themes include a default error page (404.php), which is displayed whenever an invalid URL is requested. The default error page, however, is typically vague, bland and just plain inadequate for a site of your caliber. Right?

Right! So let’s take a look at creating and customizing an error 404 page that presents your visitors with helpful options and keeps them on your site longer.

Creating an error 404 page

If your current theme doesn’t have a 404 template, there’s a few ways you can easily create one.

1. Copy the template from the default theme and modify it to suit your needs (discussed below).
2. Use the “page.php” template if your theme includes one.
3. Copy index.php from your current theme, rename it 404.php and modify it to suit your needs, removing all code portions pertaining to posts or comments.

Customizing an error 404 page

At this point you have a functional error page, though not a very friendly one—let’s edit it to better accommodate your visitors.

To edit files I prefer to use a standalone text editor then upload the files when completed. If you prefer, use the WordPress theme editor—open the WordPress admin panel and go to Presentation » Theme Editor, then choose the file to edit (404.php).

A basic error page was included in my current theme, providing a few options for visitors to choose from. Here’s the code, slightly modified:

<?php get_header(); ?>

	<div id="content_box">

		<div id="left_box">

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

				<div id="content_inner">
					<h1>Sorry, I can't find that...</h1>
					<div class="format_text">
						<h2>Try one of the following:</h2>
						<ul>
							<li>Press the "back" button on your browser.</li>
							<li>Go to the <a href="<?php bloginfo('url'); ?>">home page</a>.</li>
							<li>Choose from the navigation menu on the left.</li>
							<li>Try searching using the form on the right.</li>
						</ul>
					</div>
				</div>
			</div>

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

		</div>

		>?php get_sidebar(); ?>

	</div>

<?php get_footer(); ?>

The above code produces the following:

Definitely better than just Error 404 Not Found, but it could still benefit from a bit more imagination.

The sky’s the limit on how you can tailor your error 404 page.

Approach it from a visitor’s perspective—what would you want to see when visiting another site if the content you were seeking was not available?

• Related articles based on your current request?
• A category listing of available articles?
• An advanced search form?
• All of the above?

This site’s custom error page isn’t anything special, but it does have a couple of extra items tossed in for guidance to lost travelers.

There’s no point including items which are always available in the sidebars. For instance, on this site the Post Categories and Recent Entries are aways visible, so I’ve included the Monthly Archives and available Feeds in the body of the error page.

You can include whatever portion of your blog that you want, and with WordPress it’s quite easy. Below are a few code snippets which can be used to insert some common elements of a WordPress blog into your error 404 page.

To display your Post Categories, use this code:

<?php wp_list_categories('title_li=0'); ?>

To display your Monthly Archives, use:

<?php wp_get_archives('type=monthly'); ?>

To display your Search Form, use:

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

To display your Tag Cloud, use:

<?php wp_tag_cloud('smallest=1&largest=9&'); ?>

So there you have it—hopefully I’ve provided enough information to motivate you into creating that killer 404 Page you’ve always wanted.

If you create a “gem”, leave me a note so I can check it out.

For further information on this subject, check out Creating an Error 404 Page in the WordPress codex.
 
For some interesting error 404 pages, visit Area 404.