404 custom error page for Wordpress

What is a 404 error page

A 404 page is what shows up if you click on a link that doesn’t work (anymore) or make a mistake by typing in an Url. WordPress displays this page automatically to each visitor that tries to access a Url that doesn’t exist.

How to make a custom 404 page for your WordPress blog

This will only work for self-hosted blogs, not for free ones on WordPress.com!

First of all I want to thank BinaryMoon for his very helpful post that finally pointed me in the right direction!

I promise, I will not bore you with my long journey full of failures, instead I will show you an easy way to add a custom error page to your WordPress blog. You can follow the instructions to create whatever error page you want. I just needed one for my 404 error page, because the default page was rather dull, boring and not very helpful for my readers. For the ones of you that are not very savvy with code I will provide a custom template at the end of this post. That you can just copy, paste and adapt to your needs.

Why you need a custom error 404 page

Why bother at all to make a custom error 404 page for your blog? Try out the default page on your own blog or site and see how useful or useless it is for your readers and for your site.

Chances are that

  • The default error page of your web host is used, often with advertisement and promotional offers on it.
  • Or that your default 404 error page shows something like “Oops, what you are looking for is not here.” and a lot of empty space…

Neither of these possibilities helps your readers and / or your site. A good custom error page keeps readers on your site by providing them several possibilities to find what they are looking for and can be also a source of income for your web site by displaying a Google search box, banners or other kinds of ads. Have a look at my custom error page (there is none anymore because I use now Link Juice Keeper on this blog, for more information about this great, free!, plugin see this new blog post: http://sheseo.com/best-wordpress-plugins-2011-2012/

I choose to display a Google search box and a list of my most recent posts. That should keep visitors busy 😉

How to create a custom error page

First check if there is already one in the main folder of your current theme. You can check this by going to Dashboard>Appearance>Editor. Look here for a file called “404 Template (404.php)” or similar. Select all the code and copy it into a new file on your desktop and save.
Use either Notepad or OpenOffice to do this and avoid Microsoft Word, as it will ad extra code to your file! Now that you have a a back-up copy of your 404 error page file, you can either edit it directly in your dashboard or work on a copy on your computer. After you have finished it, you just replace all the code in the “404 Template (404.php)” in your dashboard with the new version, click “update file” and check that it functions well, by trying out a non-existing url on your web site.

If you don’t have a custom “404 Template (404.php)” in your theme folder, just create a new file, called 404.php with the code you would like to use and upload it via ftp or cpanel to the folder of your current theme. It will then automatically show up next time you open Dashboard>Appearance>Editor. I had to go this route as Atahualpa, the theme I use, doesn’t have a own error 404 page, it relies on the default one in WordPress.

If you don’t have an editor that can save *.php files, here is a little workaround 😉 Open a new document in NotePad (Windows) or TextEdit (Mac) and save it as “404.php” INCLUDING the quotation marks on your desktop. Close the document and than rename it to 404.php, deleting the quotation marks. And it will be a valid *.php file 😉

All this might seems intimidating at first, but trust me, if I managed it, you will do also. Below a commented custom 404 error page template that you may use and adapt to your personal needs. Just replace the words I wrote with your own words and codes. Any more questions, suggestions? Anything I got wrong? Just leave a comment 😉

If you like this blog post and found it helpful, why not share it with your preferred social network? Handy links and bookmarklets above ^^^ 😉

26 comments to 404 custom error page for WordPress

  • This is something I forgot to include, thanks for the reminder! Although my site is not purely wordpress, I’ll need to have a look into how to incorporate a custom 404 page into a static website.

  • hospitalera

    You can use this for the wordpress part of your site, if you have one static 404 page for the rest of the web site, you can either alter it to mirror the wordpress version or to serve an own version of it. A simple re-direct via the cpanel might do 😉 SY

  • Hi there, saw your post in the comment section on Blogussion and wanted to stop by and check out your site. Looks like you have some interesting niche content for the SEO/blogger folks. I haven’t heard of any squidoo-like sites in German, but I will ask around to my other SEO coworkers and definitely let you know if I hear of any.

  • hospitalera

    Thanks for your kind words! That would be very much appreciated! SY

  • Well, I enjoyed your comment on Blogussion and from the comment above it looks like the community is starting! 404’s are important when trying to get your visitor to stay on your blog and see more content. Custom 404’s are the best way to go!

  • p.s. I love Keywordluv and made sure to stumble this article. Hope this helps!

  • hospitalera

    @Seth W
    Thanks, yes, I am a great fan of “pay it forward SEO” SY

  • A 404 error is very important to mention, especially since that is something you will normally see if you don’t type in your link correctly in your article or blog. A custom 404 page is much more helpful in directing your readers if you have any issues on your site!

  • hospitalera

    True, I see you found an interesting solution for your own site 😉 SY

  • Hi, thanks for this post, I can’t stand the look of the default 404 page that WordPress provides, I will be creating a custom page soon thanks to this post! I look forward to reading more from you in the future!
    .-= Jared@Search Engine Techniques´s last blog ..What Is Black Hat Search Engine Optimization (SEO)? =-.

  • Nice write up on 404s. Custom ones are always better than the generic. I like to add a notification, helps find broken links.

  • Nice post, its also worth mentioning the SEO benifits of linking on a 404 error page

  • hospitalera

    Good idea!

    @ecommerce adviser
    Can you explain that a bit more? SY

  • Having a customised 404 page can make your website look far more professional, and allow you to hold on to visitors who fall into dead links on your site. Instead of hitting a generic 404 page which is basically a dead end they are presented with live links to the rest of your website. BUT it doesn’t compare to eliminating dead links from your websites in the first place! There are some great online tool to spider your website and inform you of any dead links it finds, these links can be corrected. Of course other websites might link to pages that have been moved. These can’t be fixed exactly, but you can make the old URL link to the new one. (Research the .htaccess magic required for this.) This has the added benefit of passing on the pagerank that a 404 would have lost.

  • hospitalera

    @Mark Jones from Croydon
    Absolutely right, checking your own links or re-directing bad links to good ones should always be done! SY

  • This is something I forgot to include, thanks for the reminder! Although my site is not purely wordpress, I’ll need to have a look into how to incorporate a custom 404 page into a static website.
    .-= darmawan´s last blog ..Guide Resource For Online Shop =-.

  • hospitalera

    You are welcome, the way to do this will vary slightly when it is a non-wordpress site, but the effort is still worth it. Just check your logs for access to the 404 error page, if you have an optimized landing page in your 404 error page, it might be well worth the effect 😉 SY

  • interesting… thanks for the info!

  • hospitalera

    @Las Vegas landscapers
    You are welcome! SY

  • Hi Hospitalera! (Remember me from WBSD?) Thanks for this, it worked. In the code there are a few things that should be removed, like the opening break paragraph, and the paragraphs around the get header command. Otherwise, great!
    Thanks again, this is the only place I could find on the Internet with a solution!
    .-= Thandelike´s last blog ..Blooming behind closed doors…. =-.

  • hospitalera

    Hi, yes, of course I remember you, I am still not finished to visit all blogs that participated this time round! Looking forward to yours 😉 Do you know that next, and all following, WBSDs will run from its very own domain http://wbsd.info/ ? Sher and I are pretty excited!
    Thanks also for your comment, yes, it is really difficult to find something on the Internet about Custom 404 pages that is not “hyper-technically-nerdie-geekie”, glad I could help and thanks for your input! SY

  • hospitalera

    Just updated this blog post, as I needed to re-do my custom 404 page after I updated my theme. SY

  • Hi hospitalera,
    basically ia have only to “cut off” latest Posts widget from my 404 not found page.
    So i have to create a new page 404.php similar to each other post page less than Last Post widget calling.

    The problem is: how to find a basically page of my site to copy and customize?

    .-= Bigliettaio´s last blog ..Biglietti Inter-Milan 24 gennaio 2010 =-.

  • hospitalera

    You need to create a new 404.php file and upload it to your site, either via cpanel or ftp. You can use the code I provided at the end of the blog post and adjust it to your own needs. Hope that helps, SY

  • Hey, Hospitalera! This is just what I was looking for. I’ve just rearranged my ballet site to specialize in pointe shoes (which is what the blog section is all about) so I wanted to redirect readers to my other dancewear sites. This template is just perfect – though it doesn’t pick up my sidebar for some reason, I just need to work out how to put that back in again!
    .-= Marisa Wright@Shoespointe´s last blog ..Cecilia Kerche Pointe Shoe Review =-.

  • hospitalera

    Hi Marisa,

    yes, it is true, it doesn’t pick the sidebar up. Perhaps you should ask one of the php gurus around how that is done. Or look into the theme editor of your wordpress theme for single page? SY