in Start

Adding, Customizing Your 404 Page in WordPress to Be Helpful For Your Users

Creative 404 via CSS-Tricks.com

[This post is part of the Ultimate Guide to Launching a WordPress-Powered Blog series.]

Your 404 Page is the page that shows up when a search engine or a visitor can’t find a particular page.

Technically speaking, a 404 or ‘Not Found’ page is an error message created when the client (blog visitor) is unable to find the particular piece of information that was requested from your blog’s server, like an image, media, blog post, comment, and other such things.

And I can guarantee that users and search engines are making contact with your broken links daily – so how are you going to fix those links and capture the attention of an interested visitor and user?

The first answer is to fix broken links (and you can read how I do this one way here) but there’s no way that you can possibly capture every bad link, especially the links that are coming to your site that are simply misspelled and/or bad!

So your job, therefore, is to make your 404 page helpful and usable – more usable and feature-rich than what typically comes out of the box.

You see, most 404 pages in WordPress are nothing special – in fact, they are rather boring and drab. More than likely you’ll see something like this:

404 - Not Found

And here’s another simple example from another blog theme:

Another 404 page

Not too helpful, right?

But, if you take a look at my example 404 page (click here for a broken link) you’ll see that I’ve crafted it to actually be quite helpful:

My 404 Page Template

An Overview of My 404 Template:

What you’ll find in my 404 page are the following elements:

  • Clever or silly image – I’ve found that you can give a little “spice” to your 404’s by having a silly image.
  • Content that explains why someone might be here as well as solutions.
  • Popular pages that the user might want to visit.
  • I’ve included links to Twitter and Facebook as well as options to Subscribe. Might as well, right?
  • Popular (and strategic) blog posts that you might want to get them to visit.
  • Google Custom Search ability right in the 404 page.
  • Next I’ve listed out the last 10 blog posts automatically since I’ve discovered that most bad queries happen to the most recent blog posts. This is especially true if I’ve actively editing bad links and correcting broken links – the only stuff that will be broken is the newer posts!
  • Final option to email me directly, just in case. I do this to really let them know that I want to help them find what they were looking for! This is also helpful because it’ll give them an opportunity to let me know about something that might be broken on my blog.

Of course, I’ll modify this page overtime as things change or as I add more pages for people to jump into if they get to the 404 page.

Creating or Modifying Your 404 Template:

There she is...

Many of the WordPress Themes that your already using will have a 404.php file that houses your 404 page template.

For example, the theme that I’m using has a 404.php file already in the theme files (see at the right).

If you do have this 404.php file then you’re already good to go and can begin modifying the template with your own text, images, and post query calls.

But, if you don’t have a 404.php file in your template folder then you can easily create it manually by adding the file and then adding the relevant code.

Please note that there is no guarantee that the following code will work with every single WordPress Theme but this is a great place to start (this is the most basic):

[cc]

Error 404 – Not Found



[/cc]

You would then customize the template to work specifically with your theme.

Another option is to simple copy your index.php file and then name the copied file 404.php and then adjust the contents within the template to a better title and with the elements that you’d like to have.

For example, the code that I’ve used to create the loop for the last 10 blog posts is as follows:

[cc]

    query_posts('posts_per_page=10');
    if (have_posts()) : while (have_posts()) : the_post(); ?>

  • “>

[/cc]

Make sure that it gets captured by your server by adding this to your .htaccess file:

[cc]
ErrorDocument 404 /index.php?error=404
[/cc]

In this way you’ll be able to send all your visitors to your 404 page by your web server by configuring it for this custom 404 error handling.

And that’s about it! Have fun with it but ultimately make it practical and super-helpful. Would love for you to share your 404 pages with me so let me know and give me a link to check out!

Enjoy.

[This post is part of the Ultimate Guide to Launching a WordPress-Powered Blog series.]