Default Wordpress 404 Page

Fix your WordPress 404 error page

by Ed Gately on December 28, 2009 · 3 comments

in Setting Up Wordpress,Wordpress Resources

Previously I wrote a post about taking responsibility for your 404 errors.  Today I want to spend a little bit of time going over what I’ve done to change my own 404 error page.

You can see on the right what the default template and the default 404 error page looks like.  Needless to say it leaves a lot to be desired.

WordPress actually makes it very easy to program an improved 404 error page.  Yoast.com had an interesting article on a few changes to make an attractive 404 page. I had a couple small issues with the code he shared but I still really liked the general idea.  I made a few changes which seems to work better for me.

However you decide to design your error pages, keep in mind that they are important.  Doesn’t matter if you are using a WordPress blog, and eCommerce website, you don’t want to loose the traffic for visitors that might be coming into your site from an invalid link.

Editing your 404 Error Page is really simple.  For most templates you simply need to edit the file named 404.php  So here’s where I went with it:

## Pull Query Variables and check for exact match ##
$s = htmlentities(strip_tags($_SERVER['REQUEST_URI']));
$s = str_replace(‘/’,”,$s);
$s = preg_replace(‘/(.*)\.(html|htm|php|asp|aspx)?$/’,'$1′,$s);
$posts = query_posts(‘post_type=any&name=’.$s);

## If no posts match perform search ##
$s = str_replace(‘-’,’ ‘,$s);
if (count($posts) == 0) {
$posts = query_posts(‘post_type=any&s=’.$s);
}

## Display results of either direct match or post search ##
echo ‘<ol>’;
if (count($posts) > 0) {
echo ‘<li>Were you looking for <strong>one of the following</strong> posts or pages?’;
echo ‘<ul>’;
foreach ($posts as $post) {
echo ‘<li>’;
echo ‘<a href=”‘.get_permalink($post->ID).’”>’.$post->post_title.’</a>’;
echo ‘</li>’;
}
echo ‘</ul>’;
}
echo ‘If not, don\’t worry, here are a few more options:</li>’;
echo ‘<li><strong>If you typed in a URL&hellip;</strong> make sure the spelling, cApitALiZaTiOn, and punctuation are correct. Then try reloading the page.</li>’;
echo ‘<li><strong>Look</strong> for it in the <a href=”/sitemap”>sitemap.</a></li>’;
echo ‘<li><strong>Start over again</strong> at my <a href=”/”>homepage</a> (and please <a href=”/contact-jason”>contact me</a> to say what went wrong, so I can fix it).</li></ol>’;

Here’s a quick graphic to show you how you might find the 404.php page from the admin of your WordPress site:

Changing Default WordPress 404 page

As you can see here from the code I took the Request URI from the server variables.  I clean it removing the starting slash as well as the ending extension.  I then take and process to see if I can find a name match, if not I remove dashes and do an actual keyword search.

My final result builds a page which includes the above results if there were any.  In addition I add in a possible fix, links to site map and home page, as well as a link to my contact page.

I still want to add the ability for a visitor to just perform a search right there on the 404 page, which technically they can in my header, but we’ll see what I put together who knows.

Related posts:

  1. Why should you be taking responsibility for your 404 errors?
  2. Accessing WordPress functions from external PHP pages
  3. Are you suffering from WordPress Plugin overload?
  4. Five Core Plugins every WordPress Needs
About The Author: Hi, I'm Ed Gately and I write Wordpress Master to help bloggers get started in building a successful online blog using Wordpress. Prior to writing on this blog I spent over 16 years working in Corporate IT and have been spreading my wings on the web for 3 years. To learn more about this website and me visit About Wordpress Master.

{ 3 comments… read them below or add one }

IT Support Sussex January 13, 2011 at 6:54 am

Thanks, that worked a treat!

Reply

frenky May 7, 2011 at 5:22 pm
Kaylana July 6, 2011 at 3:44 am

A million thanks for posting this inoframiton.

Reply

Leave a Comment

Previous post:

Next post: