13. 404 Error
A lot of strategy and thought goes into today’s 404 pages. Instead of presenting the user with a worthless error message, we can actually provide a meaningful way of navigating the site. Instead of pointing a finger at the user that implies “you messed up,” we can apologize for the inconvenience and assist him in finding what he’s looking for.
What you’re about to learn
• 404 industry best practices
• 404 template page creation
• Template tags and functions
404 Error
The 404 template page is used whenever anyone attempts to travel to a page, post, or other area of the site that doesn’t exist. It could be the user’s fault because he typed in something incorrectly, or it could be ours because we took down a page and didn’t define a proper redirect. Either way, it’s better to take the blame for it and move the user down the right path.
The 404 error template in Figure 13.1 shows a lot of dynamic content being displayed but there’s no 404 page in the admin. There’s actually no content editor or any way to give the user admin access to the content on the 404. That’s OK, because we don’t have to predict anything on this template page. The user is here and we need to move him along.
Figure 13.1. The 404 template page content.
In the template header there’s a title, an error message, and a search form. The title will, for the first time in our theme build, be static. The message will be static as well. There’s really no reason to pull in any dynamic content in these messages. Unlike the Search Results page where we could display the search query, there really isn’t anything to display or help the user correct.
Once we visit http://localhost/j2-theme/apples (which in my case, returns a 404), we’ll start using the 404.php template page to display content. Once again the template is almost the same as the rest of the site. The header, sidebar, and footer are identical. They still require the necessary functions to display that content, for example, get_header().
404 Template Header
The title and error statement are pretty straightforward. You can replace the content at the top of the template with anything you prefer. I like to use a personal and humble statement when delivering an error.
<h1 class="error">Whoops, 404!</h1>
<h2 class="tagline">We're sorry, we can't find what you're looking for. It's
probably our fault. Please use the navigation above or below and try
again!</h2>
The statement above lets the visitor know that there was an error on the site, but in a lighthearted and modest way. We take the blame for the mistake and let him know that he can easily continue the search. In fact, we will be providing navigation in addition to the header nav that is easily accessible, plus we’ll provide a search form and a “sidebar” with a plethora of links and content below that. This way the user has the option to continue on the site as quickly as possible. Without this simple means of navigating and locating the content he’s in search of, he’ll probably be just another addition to the bounce rate.
The Search Form
We can display the search form exactly as we did in the previous chapter, using the get_search_form() function. The HTML output from this form is a bit different than what’s displayed in the design. You can fix this by creating your own search template page or by hiding certain elements with CSS.
<?php get_search_form(); ?>
You can also replace the entire function with a slightly more static call to display the form. In the end, you use the function above or the code below—there’s no wrong answer.
In 404.php replace the form content with the following code:
<form role="search" method="get" id="searchform" action="" >
<input type="text" value="" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Search" />
</form>
There are only slight differences between this HTML markup and what follows. I’ve removed the content in the action=”” attribute, along with the <label></label> and unnecessary <div></div> tags.
form role="search" method="get" id="searchform" action="http://localhost/
j2-theme/" >
<div>
<label class="screen-reader-text" for="s">Search for:</label>
<input type="text" value="" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form>
Now the form won’t function if we don’t have a URL in the action attribute to post our variables to. The one problem is that we don’t know what the URL of the site will be. So we need to input a dynamic WordPress call to display the URL in the attribute. Insert the bloginfo() function into the action attribute. Pass it a parameter of url to return the site’s main URL.
<form role="search" method="get" id="searchform" action="<?php bloginfo(
'url' ) ?>" >
<input type="text" value="" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Search" />
</form>
Once we do this, the HTML output will be:
<form role="search" method="get" id="searchform" action="http://localhost/
j2-theme/" >
<input type="text" value="" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Search" />
</form>
Just like that, we have a working search form. You can now insert this code throughout your theme, convert it into a search template, or simply use it here.
Before we move on, here’s an extra tip that’s extremely helpful for larger sites with hundreds of posts. Many people don’t know this, but you can search within a category simply by appending ?s=query at the end of the category URL. The benefit here is that you can implement search forms into archive template pages for easy searching of the specific category the user is currently viewing.
You could even go as far as creating a category drop-down above the form and then appending the category slug to the end of the action URL for searching within a category from anywhere on the site.
Another Dynamic Sidebar
I bet you thought we were done defining sidebars in our theme. Don’t worry—this is good practice, and shaking things up will help you improve your WordPress skills. We defined our dynamic sidebars in previous chapters and, before you continue, I encourage you to go to functions.php, duplicate the register_sidebar(), and see if you can create a new sidebar on your own. If you get lost along the way, or break your site, have no fear. The code you’re looking for is just ahead:
$j2theme_404 = array(
'name' => '404 Error Page',
'id' => 'fourohfour',
'description' => 'Widgets placed here will go on the 404 error page
template',
'before_widget' => '<div class="widget">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widgettitle">',
'after_title' => '</h3>',
);
register_sidebar( $j2theme_404 );
It’s good practice to plan your dynamic sidebars in advance but it’s not always possible. In the past, the order of sidebar declarations could have an impact on widget placement. As of WordPress version 3.4 we no longer have this issue, so it’s OK to reorder sidebars as you want. However, it is important to note that the order of the sidebars in the functions.php dictates their order on the Appearance → Widgets page.
Remember our best practices in function and variable declaration? Preface your names with something specific to your theme or plugin to prevent collisions with other code in the future. If you need a refresher on registering sidebars, revisit Chapter 9, “Dynamic Sidebars and Widgets,” or go to http://wdgwp.com/register_sidebar.
Once you register the new sidebar, you can fill it with widgets. The design was really well done, so it’s easy to display lots of widgets without complicating the site. All of the following widgets can be added to your new sidebar, but it’s up to you and the user admin to fill them in:
• Pages
• Authors
• Recent posts
• Blog categories
• Monthly (archive)
We still have to display our sidebar in the 404 template page, so insert the following code below the search form:
<?php dynamic_sidebar( '404 Error Page' ); ?>
We’ve just given the user admin a great deal more control over the 404 template page. It may seem like a lot of work for a page we hope visitors never find themselves on, but that’s the point. We want to encourage them to stay on the site even when something goes wrong. Pithy and funny comments can keep them engaged, and giving them simple ways to navigate and continue through the site will likely turn a negative situation into a positive one.
What’s Next
That wasn’t too hard, right? It’s good that you had a little breather, because next we’re diving into another level of advanced coding. In Chapter 14, “Featured Images,” we’ll finally declare all our featured image sizes and distribute the correct calls throughout the theme.