WORDPRESS, WEB DESIGN, AND BLAH, BLAH, BLAH…

What’s up with your 404 page?

WordPress WednesdaysDo you have one? Do you want one? Do you have any idea what a 404 page is exactly?

Well, whether this is the first time you’ve heard of it, or you are very aware of what a 404 page is, you need one – plain and simple.

But first, for those with the question marks, let me define a 404 page.

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*

Oh? Are you back already?

Let me break that down for you in layman(en?)’s terms. If you accidentally enter a bad URL at my site, or horrors to Betsy, if I have a dead link, you’ll be redirected to my 404 page. It is the same as saying, “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. It normally looks something like this on the visitor side of your blog:

WordPress Default Boring 404 Page


And it’ll look something like this when you open up the file via your WordPress Theme Editor, FTP program, text editor, File Manager, or however you access your web files.

The code for your boring WordPress default 404 Page

And if you want to leave it that way, FINE. I mean, not really – that truly is just blah…and who wants BLAH?! There are many, many more creative ways to tackle this that will have people stickin’ around your blog a little longer, and 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 to go straight to live 404 page to view.

New OMSH 404 Page - Whoohoo… It isn’t boring!

How did I do this? The same way I’d write a post. I made an image I wanted to include, uploaded it to the server, and wrote some words and links.

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.
Then, save it 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 DEFAULT WORDPRESS THEME’s page.php.

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


<?php get_header(); ?>

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

    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
		<div class="post" id="post-<?php the_ID(); ?>">
		<h2><?php the_title(); ?></h2>
			<div class="entry">
				<?php the_content('<p class="serif">Read the rest of this page »</p>'); ?>

				<?php link_pages('<p><strong>Pages:</strong> ', '</p>', 'number'); ?>

			</div>
		</div>
	  <?php endwhile; endif; ?>
	<?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?>
	</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Now, you’ll want to keep the header tags, but since you aren’t displaying posts, you’ll need to edit out the code that calls that information.

Remove this:


<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
		<div class="post" id="post-<?php the_ID(); ?>">

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


<h2>404 Page - Alert!  Alert!  404 Page</h2>

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

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('<p class="serif">Read the rest of this page »</p>'); ?>

				<?php link_pages('<p><strong>Pages:</strong> ', '</p>', 'number'); ?>

Finally, delete out this too:


<?php endwhile; endif; ?>
	<?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?>

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

Well, other than write in your own 404 stuff and upload the 404.php file into your theme’s directory.

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. If you’ve questions, please ask.

PLEASE REMEMBER: Not all themes are the same. Don’t assume you can cut and paste into your theme and it’ll turn out just like mine. It just, well…doesn’t work that way. But if you’re stuck like chuck, I’m here to assist (to an extent, obviously, I’ve got to get off this boob tube at some point everyday).

Y'ALL APPARENTLY HAVE THINGS TO SAY, CUZ

17 have spoken up.

Mrs. Wilson

THIS HAS BEEN ANNOYING ME SO MUCH!!! Thank you for this post! YAY! You’re amazing! You have ESP, don’t you?!?!

Love. it.

WordPress Wednesdays » Blog Archive » Do you have a 404 page?

[...] you even know what a 404 page is exactly? This week’s WordPress Wednesdays tutorial will help you create a slammin’ [...]

Steph

“Don’t include music. Oh wait, that includes all sites, all pages, everywhere.”

Have I mentioned lately that I love you? That I love you a LOT?

Also? I hadn’t even looked at my 404. That’s a little pathetic, I know.

Shannon

HAHAHAHA I have conquered my stinking 404 page. Leashes we don’t need no stinking leashes. Go roam free and know in your heart that 404 will be there to catch you when you fall.
Mine is actually funny and cute. How can I share it with you gals?

Shannon

By the way! I will not refill your starbucks card, but I will send more coffee when you run low.

Angella

I am getting on fixing mine this weekend!

OMSH

OH MY STINKIN’ HECK Shannon. Did it take you 2 hours to write all that? I had to skim, but now I’m singing, “Aquarius.”

Um…thanks?

Mrs. Wilson – Of course I’m reading your mind. *der*

Steph – Tee hee. That truly is my personal pet peeve. I really do hate it when people try to control your experience on their blog. If I wanted to listen to music and read blogs, I’d freakin’ open my iTunes.

Angella – I’ll be watchin! I’ll have to enter something like http://dutchblitz.net/isagoober and see what comes up.

hahaha
heheheh
Wait…you’re not laughing…

Kerry

Thanks for another great topic! I got my 404 page added. I don’t think I was very creative, and the font is kind of wonky, but at least I have a 404 page now :-)

Angella

I just logged into my stat counter and saw the “http://www.dutchblitz.net/isagoober”

And was all, “WHAT THE HECK?”

You’re funny.

I’ll fix it this weekend. No time during the week to pay attention…and then I make my site explode and have to IM you to save me AGAIN :)

Shannon

um I think it took me 45 minutes to write that page. Aquarius…… aquarius. when the moon….ok I guess I won’t torture you.

Atomic Bombshell

Very cool tutorial. I have Arcade Games on my 404 page. :D

ktjrdn

I think this is my favorite 404 I’ve ever found. But then, i’m a big Douglas Adams fan…

http://www.flubu.com/comics/Dilbert.389.g.gif

ktjrdn

Ooh, that link didn’t work, you’d have to copy it and paste it in for yourself.

Dutch Blitz » Customize Your 404 Page

[...] did a post on customizing your 404 Error page.  Here is what I have done so [...]

Shannon

I redid my 404 page just for you!

This Eclectic Life

[...] funny sometimes). I wish it was as easy to make an amusing error page for my life as it is to make a 404 error page for a WordPress website. I’d make one that would get me back on [...]

LET YOUR VOICE BE HEARD

Comment if ya wanna.