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?
[...] Customize your 404 page from the WordPress admin (tags: WordPress tutorial 404) [...]
[...] Customize your 404 page from the WordPress admin – Okay, I admit it. The 404 pages of my free WordPress themes suck. This is a relatively simple (but useful) technique of widgetizing a theme’s 404 template. I’ll be using this method from now on, as it really is the perfect solution for dealing with 404 pages of public theme releases. [...]
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.
[...] att du kan en del om HTML-kod och är lite datavan. Justin Tadlock beskriver i artikeln “Customize your 404 page from the WordPress admin” hur du gör din sida redo för widgets, och det tror jag är den enklaste vägen till en bra [...]
hah, nice! Im gonna go change mine now!
[...] As mentioned above, there are two widgetized sidebars with one on the left and one on the right. These are visible on the main index, single posts, archives, search results, and normal page templates. In addition to the two widgetized sidebars, there is also a widgetized 404 page. [...]
[...] As mentioned above, there are two widgetized sidebars with one on the left and one on the right. These are visible on the main index, single posts, archives, search results, and normal page templates. In addition to the two widgetized sidebars, there is also a widgetized 404 page. [...]
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
[...] As mentioned above, this theme comes equipped with four widgetized areas. There are the two mentioned above exclusive to the home page template, as well as one each on the sidebar and the 404 template. [...]
[...] As mentioned above, this theme comes equipped with four widgetized areas. There are the two mentioned above exclusive to the home page template, as well as one each on the sidebar and the 404 template. [...]
[...] Customize your 404 page from the WordPress Admin [...]
[...] Customize your 404 page from the WordPress Admin [...]
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.
[...] Customize your 404 page from the WordPress Admin [...]
[...] Customize your 404 page from the WordPress Admin [...]
A cool way indeed to make editing 404 easy for end users.
That’s a really good job,again…
[...] Customize your 404 tender from the WordPress Admin [...]
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.
[...] Customize your 404 page from the WordPress Admin [...]
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).
[...] Customize your 404 page from the WordPress Admin [...]
I had changed now and worked like a charm!
[...] Justin Tadlock on Customizing your 404 page from within WordPress admin. [...]
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
[...] Customize your 404 page from the WordPress Admin [...]
[...] As mentioned above, this theme comes equipped with four widgetized areas. There are the two mentioned above exclusive to the home page template, as well as one each on the sidebar and the 404 template. [...]
[...] There are only two widgetized areas in this entire theme. One widgetized area is on the 404 template, in case you want to customize your 404 page from the WordPress admin. [...]
[...] There are only two widgetized areas in this entire theme. One widgetized area is on the 404 template, in case you want to customize your 404 page from the WordPress admin. [...]
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.