real blogging tips

Until very recently I thought I had a real 404 error page. The truth of the matter is I could not have been more wrong about the whole situation. Now let me tell you exactly what a 404 page is before your head explodes. The number 404 refers to an error when a page is not found on a web server. I am sure that all of us have encountered this at one point or another. By default you may have seen the Apache web server error for the 404 error which told you nothing other than this is not here. Not helpful by any stretch of the imagination. The other option more than likely was a default screen which IE or FF will display in these instances. Again not the least bit helpful. Now their is a more obscure page that may have displayed due to some themes actually incorporating it into their word press themes, and really all this does for you is displays the site devoid of the “content area” with the text 404 page not found. Equally as helpful to you the webmaster, or you the reader.

Let’s delve further into why this is an issue you need to contend with, and then let me show you how to fix it.

This can be a tough situation as a new found reader may have happened unto your site via an old link, or a mistyped link. I am willing to bet that if faced with no helpful options that they may use their time a bit more wisely and move on, after all you were thoughtless enough not give them some kind of option, or at the very least let them know that you also now know that the page can not be found and that your working on it. You can clearly see at this point that staying on the productive side of it all you need a real 404 error page, and you need to present whoever it is that arrives at it with options that can help them find the content which they seek. Also you want them to know that an automatic message is being sent with all the details to your email so you can see if something in fact was wrong, and fix it. Let me show you what I have done myself here on this blog step by step. Everyone should have one of these.

Always back up your site before attempting any major changes

First things first some of you will be pro’s at this while the rest of us will be just squeaking by. Back up your site just in case something does not work out the way it should have. Unexpected downtime is not an enjoyable factor especially if you do not quite understand what you did to break it all. This is just good advice for any project.

.Htacess What is it, and do you have access?

Some web hosts (including most of the popular free ones I would imagine) will not permit this sort of tampering because it might mess something else important up. This is generally thought of as an “advanced” modification. Find an FAQ or email the people in charge of your server and ask if you can set it up. If you have your own domain, you shouldn’t have any restrictions of this kind. If you do you will be able to relay to them what it is you need and they should set it up without issues.

Your .htaccess text file is the special file that sets up the whole deal for you. It can contain all sorts of directions for your Apache server. If you’re not using an Apache-based server, you’ll have to read your server’s manual on how to do it.

Look in your root directory, the place where your homepage is, for this file (.htaccess). If it’s not there don’t fret, you can just create it afresh and it won’t make any difference. When doing so, just make an empty text file in Notepad or whatever, and make sure you start the file name with a dot — it’s vital. Starting a file name with a dot makes it a hidden file in Unix.

For now, just save a basic HTML page with the words “404 error” in it so that we can test that it works. I’ll show you how to make a useful custom 404 error page a little later.

Edit .htaccess

Now we need to put a line of code into the .htaccess file so that the webserver knows where to point a user automatically if they do encounter a page not found error. Cut and Paste the following into a local copy of your .htaccess. You can add it ad the bottom.

ErrorDocument 404 /404page.php

Make sure it’s all on one line. Start the file path with a slash, which tells the server to start looking in your root directory (where your homepage is), and follow the path you specify.

Now upload your .htaccess file to your root directory, and your 404 page to the location you specified, and you’re ready to start on the next phase. Of course test this and make sure everything is working as intended.

Let’s Build A Useful 404 Page:

A good 404 error page must have a number of things to be truly useful — it’s not much good simply putting up a message saying “we apologize for messing up.”

• Your 404 page should look similar to the rest of your website, so that visitors know that they’re still on part of your site.
• Explain the error that has occurred, and perhaps describe common reasons for the error (mistyped URLs, outdated content etc.). Use clear language and don’t ramble. Since it’s such a well-known error code, including the number “404” in this summary will get the message across quickly.
• If your site has a search function, include a search box.
• If you have an index, add a link to it, and definitely link back to your homepage.
• Do not make the user work any harder than you have to. Let them know you are receiving emails about any errors and in the meantime to use this page to navigate.

Overall, just make sure you motivate your reader not to lose all faith in your site, and give them options as to where to go next.

Popular destinations are the archives, contact, about or other top level pages that would include valuable content to your potential user. Also offer them an extra search box just in case they did mistype whatever it was they were looking for. The goal is to accommodate them as much as possible.

How to get notified by email when someone is reaching your 404 error page

This is actually the easiest part of this whole post a wonderful word press plug in that you just type in your email address , update and viola your done. I do however suggest you create a custom email addy on your domain to receive these mails from as sometimes you can get a large amount. I use 404 @ benjaminpatton dot com.

You can grab this wonderful plug in from the word press plug in site or right click and save here.

As with all plug ins you will need to unzip, upload to your plug in’s director and activate via the wordpress plugin panel.

How to create your word press theme with header/footer/sidebar 404 page (just like I have done)

Now if your like me you are not going to be satisfied by just knowing that people are arriving at slightly juiced up 404 error page. No your the type that wants to make the best impression possible by letting them land on your site, see your theme and be presented with many options in order to increase the retention possibilities. Let me show you how I did this.

First let me remind you to back up your site. If you make an error here you may have some issues that could cause down time. That being said I will try to make this easy enough for someone (like me) who has never ever attempted anything like this.

First you will need to go to your word press admin panel and surf to the design section, pull up your main page template. (index.php) Highlight the entire document and copy it to an open window in notepad.

So far so good right? Now pull out the surgical equipment its about to get messy. No not really, but it was fun to see the look on your face.

The next step is to remove the entire LOOP section from the code. I know this sounds strange and to some of you I may have just told you to solve for pi. Here is a short walk through on how to remove the loop from this page.

The loop always starts with this line of code:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

and will always end with this line of code:

<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>

Now just in case you want to know more about this or your not familiar with The LOOP here is the word press codex page dedicated to just that.

Wordpress Codex – The Loop

Ok your going to highlight and delete from where that starts to where it finishes. Effectively what you have done is eliminated anything that would have been put in the page where your normal content goes. Now we can get to building that super awe inspiring but kicking 404 page not found page.

Now that you have done this to your local copy of the index rename it from whatever it was to 404.php. Now we are ready to put the custom spin on the 404 and rock it out.

We know why we need it, we know what we need to present and now to implement the last stage of the plan!

First we need a nifty 404 image. Make sure it is not going to take up an entire page, but make sure it grabs a persons attention that an error has occurred.

Put the proper html for the img and its location, and make sure to use your alt text accordingly.

Next we will need to let them know where they are, which of course is our new found 404 page, so enter in a headline “404 Error Page Not Found”.

Next we will want to implement and code the options that we wish to give our lost reader before they go splitsvile on us.

On my page immediately after the error text I let the reader know exactly what happened and that I am on top of it. Feel free to use the text I did if you like:

Don’t you just hate that? The page you’ve tried to access was not found and that’s just sad! And I’ll bet it was going to be something really interesting, too. Who knows why these things happen — solar flares, deforestation, global warming, webmaster goofs, or maybe just plain old bad typing?

The Good News Is That An Email Has Been Dispatched To My Inbox And I Should Have This Page Fixed For You Shortly!

Next we will actually put some links in front of viewer the ones I used are:

About Us
Contact Form
The Blogger’s ToolBox
Big Ben Patton Testimonial’s
Big Ben Patton’s Advertising Page
Subscribe to the Big Ben Patton’s Place RSS feed

I even added the nifty little images too. You could link anywhere you like, but make sure you link to something as your time is short with someone who has arrived at a non existent page.

I also added the option for a direct link to my archives and site map:

But wait, there’s even more! You can also browse through our Site Map or our Archives.

And for me lastly a embedded google search box with the text above it saying:

You can use the Google box provided below to search for specific pages at benjaminpatton.com:

By empowering your readers in this manner you are taking steps towards higher retention, happier readers and a well run site. All of which is what we are aiming for is it not?

Lets Upload It And Test It Out

Ok lets upload this to the proper directory, you know the one you pointed to earlier in your .htaccess. And then lets give it a spin. If you did everything correctly you will arrive unwittingly at your brand spanking new 404 page. Congratulations. You should also scurry to check your mail as well if you decided that you did want the automatic notifications as you should have one.

BONUS TIME!

What you thought I was going to make you read over 2000 words and not toss in a free bonus? Outstanding huh? Alright if your like me you also want the error page to be a bit more traceable and you want to include the text that was linked right? OK include this right above in the code where you put your first img tag earlier for the 404 error image and it will rewrite the title of the page to exactly what the new found user had typed or been linked to:

<div class="post-content">
<script type="text/javascript">
pageTracker._trackPageview("/missing pages" _udl.pathname+_udl.search)
document.write("<p>The page: " +_udl.pathname+_udl.search+ " is not found</p>")
</script>

Now you have the best 404 page possible, well except for that nasa in developing which reads your mind and redirects to the proper page automatically.

I hope this helps everyone out. If your watching your analytics you will notice quite a bit of these issues showing up now that you have a way to track them, and fix them!

Related posts:

1. You Need A Custom Robots.txt, So Lets Make One.
2. Add a Custom Favicon to Your Site…
3. Important Page Rank Factors Exposed
4. How To Cloak Affiliate Links
5. The Page Rank Update And What You Need To Know