Creating a Custom 404 Page in WordPress

  • follow us in feedly
Published July 1, 2013 by Brad Knutson
Custom 404 Page in WordPress

In an ideal world, your visitors would never reach a 404 page. No inbound links would be written incorrectly, you visitors would make typos when typing in your URL, every possible page would have unique content, and so on and so forth.

Obviously, this isn’t an ideal world, and 404 pages are a fact of life.

It is our job as web developers and designers to capture 404 page hits and prevent the user from bouncing. A 404 page can be frustrating for visitors and could cause them to give up on your site and look elsewhere.

WordPress makes creating a custom 404 page extremely easy, thankfully, and add whatever content you want to the page.

Determine if you have an existing 404 page

The default WordPress theme does come with a 404 page built in, but not all themes do. Some developers leave them out or forget about them (something I will never understand).

To determine if you have a 404 page, go to your themes root directory. For example, my themes rot directory in my local file system is:


In the theme root directory, look for a file called 404.php. This is the file that WordPress points to when the server returns a 404.

Customizing the 404 template

If you don’t already have the 404.php file, create your own in your theme’s root directory. In this file, we can use any built-in WordPress functions, the loop, etc.

I choose to keep mine simple. I write a short blurb (with a little of my dumb humor) to keep the user’s attention and offer them the option to search for what they are looking for.

 * The template for displaying 404 pages (Not Found).

get_header(); ?>
<header class="entry-header">
<h1 class="entry-title">Oops...</h1>
<article id="post-0" class="post error404 no-results not-found">
<div class="entry-content">
Hmm...I think you broke something.  Well...this is kind of embarassing.  I have a talented team of monkeys working on the problem!  Rather than letting this dampen your spirits, why not try to search for something, instead?
            <?php get_search_form(); ?>
            <img src="" class="aligncenter noboxshadow" />
<!-- .entry-content -->
<!-- #post-0 -->
<?php get_footer(); ?>

Create a 404 Page

I’m really not doing anything special here, just adding a little text, an image, and using the built-in WordPress search form function.


Because you have full control over the template, you can do whatever you want between the header and the footer. Create new divs and style them however you feel is appropriate.

One thing you cannot do on this template is modify the title. You can do that with the WordPress SEO by Yoast plugin on the Titles & Metas page and the Other tab.

Depending on your permalink settings, this may or may not work

If you have custom permalinks set up, just having the 404.php file may or may not work. If you find that this isn’t working, you may need to enter this in your .htaccess file.

ErrorDocument 404 /index.php?error=404

That’s pretty much all there is to it.

Get creative with it!

The following two tabs change content below.
Founder at Inbounderish
Brad Knutson is a Web Developer in the Twin Cities area of Minnesota. He has experience working with WordPress and Drupal, and also has an interest in SEO and Inbound Marketing.

Keep Up-to-Date



See a complete list of topics discussed in blog posts here.

Check These Out

Get 2 Weeks Free! Sign Up Today! Premium Managed WordPress Hosting Genesis Framework for WordPress SEO is complex. Tools should be simple. Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

3 thoughts on “Creating a Custom 404 Page in WordPress

Share Your Thoughts

Your email address will not be shown.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">