Follow these Easy Steps to Customize Your WordPress 404 Page!

Usually, the WordPress 404 page displays a typical message when a page or post URL no longer exists on your site. When this happens, the visitor will usually use their browsers back button to return to the previous page on your site or simply continues their journey to another site!

The object is, once the visitor are on your site, you want to do everything you can to keep them there. Therefore, you want to optimize your WordPress 404 page by offering your visitors some options that will help them find the information they were looking for or related information. The easier you make things for your visitors, the better odds you have that they will use the additional search options on your customized 404 page.

You simply add the following code to your 404 page to help retain your visitors from outdated links from other sites and search engines.

Code to add to your 404 page:
<p>Page Not Found, Error 404</p>
<p>The page that you are looking for, no longer remains/exists on this site.</p>
<p>Perhaps you could find what you are looking for by searching our site archives!</p>
<b>Search by Page:</b>
<ul>
<?php wp_list_pages('title_li='); ?>
</ul>
<b>Search by Month:</b>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
<b>Search by Category:</b>
<ul>
<?php wp_list_cats('sort_column=name'); ?>
</ul>

You could replace the <p>Page Not Found, Error 404</p> with <h1>Page Not Found, Error 404</h1> if you require larger text!

This works out ever well, helping your visitors find what they were originally looking for and it also increases the pageviews on your site. However, you aren't finished yet. You should also add a custom Google Search on your 404 page as well. This is easy to do, and again, it helps your visitors find the information that they were looking for or related information and increases your sites pageviews as well. Its a win, win situation!

Code to add for the Custom Google Search:
<!-- Google Custom Search Element -->
<div id="cse" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">// <![CDATA[
// < ![CDATA[
google.load('search', '1');
google.setOnLoadCallback(function(){
new google.search.CustomSearchControl().draw('cse');
}, true);
// ]]></script>

When you are finished, you should have something which look like this below:

For further information about 404 page, read this previous blog post. - 404 File Not Found Error Page! -

Hope this blog post was helpful to you, "Follow these Easy Steps to Customize Your WordPress 404 Page!"

Spunky Jones.

1. Add a Google Custom Search Page to your WordPress Blog
2. How to Deal with Your 404 Page Errors
3. Stop! Blog Scrappers with the WordPress RSS Footer Plugin
4. How to Remove the WordPress Generator
5. Golden Harvest Classic WordPress Theme
6. Meet Our New, “SEO Top Tip” WordPress SEO Plugin!
7. Dealing with WordPress “Missed Schedule”
8. How to Remove, “Comments are Closed” Message in WordPress
9. Getting the most out of the Display Scheduled Posts Plugin!
10. Robots.txt for WordPress SEO