Most 404 templates in WordPress themes suck. They generally read something like “404 Not Found” and give an extra sentence or two about an error. This is totally unnacceptable to a site visitor that comes across a 404 page.
A site’s 404 page should be unique and reflect what the site owner(s) want. It’s tough for theme developers to know how to create a 404 page since they’re making a theme for thousands of people. The question becomes: How does one create a 404 template that users can customize from within the WordPress admin?
I’m going to show you an extremely simple technique that’ll make both theme developers and users’ lives easier. We will widgetize our 404 templates from this day forward.
Oh, and by the way, the Hybrid theme already uses this method. Really, did you expect anything less from the coolest theme ever?
Register your 404 widget area with WordPress
Like any other widget area, we need to let WordPress know about it. Open your theme’s functions.php file and add this PHP code in:
<?php
register_sidebar( array(
'name' => '404',
'id' => '404',
'before_widget' => '<div id="%1$s" class="%2$s widget">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>'
) );
?>If you’re releasing this theme publicly, you should localize the widget area name but not the id.
Displaying the widget area on your 404 pages
Open your theme’s 404.php template and add this to the content area or replace it completely:
<?php dynamic_sidebar( '404' ); ?>It’s as simple as that. Now you can edit your 404 template at any time without having to open your theme files.
that’s awesome.
A cool way indeed to make editing 404 easy for end users.
Why not use new function the_widget() instead of registering a new sidebar?
John (Human3rror) — I think so too.
Ozh — From what I can tell, WP 2.8′s
the_widget()is meant to be a template tag that calls a specific widget, which seems to defeat the purpose of being able to edit if from the admin. By adding a widget area, we’re allowing users to have complete control over the 404 page.Haha you really are amazing Justin. Another reason for me to keep using a cool theme like hybrid
Thanks for the tip !
all of your tutorials are just great
it will be good to buy a better domain which will be related to wordpress tutorials..!
i have a domain you can take this for free
it is WPcodes.com if you want then contact me
If you do this, will it also be available via a child theme? That is, if I put a functions.php and 404.php in my child theme directory will WordPress use that one or do I have to modify the parent files? Is there any requirement to link to the parent like you do with the CSS file or does that take care of the whole thing?
Nice tutorial to customise the 404 error page.
This is a lovely tutorial. I had to manually edit the files and it was a nightmare finding the correct files. Thanks for this Justin.
hah, nice! Im gonna go change mine now!
Excellent tip there. I have always wanted to enhance the 404 page and I can’t understand much from Google Webmaster tool.
nice workaround. love it
Wow, I would have never thought about doing that. It is so simple (once you’ve explained it like that) and yet so powerful. Thanks heaps for the instructions and idea, keep up the great work!
some wp themes already come with a designed 404 page, not just the normal “page not found” text, but most of them dont, great post
Hey very useful but the problem is I’m using Thesis wordpress theme and can it be used along with it??
Blogspot to WordPress — Surely a theme as all-powerful as the Thesis theme would already have an easy way to edit your 404 template, right? I’m guessing it does.
I would tell you to pass the theme along to me so I can take a look and help you out. Unfortunately, since your theme creator didn’t release the theme under a better license, you can’t do this. If it were licensed under something like, say, the GPL, we wouldn’t have this problem.
So, I’m sorry that your theme has such a restrictive license that it makes it pretty much impossible for me to help.
A cool way indeed to make editing 404 easy for end users.
That’s a really good job,again…
Pardon my ignorance, but how do I remove the archive listings from the Hybrid 404 page?
-Scott
I agree with you, WP default 404 really sucks. What I am doing is using the all post plug-in then customized the 404 so that it allows the visitor to search or choose from the posts. I will try this option that you recommended.
I did your trick. It works, but only until i edit other widgets. Afterward it forgets my settings for the 404 widget and i must re-set them over and over again each time I edit the other widgets (related to the sidebar content).
I had changed now and worked like a charm!
Much better, thank you. My users now get told to go and get a cuppa and a biscuit and try again in 10 minutes. It seems to have stopped them all frantically hitting F5 as well
Great idea! I’ve implemented it in 10+ websites which I designed and maintain. I have one small problem or inconvenience rather. My strict rule is to always use child theme to make presentation changes. I never touch parent theme. I’ve created functions.php in my child theme and registered ’404′ sidebar there. Because of parent-child theme logic child’s functions.php is executed first and parent’s – second. This creates the following structure of sidebars: ’404′ then other sidebars created by parent theme. Not good. With sidebars already populated with widgets I have to manually (fortunately, one time only) move widgets from 1st sidebar (’404′) to 2nd, 2nd to 3rd and so on. If ’404′ sidebard could be created last I wouldn’t have to do it. I think if parent-child theme logic treated functions.php like any other templates (if functions.php exists in child theme, don’t use parent’s functions.php) that would make much more sense as for now we cannot undo whatever is done by parent’s functions. Justin, do you have any ideas how to create ’404′ sidebar as last without modifying parent’s theme files?
Ditutu — Thanks. I’m glad you liked the tutorial.
Scott — The Hybrid theme has a forum specifically for it.
Sulumits Retsambew — Definitely try it. It’ll save you tons of time whenever you want to change things.
Dan — If you’ve followed this tutorial exactly, you have a problem with either your theme, a plugin, or WordPress.
Nice Blogger — Cool. I’m glad you’re making use of this technique.
Bethany Tinoble — I’m glad it’s working out for you.
Frank P. Walentynowicz — It depends entirely on your parent theme. Most decent parent theme frameworks will allow you to override your 404 template’s content, so you’ll need to ask your theme author.
interesting, I can probably use this, never thought of using 404 in this way
I always used to think how people put funny messages on 404 page.I wanted to do this from a long time but i don’t know any thing related to php.I really appreciate your help.You’ve made it quite easier.
Thanks.
I hate when i saw WP default 404 error page. what i did before in some of my WP blogs is i customized the 404 so that it allows the visitor to search from those posts. And i think your code really helps. I will try that method you showed us. Thanks
Help me;
Justin Tadlock ,
I do according to your method, but when accessing a 404 page the apache will return the original message，like this:
Not Found
The requested URL /s was not found on this server.
————————————————–
Apache/2.2.14 Etc……..
What should I do?…
Hi there:
I was trying to get that done through a page instead of using a widget, that’s what I did:
1) Edit the 404.php template to have a /*Template Name: Error*/ comment in the top.
2) Go to the admin and created a new page (error-page permalink) and choose the new page template from the dropdown.
3) Edit the .htaccess and add ErrorDocument 404 http://domain.com/error-page/
I was pretty sure it was gonna work but it didn’t, do you have any ideas why it is not working? Permalinks stuff maybe?
Great blog, congratulations and thanks a lot for everything you share over here.
Javier.
I forgot to say that I obviously copied the page.php template into the 404.php template in the step 1 so to get the content straight from the wp page editor (which is my objective).
Cheers. I hope that makes any sense anyway.
Javier
Wonderful article. I appreciate your effort for posting this. I am novice and it will help me.
I have successfully added and created the 404 Widget last night ..
everything working fine but the problem now is that i have closed the browser and after a refresh the Sidebar widgets are having the options (categories, rss, Tag Cloud etc…)
but
the 404 is empty while during error it shows all the widgets i have added yesterday to it.
Please HELP
I had the same issue (in WP 3.0.1) changing the id (and reference) from ’404′ to ‘error-404′ seemed to solve the problem for me.