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.
<?php /** * The template for displaying 404 pages (Not Found). **/ get_header(); ?> <header class="entry-header"> <h1 class="entry-title">Oops...</h1> </header> <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="http://bradsknutson.com/wp-content/themes/bradsknutson/images/404.png" class="aligncenter noboxshadow" /> </div> <!-- .entry-content --> </article> <!-- #post-0 --> <?php get_footer(); ?>
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!