Fun With Your Wordpress 404.php File

Published by: christopher
October 9, 2008

A 404 occurs when a file on your webserver is called on by a referring application. Essentially it just means that the file that was called on cannot be found.

Definition by Wiktionary

From HTTP status code #404, “Not Found,” specified by RFC 2616 (Hypertext Transfer Protocol, Network Working Group).

Before we begin, there are a few things to know or that you might want to know.

To ensure that the server finds your 404 page, add the following to your .htaccess file: ErrorDocument 404 /index.php?error=404
A 404 page, whether issued by Wordpress or your Webserver, is pretty standard. Most any site that is a site has a 404 page.
If you don’t already, you really should have a search function somewhere that is visible on every page. If nothing else, you should at least have one on the 404 page if not re-directing.
It is very important for your main content to not be cluttered or confusing on the 404 page. You want your visitor to stay and either find the content they were searching for, or find new content.

A very basic 404.php file.

1
2
3

<?php get_header(); ?>
<h1>404 - File Not Found.</h1>
<?php get_footer(); ?>

This is the default 404.php supplied with Wordpress.

<?php get_header(); ?>
   <div id="content" class="narrowcolumn">
     <h2 class="center">Error 404 - Not Found</h2>
	</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Let’s disect this code really quickly..

We call our header as normal.
The first example just prints to the screen in a h1 tag: 404 - File Not Found.
It then calls for the footer.
The second example contains the same but also contains the default Wordpress 404.php div classes. You can keep these in their entirety, keep the div class names and edit as normal, or just create your own custom classes. I personally create my own custom classes for nearly everything.

Adding a meta re-direct

<?php
if (is_404()) { ?>
  <meta http-equiv="refresh" content="15;URL=http://www.junglejar.com">
<?php } ?>

Meta re-direct to your default Wordpress index

<?php
if (is_404()) {
 $redirectHome = get_option('home'); ?>
 <meta http-equiv="refresh" content="15;URL=<?php echo $redirectHome; ?>">
<?php } ?>

Both examples above will re-direct our users to a different page when a 404 error is issued by the web server. Let’s analyze the code…

First the document is checked to see if we are viewing a 404 page.
The second line in the first example is a simple header meta tag that tells the web server to re-direct us to http://www.junglejar.com in 15 seconds.
In the second exaxmple $redirectHome is declared as your default home page. Wordpress fills this in as yourdomain.com/index.php, if you have Wordpress installed at the root level of the website. If you do not, you will be re-directed to wherever your ‘home’ is.
Whichever snippet you choose to use, example1 or example2, it needs to be added to your header.php file. Look below for an example of my own..

<meta name="description" content="JungleJar offers articles, tutorials, rss feeds, tips and strategies, free Wordpress templates, among many other things to assist webmasters with their respective websites." />
 
<?php
if (is_404()) {
 $redirectHome = get_option('home'); ?>
 <meta http-equiv="refresh" content="15;URL=<?php echo $redirectHome; ?>">
<?php } ?>
 
<meta name="robots" content="index,follow" />

Of course this is not my entire header.php file, but it shows how I added in the snippet in between other meta tags.

Below is an example of how I might edit my 404.php file to somehow let the user know they will soon be re-directed..

<?php get_header(); ?>
<h1>404 - File Not Found.</h1>
<h3>Please <a href="<?php bloginfo('home'); ?>">Click here</a> to go to the main index or simply wait 15 seconds..</a></h3>
<?php get_footer(); ?>

Google Can Assist As Well

If you’re feeling frisky, you might consider using Google.com’s AJAX Search API on your 404 page.