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.]

  • http://www.geekfori.com Matthew Snider

    Great stuff brother. I have always had fun with the 404 pages on my sites.

    • http://john.do John Saddington

      I expect this page to be updated soon…?

      ;)

      • http://ryanhaack.com Ryan Haack

        Oh, snap!

        • http://john.do John Saddington

          wahhhh. ;)

      • Michael

        Lol

  • http://calumhenderson.com/ Calum Henderson

    I’ll have to update my 404! It’s looking a bit dull…

    • http://john.do John Saddington

      jump on it!

  • Chris Langille

    Just so I don’t mess anything up, I would have to edit the .html within the 404.php file to modify this page right?

    I checked in WP under add new page<page attributes<templates, and 404 isn't one of them.

    Thanks dude!

    • Dewitt Robinson

      Same question here.

      • http://john.do John Saddington

        i’m sorry, yes. the answer is yes. you’d have to edit a bit.

    • http://john.do John Saddington

      sure thing chris!

  • Melanie

    Nice tips! I like it. I’m going to put this on my to-do list.

    • http://john.do John Saddington

      ;) let me know when you do it!

  • Meg

    Great idea, John. I’m definitely going to have to update that to make it a little more visually appealing, and user-friendly.

    Quick unrelated question. My Google analytics has been showing no visits for the past few days, which I know is not true. Could something be broken, and what would have caused it? I was thinking maybe it was connected to some tweaks I did in Standard theme last week…

    • http://john.do John Saddington

      hmm. yes. you’ll have to check your settings. did you update the code in the standard theme settings?

  • http://www.tillhecomes.org Jeremy Myers

    Awesome. Awesome. Awesome. I’m doing this later today.

    • http://john.do John Saddington

      ;) cool man!

      • http://www.tillhecomes.org Jeremy Myers

        Ok, mine is up.

        I followed your “template” but added a few theological twists of my own.

        This is a bad link.

        • http://john.do John Saddington

          sweet!

          omg. theist/deist? omg. lol.

          • Mike

            That is funny! Thanks for suggestions and the coding info!

            • http://john.do John Saddington

              sure thing mike.

        • http://ryanhaack.com Ryan Haack

          Brilliant.

          • http://john.do John Saddington

            ;) hehe.

  • http://soundcalledmusic.com Patrick Wells

    Creating a more interesting 404 page was something I did before I even launched my site, but it appears I could put a little more work into it.

    • http://john.do John Saddington

      wow, you’re ahead of the curve!

  • Mike

    This is a great idea, however, I know absolutely nothing about HTML. Is there a way to edit my file with needing to know HTML. I know where to go to get the file and access it but that is it…

    Thank you!

    • http://soundcalledmusic.com Patrick Wells

      There are a lot of plugins out there that do this. I discovered earlier today, however, that the plugin I was using had stopped working with the newest version of wordpress. So far I have not been able to find one that did.
      I think another way to do it would be to create a page and simply copy and paste the html into the page. However you would have to be careful as to WHERE you pasted it or you might mess something up.

      • http://john.do John Saddington

        and…… this is the reason why i choose to do it myself! i really try to limit the amount of plugins that i use (except the ones that i built myself) because i don’t want my blog to be dependent on plugins that might not be updated regularly or might actually end up penalizing my blog in terms of traffic and SEO…!

        better to do it by hand and manually…

        :)

        • http://soundcalledmusic.com Patrick Wells

          I’ve been looking at this same thing. I’ve been trying to do things by editing my theme files manually if possible, (which reminds me, I should start keeping a changelog) and this is just another thing that I ended up killing a plugin for (it’s my second one today as well).

          • http://john.do John Saddington

            haha.

            i enjoy the challenge and danger of editing in live environments.

            ;)

            uahahaha

    • http://john.do John Saddington

      you can edit it via the wordpress theme editor in your back admin.

    • Mike

      OK I was able to get the HTML in the right place and it works! I did that by creating a private page with the information that I wanted went to the HTML code and copied and pasted it to the 404PHP page. It took a few trial and errors to get the right location but it works. Only think is I would like to have some blank lines. But am not sure now how to insert blank line using HTML. Can someone please tell me what the HTML code is for a blank line?

      Thank you!
      Mike Lane

      • http://www.tillhecomes.org Jeremy Myers
      • http://www.tillhecomes.org Jeremy Myers

        Oops..


        • Mike

          Thank you!

        • http://john.do John Saddington

          thanks jeremy!

  • http://www.ziolowyzakatek.blogspot.com Atria

    I admit, when I saw “Eror 404 page” on someone blog I panicked and quickly close the window with a blog.. Well, I see why it is important to have good one. Once I saw a funny picture on 404eror it was a nice suprise, worth of experiencing error 404:)

    John, may I ask you (it’s offtop question, but I couldn’t find a “search form” anywhere on your blog) – what tools do you use to create this “light-silver-flash-effect” (something like.. fading perhabs?) for subscribe Image and other images on right sidebar as well?

    I’d also wanted to ask, how you managed to display this “Posted in Tips with 13 Comments” on the top of your post?

    Thanks a lot!

    • http://john.do John Saddington

      search form is on the right sidebar….?

      • http://ziolowyzakatek.com.pl/ Atria

        O.K. I missed it. There was too much awesomeness in between.

        • http://john.do John Saddington

          ah. doh! this is good to kow though… people need to see it.

    • http://john.do John Saddington

      to answer your other questions, it’s simply wordpress code that lets me do the “posted in tips”. i changed it in my single.php file.

      for the “silver” effect it’s just a “fade” option via css and styling.

  • http://alexspeaks.com Alex Humphrey

    I’ve thought about this, but never done really known how to do it before. Thanks! This is now on my to-do list! Your blog is making my blog awesome! lol

    • http://john.do John Saddington

      sweet! rock it!

  • Sebastien

    I guess this is the only page that many of us don’t really bother with and we end up just making it as boring as possible with out even realising that we are putting off our readers away from our site. What you have show here is a great way of keeping the readers on the site and not feel that they have done something wrong and to not make them feel that they don’t deserve to read the rest of your content. This is something I will defiantly be spending a little more time. Good job.

    • http://john.do John Saddington

      sir, this comment explains A LOT of the core motivation. you are right on!

  • http://www.lifeofasteward.com Loren Pinilis

    Oh. My. Goodness.
    I don’t think it’s ever crossed my mind to have a helpful and useful 404 page such as you do. Cute, yes. Attractive, yes. But one that routes you to top posts – that’s brilliant.

    • http://john.do John Saddington

      it’s worth it since we tend to get a lot of 404s over time.

  • John Finkelde

    This is kinda off topic but who would you recommend for writing some customized code?

    Does your company do that type of work?

    • http://john.do John Saddington

      yup. :)

      • http://johnfinkelde.com John Finkelde

        Cool

        How do I access that?

  • Michael

    Eeeek! Yet another task to add to my list! :)

    Love it!

    • http://john.do John Saddington

      take your time… ;)

  • http://www.taintedcanvas.com Jonathan Sigmon

    Have you been to the VisitSteve.com 404 page?

    http://visitsteve.com/404.html

    It’s very funny. And very awkward.

    (Sort of) worth your time.

    • http://john.do John Saddington

      #LOL i watched the entire vid.

  • Michael

    Holy I no longer feel like a complete noob batman!

    Though I “borrowed” heavily from your format, (ok ok I basically stole it) I have updated my 404 page :)

    This was an day long adventure for me. I hope that I got everything coded the way it *should* be and not just in a way that works. :)

    • http://john.do John Saddington

      great job!

  • http://www.digital-mission.net Phoce

    Great post, great idea.

    Just finished mine (borrowing from your style) but I am happy with the results and enjoyed working the code out for most of it.

    you can check it here http://www.digital-mission.net/fff

    • http://john.do John Saddington

      awesome! well done!

  • http://geekfori.com Graham

    I just tried creating something real quick this morning but I guess I don’t know .php as well as I thought. I’ll have to revisit this later.

    • http://john.do John Saddington

      which blog?

  • http://www.jondale.com Jon Dale

    John, do you have this built into Standard Theme?

    • http://john.do John Saddington

      a 404? not currently customizable.

  • http://www.couponsroad.com Chuck

    Awesome dude, thanks a lot