Codeable info

Personalize Your 404 Page

Posted on by in WordPress Tutorials

The 404 page shows up every time something goes wrong with your site and a users browser can’t load the necessary local files. More specifically if your site is broken, the 404 page is what tells visitors that the site is down.

Most site admins create a completely different template with a blank background for their 404 page; which breaks up the visitors experience. The best way to design a 404 page is to display the related information over your regular sites user interface or theme. This helps by ensuring the visitor still feels included in your site, and shows that things haven’t gone completely awry.

The following tutorial involves editing your active WordPress themes source files so be sure to back up all important data before continuing.

WordPress 404 Page

By default WordPress does not implement a 404 page in your active theme, so it stands to reason that you won’t have a 404 page already created for your site unless your theme comes pre-configured with one. This means that we have to actually create the 404 page for editing.

To begin create a new text file or html source file and name it “404.php” and when that is finished move the file to the root directory of your active WordPress theme. Open the file and input the following code:

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

As you can see the code above utilizes the same editing layout of any other WordPress page. The text or information you would like to display to the reader can be altered by changing the <h2> “Error 404- Not Found” </h2> section of the code. In the “H2″ information section you can also add custom images or create a completely unique error code output. A sense of humor helps visitors deal with the stress of an error code especially if you implement a funny remark such as “oops we screwed up”.

But in order to make the 404 page resemble the rest of our WordPress pages we will need to integrate the related code.

Styling The 404 Page

The next step is to open the “index.php” file related to the active theme. We are then going to copy over each segment of the index.php file to our new “404.php” page; this will ensure our error page information displays within the active WordPress theme.

In your “index.php” file copy the entire “get_header” function segment and paste it into the new “404.php” file in the correlating section. Make sure not to overwrite the 404 text information.

Then in your newly pasted code delete anything that pertains to The Loop of your blog. This will prevent any blog posts or comments from displaying on the new 404 page so that we may display the error code.

For reference The Loop starts with the following bit of code:

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

and ends with this code:

<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>

Next copy the “get_sidebar” and “get_footer” sections of your “index.php” file over to the new “404.php” file. This will ensure that the 404 page reserves an identical sidebar menu and footer as your other WordPress pages.

In some cases you may need to copy over the information from the “page.php” source file as well, but this depends on how your active theme operates. If this ends up being the case copy the information over without overwriting existing codes and commands and delete any duplicates; for instance after copying over both the “index.php” file and “page.php” file you would subsequently have two “get_header” tags- only one is needed.

Giving Proper .htaccess

This next step is not required for every WordPress install, and is only need on select few external WordPress blogs or sites that use custom 404 error messages.

By default if WordPress encounters an error on an external install it will use the designated 404 message for the website. Which means it will use the native error code for the actual host site and not the custom WordPress 404 page that we just created.

In order to utilize the 404 page we just created we will need to add the following code to the .htaccess file located in the root directory of the WordPress install:

ErrorDocument 404 /YOURWORDPRESSINSTALLDIRECTORY/index.php?error=404

The End

Thats it, all done! Now when a visitor encounters a non-existent or troublesome page on your site they will be presented with a fully styled 404 error page. Hopefully this will encourage them to keep browsing instead of leaving the site out of frustration.

)
Codeable info

Comments (3)

Comment by Dave Grimes II says:

I love when site have these. It makes me feel like, even though a page didn’t load… usually because of a bad link… at least they took the time to customize the fail page, usually with something that makes me laugh. You know what I mean?

Comment by Laxman Kasula says:

I use to put the search bar also in 404.php after the page not found……

Comment by Vivek Parmar says:

i have already customized my 404 error page. you can check it out on my blog. Hope you like it

Codeable info