WordPress tips and tricks – custom 404 (error) pages

One of the more underused features in wordpress themes is the ability to create and modify the 404 page - so to try to rectify this I thought I'd run through what I do with 404 pages on Binary Moon (and my other WordPress site). I use this simple technique to try to make errors a bit more and helpful for people who have ended up at the wrong place. I'm hoping that not too many people see the 404 page but just in case here is what I've done.

Basically I duplicate a normal page template and name it "404.php". I then remove "the loop" and add some some static code which explains that there has been an error and a few possible solutions (archives, search).

Finally I use query_posts to add in a new loop which displays links to the 5 most recent articles. Below is the actual code I use on this site for my 404 page (you can see it in action here - http://www.binarymoon.co.uk/9837489)

<?php get_header(); ?>
	
	<h1>404 - Doh!</h1>
	
	<p>Something has gone wrong and the page you're looking for can't be found.</p>
	<p>Hopefully one of the options below will help you</p>
	
	<ul>
		<li>You can search the site using the search box to the left</li>
		<li>You could visit <a href="http://www.binarymoon.co.uk/">the homepage</a></li>
		<li>Maybe what you're looking for is </a><a href="http://www.binarymoon.co.uk/archives/">in the Archives?</a></li>
		<li>Or you could have a look through the recent posts listed below, maybe what you're looking for is there</li>
	</ul>
	
	<h3>Recent Posts</h3>
	
	<ul>
	<?php
	query_posts('posts_per_page=5');
	if (have_posts()) : while (have_posts()) : the_post(); ?>
	<li><a href="<?php the_permalink() ?>" title="Permalink for : <?php the_title(); ?>"><?php the_title(); ?></a>
	<?php endwhile; endif; ?>
	</ul>
	
<?php get_footer(); ?>

Something you may want (need?) to do is to add your new 404 page to your .htaccess file so that when a bad/ non-existant page is accessed the visitor gets your custom 404 instead of your webhosts ugly page. To do this all you need to do is grab your .htaccess file and add the following code.

ErrorDocument 404 /index.php?error=404

That's it - easy as can be.

Now nobody has an excuse not to have a helpful, attractive 404 page. Of course it doesn't have to be helpful (but that IS nice) but can also be funny or amusing - maybe you can find some inspiration here at area 404. Be sure to let me know if you have an unusual or unique 404 page as well.

Share This...

About The Author

Ben Gillbanks

Web Designer, Video Gamer, Blogger, and part time Entrepreneur. Read More

24 thoughts on “WordPress tips and tricks – custom 404 (error) pages

  • Reply ›
    Vlad Akilov

    Very useful tip, I will be implementing this on my own blog, thanks for the code too.

    July 8, 2007

  • Reply ›
    Sadish

    Good Article.

    Actually you do not need to use query posts for this purpose.
    you could very well do wp_get_archives('type=postbypost&limit=6') to pull the latest 6 posts.

    Thanks

    August 3, 2007

  • Reply ›
    Ben

    Sadish - thanks for the tip. I actually wrote my own 404 page a long time ago (at least 2 years) and as far as I know the wp_get_archives command wasn't around - and if it was around I wasn't aware of it :)

    August 3, 2007

  • Reply ›
    Val

    My 404 page provides odd facts for the same day in history (http://www.nthposition.com/404.php) - people might as well enjoy being lost!

    August 6, 2007

  • Reply ›
    Ben

    Val - that's a cool idea :) Not sure where I'd get a list of interesting information from though..?

    August 6, 2007

  • Reply ›
    AskApache

    What about other HTTP status codes? Like ErrorDocument 500 /index.php?error=500, etc... ? All 57 Status Codes

    August 25, 2007

  • Reply ›
    Nate

    Does a custom 404.php page work if you are using the default permalink structure (/?p=xxx)?

    September 11, 2007

  • Reply ›
    Ben

    Nate - as long as you have the ability to create and use .htacces files the 404 page should work fine as described above.

    September 11, 2007

  • Reply ›
    Rel

    My theme already has a 404 error page, and so luckily i just edited it to read how i wanted! thanks for the info. Rel

    December 9, 2007

  • Reply ›
    Ewen

    Great post, I did a very similar thing on our wordpress site and wrote and article about 404 good practice.

    I took a different approach and instead of displaying recent articles I did a site search on what the user may have been looking for (based on the url) and displayed suggested pages.

    Check out http://research.elabs.govt.nz/...ce-for-404-error-pages/ for the article.

    Thanks!

    August 1, 2008

  • Reply ›
    Geoff

    For whatever reason, the default WordPress theme created a .htaccess file on my server, but the code was very different from yours. I looked up a how-to on my server's knowledgebase, but they suggested linking directly to the 404.php file (which didn't work). So thanks for the index.php?error=404 information. Worked instantly.

    August 29, 2008

  • Reply ›
    Marius

    What directory do I put the 404.php in?
    I don't see any .htaccess file anywhere.
    I have WordPress installed in the root directory, so WordPress is the main page.

    October 16, 2009

  • Reply ›
    chris

    @Marius, put it on you theme template folder

    November 26, 2009

  • Reply ›
    Sean Supplee

    Awesome been looking to do this with my blogs thanks for pointing it out.

    June 29, 2010

  • Reply ›
    Walt Ribeiro

    I copied and pasted the code right into my 404.php file, made some edits, and voila! Looks great, and was super easy. Thanks Ben!

    July 10, 2010

  • Reply ›
    Rob Reale

    Hey there, thanks so much for this code suggestion. I used it two weeks ago and it worked like a charm for me, and I just suggested it to someone at #wordpress chat. Thanks!

    January 29, 2011

  • Reply ›
    Lola

    Hi Ben!
    I have found this article very interesting, and I tried to get inspired from it to load my 404 custom page, but I failed :(
    All I want to do is to tell to my WordPress blog to get a specific illustration I have made on purpose. Here's the not-working code I have written (clearly I am not a geek) on my 404.php file (of course I have put the illustration with that name in the directory "images"), can you somehow help me to correct it, please?

    <img src="/images/error-404-700.jpg" alt="404. Page not found." />

    Thank you.

    March 9, 2011

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Websites linking here

  1. Favicon for http://www.google.com/s2/favicons?domain= Everyone should have at least one Gotchi! » Angepasste 404 Site
  2. Favicon for http://www.google.com/s2/favicons?domain=www.problogdesign.com Custom Errors Pages for Blogs, 5 Ideas
  3. Favicon for http://www.google.com/s2/favicons?domain=terrancecharles.com 1 Costly 404 Error Page Mistake Responsible For 1,000’s In Lost Traffic. How To Fix This Problem… | Terrance Charles On Internet Marketing
  4. Favicon for http://www.google.com/s2/favicons?domain=hospitalera.com 404 custom error page for Wordpress
  5. Favicon for http://www.google.com/s2/favicons?domain=www.binarymoon.co.uk Optimizing WordPress 404′s

My Projects

TimThumb - Image Resize Script TimThumb

Image Resize Thumbnail Script

WPVote - WordPress Social Voting WPVote.com

WordPress Social Voting Site

About me

About BenMy name is Ben Gillbanks. I'm a lover of Video Games, WordPress, Web Development and everything in between.

I have been working on the internet since 1998, and working with computers even longer. I am a hardcore Nintendo fanboy and have owned most of their consoles at one stage or another.

Read more about me on my about page.

My Tweets › Binary Moon

Random Link-outs

Keep Updated

Subscribe to RSS

Stay Updated

Binary Moon

WordPress and Web Development › home of Ben Gillbanks