General

All other little handy tips that can’t really fit in any specific category

Photography

Photography technique, tutorials and equipment review.

Computers

Tips, tutorials and solutions for Windows, Macs, Linux, Servers and Media Centers. Get the very most out of your computer. Resources for all levels from newbies and techies.

Web Design and Development

Tools, tech tips and tutorials for web design and development. Including wordpress plugins and tweaks.

Tools and Productivity

Software, web applications, scripts and tools to make your computing, design, development or networking experience more easier, enjoyable and productive.

Home » Featured, Web Design and Development

How to Create a Custom 404 Page

Submitted by

Broken Links

A 404 page is what a user sees when they reach a page on your website which does not exist. This can be from clicking a broken link, the page they are looking for has been moved, deleted or they have typed in a wrong address.

Why is this important?

Having a custom 404 page is important as it preserves the website’s look and feel and provides a better user experience. It might help you retain a visitor who would otherwise leave when encountered with a standard 404 (Page not found) page.

Step by Step Instructions

Below are instructions for creating a custom 404 page for your website or wordpress site.

Create a custom 404 for your website

  1. Create your custom 404 html page.
    This is the page you want your visitors to be shown when they try to access a page on your site which does not exist.
    Save the file as 404.html and put it in your website’s root directory. (e.g: in /public_html )
  2. Create a file (if it doesn’t already exists) named .htaccess in your website’s root directory.
    The name of the file is .htaccess (and yes that includes the . in front of name).
  3. Modify the .htaccess file.
    Add the following line:
    ErrorDocument 404 /404.html
  4. Test that it works.
    Type a url that you know does not exist and check that you are shown the 404.html page which you have created in step 1.

Note: Not all web servers (especially free ones) might support this functionality. Check with them to see if they support customized .htaccess. Or if you have done the steps above correctly with no success, then chances are your web server does not support customized .htaccess.

Create a custom 404 for your wordpress site

Creating a custom 404 page might be as simple as creating a 404.php in the wordpress themes folder at
http:///wp-content/themes//404.php
or it can require a few more extra steps. It depends on the wordpress theme you are using.

There is a very good and detailed instruction for doing so on the wordpress website at http://codex.wordpress.org/Creating_an_Error_404_Page

Tips for what to include in the custom 404 page

Just telling your visitors that the page can not be found is not good enough. You need to provide them with a way to find the document they were originally after or they will leave.

Below are some points on what you can include in your custom 404 page.

  • The 404 page should have the same look and feel as the rest of your website.
  • Include a link to your main page, with a suggestion that the visitor can find what he/she wants there.
  • Your web site search engine (if you have one).
  • A link to your website’s site map (if you have one).
  • A form allowing visitors to report the broken link.
  • If you have a blog, consider having a list of popular posts.

Create an animated 404 page.

I found this really cool animated 404 page which you can download and use for your website.
It’s that of a rocket blasting off to space.
Take a look at it here.
Do download it here.

Noteworthy and Entertaining 404 pages

Below are some interesting 404 pages worth checking out to get inspiration for your custom 404 page.

Your Turn

Got a good 404 page? Or know of a cool one? We love to hear about. Share it with everyone in the comments.

Edwin Kwan is the founder and editor of Little Handy Tips and Wollongong Fitness. He is also the developer for the Google Custom Search WordPress plugin and Custom About Author WordPress plugin. He also has a keen interest in Photography . Find out more about him here.

Google+ 

Tags: ,

css.php
%d bloggers like this: