Visitors Now: | |
Total Visits: | |
Total Stories: |
Story Views | |
Now: | |
Last Hour: | |
Last 24 Hours: | |
Total: |
The greatest sites out there are always notable for their attention to detail. One often underestimated detail is the existence of a useful and user-friendly 404-error page. WordPress provides an easy way to create and customise the 404-error page, but unfortunately, the simplicity in customization does not automatically mean effectiveness.
The well-known WordPress SEO expert Joost de Valk (aka yoast) reports his recent findings from several years of website SEO audits. According to this report a significant number of the websites audited had problems with optimising their 404-error page. The default WordPress theme (currently TwentyTwelve) has a very basic template for this case and not so many site owners go beyond that.
Why is it important?
Let’s look at this from the common sense point of view. When does a 404 error occur? When someone clicks on a link that should point to content on your site, but for whatever reason there is no corresponding page: maybe you have changed a permalink or removed the page, maybe you have changed the tags or category slug, maybe the link was just wrong. There are any number of reasons for the error, but one important fact cannot be denied: the visitor is already on your site, s/he is already interested in something, s/he has already made an effort to find it, so this effort should be rewarded.
One of the fundamental rules of UI is not to leave users in dead-ends without guidance. There is always a back button in the browser, but do you really want your visitor to have to use it?
Apple provides a sitemap on their 404-error page accompanied with a simple and clear message.
37signals use the extra opportunity to present their products, and provides contact information to solve the problem.
Zurb‘s 404-error page emphasises the option to contact them with a problem. Designers should solve problems, right?
Problogger presents a wide range of various content to dive into reading.
Justin Tadlock‘s Blog uses breadcrumbs to present a homepage link.
Creating custom 404 error page in WordPress
What can be done to improve this situation? How can the mistake be turned into an opportunity?
In search of ideas and guidelines we can consult WordPress Codex or Google Webmaster Guidelines as perfect starting points. Actually, our main task is quite simple: explain why a page can’t be located and offer suggestions for getting to the right screen. From this point of view we can derive a list of possible components that creates a “perfect” 404-error page:
From this list we can determine useful tips and ideas for what to include in a 404-error template:
One important thing about a 404-error page is a proper 404 HTTP status that should be served by the server. Fortunately, WordPress handles this for us automatically, so that we can focus our efforts on creating the page itself. We need the active theme to have a separate template for the page named 404.php. The bare bones structure of the template is quite simple:
< ?php
/**
The template for displaying 404 pages (Not Found).
**/
get_header(); ?>
< ?php get_footer(); ?>
The markup that creates the page structure should correspond with what’s used by the active theme. Alternatively, some additional styling can be provided to imitate that structure. By including the standard calls get_header and get_footer we ensure that the page has all the branding elements and navigation options and all scripts and styles are loaded properly.
Now, when we have made the initial preparations, let’s fill in the page. The best thing we could do for the visitor on the 404 page is to guess what’s actually requested and provide the closest possible match. Information about the requested URL is stored by WordPress in the $wp->request property. We can parse that string and try to find similar content based on post_name data, which stores information about post and page slugs. If such a search does not return anything meaningful we can try a regular search through post content. If these efforts do not produce any positive results we can always provide a list of recent posts as a fallback.
Of course, we also include the friendly message, the search form and a link to the homepage.
First we are going to create some auxiliary functions to handle some template routines; they could be included in functions.php of your theme or directly in the beginning of 404.php file.
function frl_get_requested_slug(){
global $wp;
$q = $wp->request;
$q = preg_replace("/(\.*)(html|htm|php|asp|aspx)$/","",$q);
$parts = explode('/', $q);
$q = end($parts);
return $q;
}
frl_get_requested_slug function tries to obtain the requested page slug using the global $wp object and regular expressions. The code assumes that the site uses permalinks and the request goes in the appropriate form.
function frl_list_posts($posts){
if(empty($posts))
return '';
$list = array();
foreach($posts as $cpost) {
$title = apply_filters('the_title', $cpost->post_title);
$url = get_permalink($cpost);
$list[] = "
frl_list_posts helps to quickly output a list of post links, accepting an array of WP_Post objects as arguments.
function frl_load_error_style(){
if(!is_404())
return;
$src="http://www.webdesignerdepot.com/get_template_directory_uri().'/css/error-style.css';
wp_enqueue_style('error-style', $src);
}
frl_load_error_style loads custom styles with the 404 template, assuming that the appropriate .css file is located in the /css folder inside the active theme’s directory.
The template code as we planned includes four parts: the friendly message; the search; the recent posts list; the last chance.
The friendly message:
404: Page not foundSorry, unfortunately, we could not find the requested page.
Let's find the information you need.
The search for the requested content:
< ?php
$q = frl_get_requested_slug();
$args = array(
'post_type' => 'any',
'post_status' => 'publish',
'name' => $q,
'posts_per_page' => 5
);
$query = new WP_Query($args); //query posts by slug
if(empty($query->posts)){ //search for posts
$q = str_replace('-', ' ', $q);
$args = array(
'post_type' => 'any',
'post_status' => 'publish',
's' => $q,
'posts_per_page' => 5
);
$query->query($args);
}
if(!empty($query->posts)):
?>
Were you looking for the one of the following pages?
First of all, we perform a WordPress query with an initial set of arguments which looks for the requested slug in a post/page name field. If we don’t get any results after that, we replace dashes in the requested string with spaces and perform another query that searches for the requested words in the posts/pages content. If we’ve obtained any results we then output them with the help of the previously created frl_list_posts function.
Recent posts list:
< ?php
$args = array(
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => 5
);
$query->query($args);
if(!empty($query->posts)):
?>
Why not take a look through the most recent posts?
In this part we perform a query for the 5 most recent posts in the blog and output them in the same manner as previously.
The last chance:
< ?php $home_link = home_url(); ?>No good?
Please use the search form to try again or start browsing from the Homepage.
If you need further assistance please don't hesitate to contact at [email protected].
< ?php get_search_form();?>
Finally, if none of the above options satisfy the user, we offer a link to the homepage and provide a search form.
Preventing 404 errors on your site
It seems that we have done our best to help the visitor on the 404-error page. Actually, the best help there is to prevent the 404 page ever being used. In particular, we can:
There’s no real excuse why your site or blog should not have a helpful and user-friendly 404-error page. I hope, that this guide has given you some helpful tips.
What do you have on your 404 page? What do you find useful when you encounter 404 pages? Let us know in the comments.
Featured image/thumbnail, lost image via Shutterstock.
450 Classic & Social Media Vector Icons – only $15! |
![]() |
2013-02-26 03:01:29
Source: http://www.webdesignerdepot.com/2013/02/how-to-build-effective-404-error-pages-in-wordpress/