What’s up with your 404 page?

Do you have one?
Do you want one?
Do you have any idea what a 404 page is and why you need one?

For many this might be the first time you’ve even heard of a 404 page; but whether you have or not is irrelevant–fact is, you need one.

Let’s let Wikipedia define what a 404 page is:

The 404 or Not Found error message is a HTTP standard response code indicating that the client was able to communicate with the server but either the server could not find what was requested, or it was configured not to fulfill the request and not reveal the reason why. 404 errors should not be confused with “server not found” or similar errors, in which a connection to the destination server cannot be made at all.
http://en.wikipedia.org/wiki/404_error

*YAWN*

Let me break it down for you in layman’s terms. If you accidentally enter a bad URL at this site, or horrors to Betsy–if I have a dead link, you’ll be redirected to my 404 page. The page’s purpose is to say, “NO ONE and NOTHING is at this URL, but hey, thanks for stopping by!”

Now, WordPress themes normally come equipped with a boring-shmoring 404.php file. And most designers will include one just for grins–for instance, before I made slight alterations in mine it looked like the image beow.

And if I opened the file via my WordPress Theme Editor, FTP program, text editor, File Manager, or however I access my web files that day, it’d look like the image below.

I didn’t want it to stay that way–too blah.

There are many, many creative ways to tackle a 404 page so people will stick around your blog a little longer; after all, isn’t that what you want?

To help you muster up ideas, let me show you how I have mine set up here in OMSHville.
Click image below to go straight to live 404 page to view.

How did I do this? I made an image I wanted to include and uploaded it to the server. After that I keyed in some words and links directly within the 404.php file and uploaded that saved file to my server.

What if I don’t have a 404.php in my theme file?

If the theme designer didn’t include a 404.php file within your theme, you can easily make one of your own.

First, download your WordPress page.php file and open it in a html editor.
Save the new file as a 404.php file.
Finally, strip all the unnecessary code within the content area, filling in your own.

Let me give you an example using the page.php in WordPress’ default theme, “TwentyTen”.

It looked like this right after I downloaded it (before any changes were made):

<?php get_header(); ?>

		<div id="container">
			<div id="content" role="main">

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

				<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
					<?php if ( is_front_page() ) { ?>
						<h2 class="entry-title"><?php the_title(); ?></h2>
					<?php } else { ?>
						<h1 class="entry-title"><?php the_title(); ?></h1>
					<?php } ?>

					<div class="entry-content">
						<?php the_content(); ?>
						<?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?>
						<?php edit_post_link( __( 'Edit', 'twentyten' ), '<span class="edit-link">', '</span>' ); ?>
					</div><!-- .entry-content -->
				</div><!-- #post-## -->

				<?php comments_template( '', true ); ?>

<?php endwhile; ?>

			</div><!-- #content -->
		</div><!-- #container -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

You must keep the header tags, but since you don’t need to show posts on a basic 404 page, I’ll show you how to edit out the code that calls that information.

Remove this:

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

				<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
					<?php if ( is_front_page() ) { ?>
						<h2 class="entry-title"><?php the_title(); ?></h2>
					<?php } else { ?>

You’ll write your own header text between the header tags like this:

<h1 class="entry-title">404 Page - Alert!  Alert!  404 Page</h1>

Or, y’know, don’t write that…think of something better.

After that, you need to remove another small snippet of code below the header tag.

<?php } ?>

Then, you’ll need to take out all the unnecessary code within the content area, because you’re going to fill in your own content. What is unnecessary? This:

<?php the_content(); ?>
						<?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?>
						<?php edit_post_link( __( 'Edit', 'twentyten' ), '<span class="edit-link">', '</span>' ); ?>

Finally, delete out this too:

<?php comments_template( '', true ); ?>

<?php endwhile; ?>

Then SAVE and do a dance, because that’s all there is to it.

This is the code you have left after stripping all the other code.

<?php get_header(); ?>

		<div id="container">
			<div id="content" role="main">

						<h1 class="entry-title"><?php the_title(); ?></h1>

					<div class="entry-content">
						<p>This is my content.</p>
					</div><!-- .entry-content -->
			</div><!-- #post-## -->

		</div><!-- #content -->
</div><!-- #container -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

At this point, you can add in an image or text, then save your 404.php file and upload it into the theme’s directory on the server.

Are there any 404 Page No-No’s?

Well, since you asked, there are a lot of opinions regarding what should and what should not be on a 404 page. Quite personally, I think you can put whatever you want if yours is just a personal blog, but if you’re using it for business, obviously being professional wins out over sarcastic; that is, unless you’re in the business of being a comedian – in which case, YOU ROCK.

The basic things you should NOT do:

• Don’t turn your 404.php page into a redirect to the home page. That is irritating. Definitely include a link back to the home page for their convenience, but visitors need to control their own experiences online; don’t force them to go somewhere they weren’t trying to go.
• This is especially important if yours is a business website. GIVE THEM LINKS. They could have been trying to go to any number of places on your site; help them along. Suggest searching again, provide a link to your sitemap, provide your Top 10 most popular links, just don’t leave them hanging.

  Again this is more valid for business or e-commerce than just personal blogs, but hey, if you are a personal blog, why not have a link lovefest with your site? You like your site, don’t you?

• Don’t include music. Oh wait, that includes all sites, all pages, everywhere. Sorry, just had to get that in.
• Many people will say NOT to include the numbers “404″ because not everyone knows server error numbers, nor do they care. However, I think it is always good for people to learn, so I include it. If you’d like to see some interesting ways people have dudded up their 404 pages, check out the 404 Research Lab.

Okay, so now you know how to go forth and create a slammin’ 404 page for your lost visitors.

PLEASE REMEMBER: Not all themes are coded the same so don’t just cut and paste from this blog post and expect it to work in your own theme file. This tutorial is to serve as a guide only. You can do it! I know you can!

First published in Feb. 2008, this is an oldie, but a goodie.