Total Followers 132,503
This tutorial will teach you how to create an error 404 page for your WordPress powered site. If you already have an error 404 page you will learn how to make it a bit more user-friendly and dynamic.
An error 404 is when a visitor tries to access a page that does not exist. Sometimes people tend to overlook this feature, and never think about designing for it. Taking the time to make a user-friendly 404 page could mean the difference in a user staying on your website, or leaving.
Most chances are you have created your website and checked multiple times to be sure that every link leads to somewhere. Eventually over time you may forget about a link that leads to a post you removed, or possibly changed the name to. Even if a visitor is searching for a page directly and they don’t get it right, then they will be taken to the error 404 page.
These can be made very user-friendly utilizing the WordPress template tags, and little bit of know-how.
The error 404 is a message that the visitor will receive when a page or post is not located. This is by default included within WordPress, but not with all themes. If you have created a custom theme, then you can increase the chances of a user sticking around even though they didn’t find what they were looking for with a properly designed 404 page.
The basic error 404 template is included with some WordPress themes but not all. WordPress is set to automatically look for the file 404.php when an error 404 is reached. If this file is not present, then it will give a basic error message which is not user-friendly.
If you do not already have this file you can create it. Make a new blank file and name it 404.php
Here is the basic code we will start with:
<?php get_header(); ?> <h2>Error 404 - Page Not Found.</h2> <?php get_sidebar(); ?> <?php get_footer(); ?>
The above code within the 404.php file would give a simple output wrapped in H2 tags that would read “Error 404 – Page Not Found.” – It would also get the WordPress Header, Sidebar, and Footer. These are all optional and should be modified to fit your WordPress theme.
We want to take this a few steps further to achieve our goal. Make a note that I am using the get_header() along with get_sidebar and footer to call our theme template files. Your’s may vary slightly and you will have to adjust your 404.php file accordingly.
First, We will add the search form to our basic 404 page to make it a bit more helpful. This way even if a visitor lands on your 404, they then have the option of searching your site. This is the first method to help users stick around instead of leaving.
<?php get_header(); ?>
<h2>Error 404 - Page Not Found.</h2>
<p>Search:</p>
<?php include(TEMPLATEPATH . "/searchform.php"); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
To create a more dynamic error 404 page you can use redirects so that the user only sees the error briefly, then gets redirected to your home page. This page can be made to be somewhat SEO friendly as well.
For this next example we can start by editing the header.php file of your template. Within the meta tags at the top of your header.php file you can add the following:
<?php
if (is_404()) {
$redirectHome = get_option('home'); ?>
<?php echo $redirectHome; ?>
After this is added we will then edit our 404.php file to look like this:
<?php get_header(); ?>
<h1>Error 404 - File Not Found.</h1>
<h3>Please <a href="<?php bloginfo('home'); ?>" Click here</a> to return to our home page, or you can wait to be redirected in 15 seconds.</h3>
<?php get_footer(); ?>
The above example will allow the user to land on the 404 error page but then automatically take them back to the home page. This will also help users stick around instead of them being left confused and leaving your website. This example may not always be the best solution for everyone but can be helpful to someone looking for something specific on your site.
You can test your 404 error page by typing your URL and following it with a page that you know does not exist.
Example: http://www.yourwebsitedomain.com/test404page.php
That should bring you to your 404 page for viewing and testing.
If by chance your server is not automatically bringing you to your 404.php file we can modify our .htaccess file to make it work. Locate your .htaccess file within your WordPress install and add the following line to it:
ErrorDocument 404 /index.php?error=404
If your WordPress install is not in the root directory you will need to make sure the above code reflects that. If you have installed WordPress into a sub folder then modify your .htaccess like this:
ErrorDocument 404 /YOURSUBFOLDERNAME/index.php?error=404
This will force the use of your 404.php file.
The code below is a full demonstration that will show you some ways you can use the 404.php file to help users that have found something that doesn’t exist. Take a look at it and notice the options we are giving them to keep them around, and to help them find content.
<?php get_header(); ?>
<h1>404 Error</h1>
<p>We cannot seem to find what you were looking for.</p>
<p>Maybe we can still help you.</p>
<ul>
<li>You can search our site using the form provided below.</li>
<li>You can visit <a href="<?php bloginfo?>"</a></li>
<a href="<?php ('url'); ?>" the homepage.</a>
<li>Or you can view some of our recent posts.</li>
</ul>
<p>Search:</p>
TEMPLATEPATH . "/searchform.php"); ?>
<h3>Recent Posts</h3>
<ul>
<?php
query_posts('posts_per_page=5');
if (have_posts()) : while (have_posts()) : the_post(); ?>
<li><a href="<?php the_permalink() ?>" title="Permalink for : <?php the_title(); ?>"><?php the_title(); ?></a>
endwhile; endif; ?>
</ul>
<?php get_footer(); ?>
Anything above can be changed and styled to fit your needs. In the above example we are displaying that there was an error, and then following it with a list of options for the user. We are also still giving them the option to search our site, and have now added the ability for them to view our recent posts. The combination of all of these gives the user that reached the page options. These options can be used to ensure a user doesn’t leave right away if they didn’t find exactly what they wanted.
To make it more user friendly and unique you could consider using the above examples with a different background image of your choice. You can also use html within the 404.php file to make a page all in itself for your error page. Here are some examples of unique error 404 pages for inspiration:
It is always good practice for both WordPress and static HTML sites to make use of the 404 page. Either using ads on it to monetize, or using it to better help your visitors navigate your website. There are many ways to create your own custom 404 error page, and just as many ways to allow it to help website visitors. Use the examples above freely, and experiment with what works best for you.
Get The Only Freelancer crash course you will ever need to read!
My name is Kevin. I am a 30 year old freelance web designer. I have been working with HTML, CSS, and PHP for 6+ years - And creating websites using Wordpress for 3 years. I enjoy creating websites and also doing some graphic design using Photoshop and Illustrator. I hope everyone enjoys reading my articles and I look forward to your questions, comments, and feedback.
Wednesday, February 22nd, 2012 19:20
I have created a 404 Error Template in Photoshop. You can take a look and download it from following location:
http://www.freebiesgallery.com/404-error-page-design/
Thanks,
Thursday, February 9th, 2012 21:47
Nice tips! Thank you!
P.s. Some of the 404 images/website pages aren’t working!
Thursday, October 13th, 2011 04:40
your code is missing a <?php at the beginning of line 26.. FYI
Sunday, October 9th, 2011 13:36
Ohh i like. Some pages are really cool. My favorites are number 9 agens.no and number 4 chrisjennings.com.
I’ll try to create a nice custom 404 too, thanks for your help !!
Thursday, September 1st, 2011 19:30
Good post but i liked most interesting is all the screenshot of different website becoz ppl will get an idea..thank you
Saturday, August 20th, 2011 06:53
This page really helped me alot. I have created a custom 404 page and I don’t think I could have done it without the direction above.
Thanks so much
Thursday, May 19th, 2011 18:30
I like Mundofox.com’s 404 page. I don’t bother too much for 404 page design. I would rather focus more on the main page design than be creative for 404 page. After all it is error and people end up on this page when they can’t find it.
Tuesday, November 30th, 2010 15:13
This is a great tutorial. I like hwo you included other resources at the end. Thanks for sharing.
Friday, September 17th, 2010 13:49
It is also a good practice to log the referring URLs. This will help you to understand where the broken link was and go back to fix it.
Nice 404 collection gallery, thanks Kevin
Thursday, July 1st, 2010 09:42
Nice. I will try this.
Sunday, June 13th, 2010 06:30
thans for sharing this great articles!
Sunday, May 30th, 2010 04:27
It’s really very annoying for me to found out that I will only land to an error 404 site. Pretty much disappointing when I really need to have a particular info from that site alone. Though the design can’t actually result to a solution, it’s still good to see interesting images in this site.
Tuesday, May 11th, 2010 17:39
its really informative….
Monday, May 10th, 2010 15:21
Thank you for another great article. Where else could anyone net that kind of advice in such a best acknowledge proceeding of writing? I be undergoing a display next week, and I am on the look for such information.
Tuesday, May 4th, 2010 21:22
Great article Kevin…I especially like the navigation part. One thing I’ve been doing with my 404 pages is adding a relevant offer and have been seeing sales from the error pages.
I have not however created 404 error pages for my blogs so this article will assist me with that.
Thursday, April 22nd, 2010 21:31
Great examples for the 404 page. I follow similar strategies on most sites…which reminds me…I don’t have one a my personal site. DOOOHH!
Tuesday, April 20th, 2010 15:19
I need to add a 404 page. Thanks for the tutorial, been looking to make my own custom one for a while.
Tuesday, April 20th, 2010 16:56
Have a look at our 404 message http://en.casino-lemonade.com/404/
and push the button :)
Monday, April 19th, 2010 19:23
Great article! It was just what I was looking for!
Monday, April 19th, 2010 02:53
Very informative. Just what I needed to customize my 404 page.
Saturday, April 17th, 2010 12:19
I just want to add another funny 404 message: http://www.blizzard.com/couldnotfindthaturl
Saturday, April 17th, 2010 11:57
Nice!!! Just finished my site today and considered doing a 404 page but don’t know how…this is exactly what I needed.
Friday, April 16th, 2010 18:28
create it and create it with fun so people really want to see your 404 error page :-)
Friday, April 16th, 2010 15:51
WordPress is the best for me :)
Great tips for creating a custom 404 page using wordpress.
Thanks very much for these ideas.
Friday, April 16th, 2010 14:40
Nice! When i get a chance I`ll redo my own 404 page. Thanks!!
Friday, April 16th, 2010 14:05
Nice tutorial, except that I was JUST about to write one almost identical. Like today, haha. Great minds, yes? Anyway a useful 404 page is extremely important and something that is overlooked. A 404 doesn’t have to mean a bounce, it can be another opportunity to provide a good user experience.
Friday, April 16th, 2010 12:43
Great tutorial, i really need to change my 404 page, i haven’t even touched it yet.
Friday, April 16th, 2010 16:18
Every website should have a 404 page, thanks for the great points.
Friday, April 16th, 2010 12:56
Very nice informations! I’ve been looking for this. This article will provide more design aspects for every blog instead of error 404 message. Thanks Kevin!
Get The Only Freelancer crash course you will ever need!
If not, then it's time to learn how to:
You can trust 1stWebDesigner to help you become a better web designer!
- Jacob Cass | Just Creative
Just enter your name and email below and click Get Updates!
Albert Lie
Friday, April 16th, 2010 12:56
Very nice informations! I’ve been looking for this. This article will provide more design aspects for every blog instead of error 404 message. Thanks Kevin!
Patz Illustrated
Saturday, April 17th, 2010 11:57
Nice!!! Just finished my site today and considered doing a 404 page but don’t know how…this is exactly what I needed.
Richie
Friday, April 16th, 2010 18:46
Cool… but when can we see 1wd get a wacky 404 page ;)
elby
Saturday, April 17th, 2010 12:19
I just want to add another funny 404 message: http://www.blizzard.com/couldnotfindthaturl
Duane
Monday, April 19th, 2010 02:53
Very informative. Just what I needed to customize my 404 page.
Casino Lemonade
Tuesday, April 20th, 2010 16:56
Have a look at our 404 message http://en.casino-lemonade.com/404/
and push the button :)
Jimmy K
Monday, April 19th, 2010 19:23
Great article! It was just what I was looking for!
lava360blog
Friday, April 16th, 2010 18:28
create it and create it with fun so people really want to see your 404 error page :-)
Abdelhadi Touil
Friday, April 16th, 2010 15:51
WordPress is the best for me :)
Great tips for creating a custom 404 page using wordpress.
Thanks very much for these ideas.
Jordan Walker
Friday, April 16th, 2010 16:18
Every website should have a 404 page, thanks for the great points.
jeprie
Friday, April 16th, 2010 13:43
Nice. I got to try this.
cooljaz124
Friday, April 16th, 2010 18:12
Like those auto redirection tip :) Nice post .
inspirationfeed
Friday, April 16th, 2010 12:43
Great tutorial, i really need to change my 404 page, i haven’t even touched it yet.
Franco
Friday, April 16th, 2010 14:40
Nice! When i get a chance I`ll redo my own 404 page. Thanks!!
Matt
Friday, April 16th, 2010 14:05
Nice tutorial, except that I was JUST about to write one almost identical. Like today, haha. Great minds, yes? Anyway a useful 404 page is extremely important and something that is overlooked. A 404 doesn’t have to mean a bounce, it can be another opportunity to provide a good user experience.
JC Johnston
Tuesday, April 20th, 2010 15:19
I need to add a 404 page. Thanks for the tutorial, been looking to make my own custom one for a while.
Richard Cummings
Thursday, April 22nd, 2010 21:31
Great examples for the 404 page. I follow similar strategies on most sites…which reminds me…I don’t have one a my personal site. DOOOHH!
Aryan
Thursday, September 1st, 2011 19:30
Good post but i liked most interesting is all the screenshot of different website becoz ppl will get an idea..thank you
Lester
Saturday, August 20th, 2011 06:53
This page really helped me alot. I have created a custom 404 page and I don’t think I could have done it without the direction above.
Thanks so much
Jason Lee
Sunday, October 9th, 2011 13:36
Ohh i like. Some pages are really cool. My favorites are number 9 agens.no and number 4 chrisjennings.com.
I’ll try to create a nice custom 404 too, thanks for your help !!
John
Thursday, October 13th, 2011 04:40
your code is missing a <?php at the beginning of line 26.. FYI
Asif
Wednesday, February 22nd, 2012 19:20
I have created a 404 Error Template in Photoshop. You can take a look and download it from following location:
http://www.freebiesgallery.com/404-error-page-design/
Thanks,
Mihai
Thursday, February 9th, 2012 21:47
Nice tips! Thank you!
P.s. Some of the 404 images/website pages aren’t working!
Ajay
Thursday, May 19th, 2011 18:30
I like Mundofox.com’s 404 page. I don’t bother too much for 404 page design. I would rather focus more on the main page design than be creative for 404 page. After all it is error and people end up on this page when they can’t find it.
Brett Widmann
Tuesday, November 30th, 2010 15:13
This is a great tutorial. I like hwo you included other resources at the end. Thanks for sharing.
Natalie Port
Monday, May 10th, 2010 15:21
Thank you for another great article. Where else could anyone net that kind of advice in such a best acknowledge proceeding of writing? I be undergoing a display next week, and I am on the look for such information.
Queen
Tuesday, May 4th, 2010 21:22
Great article Kevin…I especially like the navigation part. One thing I’ve been doing with my 404 pages is adding a relevant offer and have been seeing sales from the error pages.
I have not however created 404 error pages for my blogs so this article will assist me with that.
xphunt3r
Tuesday, May 11th, 2010 17:39
its really informative….
Lasik Doctors
Sunday, May 30th, 2010 04:27
It’s really very annoying for me to found out that I will only land to an error 404 site. Pretty much disappointing when I really need to have a particular info from that site alone. Though the design can’t actually result to a solution, it’s still good to see interesting images in this site.
Norik Davtian
Friday, September 17th, 2010 13:49
It is also a good practice to log the referring URLs. This will help you to understand where the broken link was and go back to fix it.
Nice 404 collection gallery, thanks Kevin
Gopalan
Thursday, July 1st, 2010 09:42
Nice. I will try this.
Bill
Sunday, June 13th, 2010 06:30
thans for sharing this great articles!