Google+

Tutorial: How to Add a Widgetized 404 Error Page Template in Genesis

Normally, it should never happen that your visitors see a 404 error page on your web site. Still, it happens a lot. This is life as we know it…

Typical default WordPress behavior:
“Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post.”
(followed by a search field – all in all not customizeable without coding …)

Typical default Genesis behavior:
“Not Found, Error 404
The page you are looking for no longer exists. Perhaps you can return back to the site’s homepage and see if you can find what you are looking for. Or, you can try finding it with the information below.”
(followed by an archive listing of all content – still all this not customizeable without further coding …)

404 Page Widgetized page template of the Autobahn Child Theme in action.

404 Page Widgetized page template of the Autobahn Child Theme in action.

I’ve seen that A LOT. I don’t want that anymore! In Genesis when a blog has hundreds of posts they all get listed then. I really don’t like that (but I DO LIKE Genesis, though :). — So you better be prepared for this. On every project for clients or for my own I try to implement some proper 404 display because you never know what might happen … I want to take care of my visitors, users and clients and guide them and give good advice and help.

As you can see in my new free Genesis Child Theme called Autobahn I just implemented this in a very simple but effective way. So my tuturial here is to show you how I did that. Since it was for the Genesis Framework it is special for this but in general should work with every theme based on these priniciples if you know what I mean.

It Takes These Steps:

  1. Create a new page template for Genesis – save as 404.php in your child theme folder.
  2. Register a new widget for the 404 widgetized area.
  3. Adding some CSS styles for proper display.
  4. Place some widgets on the new widget area.
  5. And you’re done.
  6. Uuhm, some further tips :)

 

1) Create a new page template for the 404 display

WordPress just looks in every theme for a 404.php file for displaying ‘not found’ errors. If it’s not there it uses the index.php file.

As Genesis is powered by parent/child theme concept we have to place the template in the child theme folder, for example:
../wp-content/themes/your-child-theme/404.php

The 404.php file is not a normal page template so it has no title tag. It will be catched by WordPress automatically. Here’s the code I placed in my template for the Autobahn child theme:

<?php
/**
 * 404 Not found page example
 * 
 * This helps create a custom and widgetized 404 error page template for Genesis child themes.
 *
 * @author David Decker, http://genesisthemes.de/en/
 * @link http://genesisthemes.de/en/2011-08/tutorial-widgetized-404-error-page-in-genesis/
 */

remove_action( 'genesis_loop', 'genesis_do_loop' );
add_action( 'genesis_loop', 'childtheme_404_loop_helper' );
/**
 * Add widget support for the 404 page. If no widgets active, display the default loop/message.
 *
 */
function childtheme_404_loop_helper() {

	if ( is_active_sidebar( '404-page' ) ) {

		dynamic_sidebar( '404-page' );
		
	}
	else {
		genesis_standard_loop();
	}
	
}

genesis();

 

2) Register a new widget area

We’ve already defined the call of the widget area in the template but we have to define it so all works properly. I placed this code in the functions.php of my child theme (tip: backup your files before!):

/** Register 404 page widget area */
genesis_register_sidebar( array(
	'id'		=> '404-page',
	'name'		=> __( '404 Page', 'yourchildthemetextdomain' ),
	'description'	=> __( 'This is the widget area of the 404 Not Found Page Template.', 'yourchildthemetextdomain' ),
) );

Attention please: Add this somewhere AFTER this line, best would be at the bottom:

require_once(TEMPLATEPATH.'/lib/init.php');

 

3) Adding some CSS styles for proper display

As we’re will place some widgets in the content area then we need to tell Genesis to leave a bit more space between the actual widgets so that all is not so squashed together… Add this to the bottom of your style.css in the child theme folder (tip: backup your files before!):

/* Custom Stylings
------------------------------------------------------------ */

#content div.widget-area,
#content div.widget {
	margin-bottom: 35px;  /* your space between widgets */
}

In that case there will be a space of 35 pixels hight after every widget – this is also the same value I set here on the site. So you might try that for yourself.

Of course, you can change this to any value you want and that’s best fits your site’s design. In most cases, so for the official child themes from StudioPress and a lot of the third-party releases, this should work pretty well.

 

4) Place in some widgets

Now comes the easiest part of this tutorial :-). Drag in some widgets into the new “404 Page” area. I for myself always begin with a simple text widget. Define a proper headline and a little notification messsage to inform your visitors where they are and what happened. After that I just place default search widget so that people just can search again. Nothing special, really. Just to guide your users. After that I often place some recent blog posts – with the default WordPress “Recent Posts” widget. You can also place custom widgets or widgets by plugins to even display your whole archive or anything else you’d think it might help your visitors.

 

5) And you’re done

Hopefully none of your visitors will ever see this page. Who knows, it might still happen a lot beyond our knowledge. However, you can rest assured because now you’re prepared for that case. Make sure to place in the right widgets that really guide your visitors to search further on your site, to read other posts/ pages or just give them some content they hopefully enjoy.

And, please remember, if you forgot to place in some widgets (e.g. empty widget area) then always the default Genesis behavior takes place. So, in any case there will be some content for these mysterious 404 happenings …

And even further, the big advantage of that customized widget template is, that you change that as often as you want – or when your site’s focus changes for example. This solution is also a lot more customizeable in conjunction with other plugis for multilingual sites, just think of WPML

 

6) Uuhm, some further tips :)

This one’s just for the Genesis advanced folks, hehe :-). By default Genesis will take the default layout option (for example Content-Sidebar) ALSO for your 404 Page. In most cases this is the wanted direction. There might be special cases when other options are better, so you can tell the above template to ensure a certain layout option, for example full width content:

Juste place this piece of code after the copyright notices of the newly created 404.php template file! (Attention: NOT in your functions.php!)

/** Force full layout option for 404 page */
add_filter( 'genesis_pre_get_option_site_layout', 'custom_404_page_layout' );
function custom_404_page_layout( $opt ) {
	return 'full-width-content';  // your layout option here
}

In the “return” line you can also place other values for the available layout options for Genesis (note: only one at a time!). Just note: if your child theme un-registered one of these so it makes no sense to use them as they won’t be displayed! Possible values for that mentioned line are:

full-width-content
content-sidebar
sidebar-content
sidebar-sidebar-content
sidebar-content-sidebar
content-sidebar-sidebar

I only recommend the first three for this use case to keep a minimalistic design and not distract your visitors even further! Think of your own experiences: on a website, nothing found or 404 error and you’re full blown by a lot of sidebars and such…? No one really wants that! So we created a widget page itself this should really be enough.

 
I hope this helps to awesome up your site and user experience a bit. Any further tips? Just leave that in the comments below! :-)

 

Updates:

2011-09-08: Added notice for layout option and optimized CSS styling code

About David Decker

WordPress-Enthusiast und Webworker aus dem Erzgebirge. Ich arbeite seit 2010 mit dem Genesis Framework; u.a. Übersetzer der deutschen Sprachdateien dafür. DECKERWEB betreibe ich seit 2000. Ansonsten liebe ich Wandern, Radfahren, jede Menge großartiger Musik und als Sachse natürlich immer gern einen starken Kaffee ;-) — Folge mir bei Twitter @deckerweb oder bei Facebook oder lese in meinem Blog.

» GenesisThemes.de runs on the Genesis Framework

Genesis Framework

Genesis empowers you to quickly and easily build incredible websites with WordPress. Whether you're a novice or advanced developer, Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go. It's that simple - start using Genesis now!

Take advantage of the 6 default layout options, comprehensive SEO settings, rock-solid security, flexible theme options, cool custom widgets, custom design hooks, and a huge selection of child themes ("skins") that make your site look the way you want it to. With automatic theme updates and world-class support included, Genesis is the smart choice for your WordPress website or blog.

Comments

  1. Absolutely awesome tutorial David! I’m in the middle of building a new Genesis site and will definitely use this. :)

  2. Hi David. I’ve been playing around with the code you posted about forcing the full width layout on the 404 page. It seems to force full width site-wide whether it’s a 404 or not. Further experimenting I came up with this …

    /** Force full layout option for 404 page */
    add_filter( 'genesis_pre_get_option_site_layout', 'custom_404_page_layout' );
    function custom_404_page_layout( $opt ) {
    if ( is_404() )
    $opt = 'full-width-content';
    return $opt;
    }

    • Hi there!
      You are right, when you placed this in your functions.php – my code above is only intented for the use in the newly created 404.php file – then it works properly as it should. Anyways, thanx for bringing this up I will highlight it a bit more :)

  3. Ah I see, that makes more sense. I should have paid closer attention. I was so excited about trying this out. :)

    • You’re, welcome :)
      No problem, I just updated the post – and also updated the CSS code so you might just have a look if all is displayed correctly :)

      Thanx for your feedback!
      Dave.

  4. David,
    This is so freaking cool and so silly simple! I wish I’d thought of this! What a great alternative to a 404 page. I’m using this on a site with 6,000+ posts. The possibilities are numerous with what we can do now. =)
    Awesome tutorial!

  5. Hi David,

    This is an interesting tutorial. I’ve been experimenting and leaning about WP for a while. IO have a question and hope you can help. The tutorial shows a single widget. I was to add 3 widget like how we have a footer widget in genesis can you tell me how it should be done? Thanks for your help in advance.

  6. Hi David,

    herzlichen Dank für den sehr gut und einfach für Laien — wie mich — erklärten Tut!
    In der Tat, diese Möglichkeit öffnet viele Optionen was man mit der 404 Seite anrichten kann :)
    Gibt´s eine Möglichkeit die erstellte .php so zuzuweisen sodass man auf diese Seite vom Backend aus (Pages -> Page Attributes -> Template) als Template Option zusätzlich zu den bereits existierenden Default, Blog und Archive zugreifen kann?

    Über jede Hilfe bin ich sehr dankbar

Speak Your Mind

*