There are a lot of reasons visitors to your site may get the feared “404 Error” page. They made a mistake and typed in the URL wrong. Or the page was renamed or deleted. Whatever the case they end with a page that just says “Error 404 -Not Found”. Check out the default “Kubrick” themes 404 page (default 404). That surely doesn’t help your visitor. They may think there’s something wrong with your site and just move on and leave for good.

Instead of just giving your visitor a confusing page with a cryptic message, offer them a solution. I’ll bet most site owners error pages are the default, ugly uninformative error page.

Below are few inspirational 404 pages…

example-404-2example-404-1example-404-3example-404-4

Let’s make an awesome 404 error page

We could use a plugin to redirect our visitor but I would prefer that they know the URL is wrong so they can update their bookmark or link.

Fortunately WordPress keeps track of everything we’ll need to make a killer 404 page and keep our visitor from getting lost and leaving. The $wp_query->query_vars['name'] variable holds the information we need to make our new 404 page.

If a visitor hits our 404 page we’re going to give them some choices to help them find their way. Here’s what we’ll provide them…

  1. We’ll show them some posts to choose from that may be related to what they’re looking for.
  2. We’ll give them a search box to do a site search.
  3. We’ll give them suggestions to check the URL for spelling.
  4. We’ll direct them to our sitemap (you have one don’t you?).
  5. And finally, we’ll direct them back to our home page.

Here’s the code we’re going to be putting in our 404.php file.

Put the following code just above the get_header(); line…

<?php get_header();?>

Like this…

<?php
function bts_strip_attachments($where) {
	$where .= ' AND post_type != "attachment"';
	return $where;
}
add_filter('posts_where','bts_strip_attachments');
?>
<?php get_header();?>

This function cleans up the query_posts results so that we can get the rest of the info we need for our visitors.

Now put the following code in place of your existing 404 error message…

<h2>Sorry but I can't find the page you're looking for...</h2>

		<p>Let me help you find what you came here for:</p>
		<?php
			$s = preg_replace("/(.*)-(html|htm|php|asp|aspx)$/","$1",$wp_query->query_vars['name']);
			$posts = query_posts('post_type=post&name='.$s);
			$s = str_replace("-"," ",$s);
			if (count($posts) == 0) {
				$posts = query_posts('post_type=post&s='.$s);
			}
			if (count($posts) > 0) {
				echo "<ol><li>";
				echo "<p>Were you looking for <strong>one of the following</strong> posts or pages?</p>";
				echo "<ul>";
				foreach ($posts as $post) {
					echo '<li><a href="'.get_permalink($post->ID).'">'.$post->post_title.'</a></li>';
				}
				echo "</ul>";
				echo "<p>If not, don't worry, I've got a few more tips for you to find it:</p></li>";
			} else {
				echo "<p><strong>Don't worry though!</strong> I've got a few tips for you to find it:</p>";
				echo "<ol>";
			}
		?>
			<li><p>
				<label for="s"><strong>Search</strong> for it:</label>
				<form style="display:inline;" action="<?php bloginfo('siteurl');?>">
					<input type="text" value="<?php echo esc_attr($s); ?>" id="s" name="s"/> <input type="submit" value="Search"/>
				</form></p>
			</li>
			<li><p>
				<strong>If you typed in a URL...</strong> make sure the spelling, cApitALiZaTiOn, and punctuation are correct. Then try reloading the page.</p>

			</li>
			<li><p>
				<strong>Look</strong> for it in the <a href="<?php bloginfo('siteurl');?>/sitemap/">sitemap</a>.
				</p>
			</li>
			<li><p>
				<strong>Start over again</strong> at my <a href="<?php bloginfo('siteurl');?>">homepage</a> (and please contact me to say what went wrong, so I can fix it).</p>
			</li>
		</ol>

For Artisteer Generated Themes

If you’re modifying an Artisteer generated theme you’ll want to place the above code into your 404.php file in the location I’ve indicated below…

<div class="art-BlockContent-body">
// Replace the code in this div with the new code above
<h2 class="center"><?php _e('Error 404 - Not Found', 'kubrick'); ?></h2>

</div>

You might also want to change the text in your block header. Find this bit of code…

<?php _e('Not Found', 'kubrick'); ?>

And replace “Not Found” with some other descriptive text. Remember to keep it within the single quotes.

Now that you’re all done you should have a 404 page that looks something like this…

bts-404

Now get to work and make a great looking and informative 404 error page for your site.

If you have any questions or need some help, just leave a comment and I’ll do what I can to help you out.

Disclaimer

I make no promises as to the functionality of these modifications to your theme code. Do it at your own risk. Do it on a backup copy. Do it while wide awake and after having plenty of sleep or plenty to drink, your choice. Don’t do it to your original code. Don’t do it while sleepy, cranky, or driving. And most important, don’t expect it to work the first time. If it does work the first time you probably got lucky. Besides, if you don’t break things you never figure out how they work. And last but not least…Have fun and learn something new.

Comments are closed.

Awesome Themes



Genesis Framework for WordPress

Favorite Random Quotes

“You can't wait for inspiration. You have to go after it with a club.”

by Jack London