Hosting Tutorial & Guide

How to Create a Custom Error 404 Page for WordPress

updated on Sep 14, 2014
How to Create a Custom Error 404 Page for WordPress A "404 Error Page Not Found" page is not lovely when a visitor tries to access your WordPress blog post. If you are stuck to this situation, this tutorial can guide you through creating a custom error 404 page for WordPress to let your visitors know what has happened to the pages they are accessing and keep them staying on your site instead of going away immediately.

Error 404 occurs when a visitor tries to reach a non-existent page on your site. This can be caused by a broken link on some other sites, a page that has been deleted, or the mistyping of the URL. Whatever the reason is, you should customize the 404 page to show some useful information to encourage your visitors to browse your site, or you may lose a large amount of traffics.

Edit an Error 404 Page in the Existing Theme

The basic error 404 template named 404.php is included in the default WordPress theme as well some others. If the current theme of your site has the file, WordPress will automatically display the template to visitors encountering the "Page Not Found" error.

The default 404.php file has a simple structure that features tags for displaying the header, sidebar, footer, and an area for your custom message, just as follows.
<?php get_header(); ?>
   <div id="content" class="narrowcolumn">
     <h2 class="center">Error 404 - Not Found</h2>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
The default template includes the basic information, but to make it more user-friendly and present the exact content that you want to show your visitors, you need to follow the several simple steps below to customize the message in the template file.
  1. Log into your WordPress admin panel.
  2. Choose the Appearance menu.
  3. Go to the Editor page.
  4. Click the link for 404 Template on the top of the list of files.
  5. Revise the text within the H2 heading with your own words that you want to tell your visitors.
  6. Click to save the changes.

Create an Error 404 Page

If your theme does not include the basic error 404 template, you can also create one by yourself by copying the 404.php file of the default theme to your current theme. Hoever, the process might be a little bit more complex, because the following steps might not be applicable for some certain themes.
  1. Copy the file /wp-content/themes/default/404.php into the directory of your current theme.
  2. Revise the error message in the way we discussed above.

A Good Theme Is Important

A good theme that includes 404.php file helps a lot and saves much energy in creating a custom 404 error page. So if you are using a theme without the file and desiring to set up an attractive and effective error 404 page, we suggest you to purchase another high quality theme to make the process easier.

There are thousands of WordPress theme marketplaces out there, among which Elegant Themes is a good one that offers elegant themes at an affordable price. Generally, it gives you the following advantages.
  • $39 for the whole package of 86 high quality and responsive themes.
  • WordPress technical support with dedicated support staff.
  • Advanced features including shortcodes, page templates and theme options.

Other Steps to Make Your Custom Error 404 Page Dynamic

You have had a custom error 404 page that contains your apology or something else, but you may also need some more dynamic content to encourage visitors to search your site as well as to make the page more SEO friendly. In this case, you need to finish the following things.

Add a Search Form

Firstly, you should add a search form to the basic 404 page to make it helpful for visitors looking for something on your site. A search form allows them to search for what they want instead of leaving with the feeling of lost. To complete this step, you can add a single line to the default 404.php file, just as following.
<?php get_header(); ?>
   <div id="content" class="narrowcolumn">
     <h2 class="center">Error 404 - Not Found</h2>
<?php include(TEMPLATEPATH . "/searchform.php"); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Use Redirects

Also, you can use redirects so that visitors will get redirected to your home page or somewhere else you want them to go instead of lingering on the error 404 page. Now you can start by editing the header.php file of your theme. This can be done by adding the following lines to the meta tags at the top of your header.php file.
if (is_404()) {
 $redirectHome = get_option('home'); ?>
<?php echo $redirectHome; ?>
Then, you should edit your 404.php like the following.
<?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(); ?>
Test Your Error 404 Page

When all the works have been done, you need to test your custom error 404 page to make sure that it works. You can just type a URL that you know it does not exist on your site. For example, the URL can be like this:


There is a possibility that your server does not automatically bring you to your custom error 404 page. Then what should you do? Don't worry. You can modify the .htaccess to make the page work. Just add the following line to your .htaccess file.

ErrorDocument 404 /index.php?error=404

But if WordPress is installed in a subfolder instead of the root directory, you should add the following line to modify the .htaccess file.

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