http://go.ad2up.com/afu.php?id=665574

How to Customize Your 404 Page in WordPress 3.5

Loading...

While you work hard to make sure that every link actually goes to a specific web page on your site, there is always a chance that a link clicked will slam dunk and become a famous 404 ERROR PAGE NOT FOUND. As a website owner, you should ensure that the user experience of your website doesn’t leave your visitor feeling lost or confused when this happens. All is not lost. If your visitors encounter an error, why not be a helpful WordPress site administrator and present them with a message more useful than “NOT FOUND”.

Creating a custom 404 page is easy using the 404.php template in your WordPress theme, and it can go a long way to ensuring a visitor remains on your website, even after they encounter a 404 error. This lesson will teach you how to edit your “error” and “page not found” messages so they are more helpful to your visitors. We’ll also show how to ensure your web server displays your helpful custom messages. Finally, we’ll go over how to create a custom error page consistent with your Theme’s style.

Understanding Web Error Handling

Visitors encounter errors at even the best web sites. As site administrator, you may delete out-of-date posts, but another web site may have a link to your inside page for that post. When a user clicks on a link to a missing page, the web server will send the user an error message such as 404 Not Found. Unless your webmaster has already written custom error messages, the standard message will be in plain text and that leaves the users feeling a bit lost.

Most users are quite capable of hitting the back key, but then you’ve lost a visitor who may not care to waste their time hunting for the information. So as not to lose that visitor, at the very least, you’ll want your custom message to provide a link to your home page. The friendly way to handle errors is to acknowledge the error and help them find their way. This involves creating a custom Error Page or editing the one that came with your WordPress Theme.

How To Add A Custom 404 Page To Your Theme

Now let’s look at how to actually add a 404 page that’s customized to your theme. Adding a custom 404 page is simple; All you need to do is have a file named ’404.php’ in your theme directory. Of course, if your ’404.php’ file is empty, then the ’404 Not Found’ page that gets displayed to users will be blank.

A quick method of making a custom 404 page that ties in nicely with your theme is to copy the contents of the ‘page.php’ file in your theme to your new ’404.php’ file. Once you’ve done that, remove all of the code referring to The Loop and replace it with the following code:

<h1>Page Not Found</h1>
<p>Sorry, but the page you requested has not been found</p>

Editing an Error 404 Page

The default WordPress theme has a 404.php file, but not all Themes have their own custom 404 error template file. If they do, it will be named 404.php. WordPress will automatically use that page if a Page Not Found error occurs.

The normal 404.php page shipped with your Theme will work, but does it say what you want it to say, and does it offer the kind of help you want it to offer? If the answer is no, you will want to customize the message in the template file.

To edit your Theme’s 404 error template file:

  1. Open your WordPress admin panel:
  2. Choose Appearance menu.
  3. Choose the Theme Editor page.
  4. Check to see if your theme includes a ‘404 Template’ in the list of files.
  5. Click the link for ‘404 Template’ along the right side of the page.
  6. Edit the message text to say what you want it to say.
  7. Save your changes. (If the template file is not writable, see Changing File Permissions.)

While you are examining and editing your 404 template file, take a look at the simple structure of the default 404.php file. It basically features tags that display the header, sidebar, and footer, and also an area for your message:

How To Make Your 404 Page Great

If a user has arrived at a 404 page on your website, what you really want to do is help them get to the content they intended to arrive at. If the server’s default 404 page is displayed, chances are the user is going to hit ‘Back’ and find the content they were looking for somewhere else.

  1. <?php get_header(); ?>
  2. <div id=“page”>
  3.     <h1>Page Not Found</h1>
  4.     <p>We‘re very sorry, but the page you requested has not been found! It may have been moved or deleted.</p>
  5.     <p>I’m not blaming you, but have you checked your address bar? There might be a typo in the URL.</p>
  6.     <p>If there isn‘t, you could try searching my website for the content you were looking for:</p>
  7.     <?php get_search_form(); ?>
  8.     <p>Or maybe you were looking for one of my popular posts:</p>
  9.     <ul>
  10.         <li><a href=”http://www.website.com/popular-post1″>Popular Post 1</a></li>
  11.         <li><a href=”http://www.website.com/popular-post2″>Popular Post 2</a></li>
  12.         <li><a href=”http://www.website.com/popular-post3″>Popular Post 3</a></li>
  13.         <li><a href=”http://www.website.com/popular-post4″>Popular Post 4</a></li>
  14.     </ul>
  15.     <p>Alternatively, you can go to <a href=”http://www.website.com”>my home page</a> or <a href=”http://www.website.com/archives”>browse my archives</a></p>
  16.     <p>One last thing, if you’re feeling so kind, please <a href=“mailto:webmaster@website.com”>tell me</a> about this error, so that I can fix it. Thanks!</p>
  17. </div>
  18. <?php get_sidebar(); get_footer(); ?>

 

How to Make Error 404 Page Useful by adding Suggestion

If a user has arrived at a 404 page on your website, what you really want to do is help them get to the content they intended to arrive at or if they are not available then suggest them something informative and alternative to his search so they don’t leave your website. By this definately user is going to hit ‘Back’ and find the content they were looking for somewhere else.

<?php get_header(); ?>
<div id=”content-container” class=”clear”>
<div id=”main” class=”wrapper”>
<div id=”content-header-ad”>
<div id=”header-ad”><a href=”#”><img src=”http://tutsplus.s3.amazonaws.com/cs6affiliate/728x90_cs6.png” /></a></div>
<div id=”content”>
<div class=”post single”>
<div class=”post-header”>
<h1 class=”title”><?php _e( ‘Error 404 | <span>The page you are looking for does not exist.</span>’, ‘uxdem’ ); ?></h1>
</div>
<div class=”entry single”>
<p><?php _e( ‘We are terribly sorry, but the URL you typed no longer exists. It might have been moved or deleted, or perhaps you mistyped it. ‘, ‘uxdem’ ); ?></p>
<?php query_posts( ‘showposts=20’ ); ?>
<?php if ( have_posts() ) : ?>
<ul>
<?php while (have_posts()) : the_post(); ?>
<li><a href=”<?php the_permalink(); ?>” rel=”bookmark” title=”<?php the_title(); ?>”><?php the_title(); ?></a></li>
<?php endwhile; endif; ?>
</ul>
</div><!– end .entry–>
</div><!– end .post–>
</div><!– end #content–>
</div>
<?php if ( is_active_sidebar( ‘index_sidebar’ ) ) : ?>
<div id=”sidebar”>
<div id=”sidebar_content”>
<?php dynamic_sidebar( ‘index_sidebar’ ); ?>
</div><!–END sidebar_content–>
<div id=”sidebar_bottom”></div>
</div><!–END sidebar–>
<?php else : ?>
<?php get_sidebar(); ?>
<?php endif; ?>
<!–END #content-container –>
</div>
<?php get_footer(); ?>How To Make Your 404 Page Great

Easy Error Page 404

Depending on your theme currently used, you just have to find where the content is placed. lets take the default WordPress 3 Twenty Ten 1.1 theme as an example. This is what it should look like.

<?php
/**
 * The template for displaying 404 pages (Not Found).
 *
 * @package WordPress
 * @subpackage Twenty_Ten
 * @since Twenty Ten 1.0
 */

get_header(); ?>

	<div id="container">
		<div id="content" role="main">

			<div id="post-0">
				<h1><?php _e( 'Not Found', 'twentyten' ); ?></h1>
				<div>
					<p><?php _e( 'Apologies, but the page you requested could not be found. Perhaps searching will help.', 'twentyten' ); ?></p>
					<?php get_search_form(); ?>
				</div><!-- .entry-content -->
			</div><!-- #post-0 -->

		</div><!-- #content -->
	</div><!-- #container -->
	<script type="text/javascript">
		// focus on search field after it has loaded
		document.getElementById('s') && document.getElementById('s').focus();
	</script>

<?php get_footer(); ?>