Custom error pages

Learn how to create custom error pages for your website using a .htaccess file

Introduction

This is a very common question asked across the web daily. A custom error page allows you to manage errors on your website more effectively. So why would you want custom error pages for your site?

  • Users stick around - a good custom error page will enable users to continue to browse your website despite an error occuring.
  • They're helpful - your average internet user may be put off a site because of the default error page. A custom one allows them to easily understand whats gone wrong and - more importantly - how to fix it!
  • They look nicer!

This short tutorial will explain how to create custom error pages using an Apache servers .htaccess document.

Creating the .htaccess

The first thing to do is to create the .htaccess document that will tell the server where to find the error page that corresponds to the error. If you dont know how to create a .htaccess file then continue to read on else you can move on to the next section.

The best way I find to create a .htaccess file is to create a new plain text (.txt) file using notepad (or similar). Save the file as .htaccess.txt on your computer. When you upload the file to your web server you will need to remove the .txt extension thus creating your .htaccess file

You could also use your operating system to associate a program to edit and open .htaccess files.

The code

The following code is to be placed into your .htaccess file:

ErrorDocument 404 /folder/file.htm

The syntax of this code is:

ErrorDocument [errorcode] [error_page_file]

The above example error code, 404, is for a page could not be found error. There are other error codes you can use:

  • 400 - Bad request
  • 401 - Authorization Required
  • 403 - Forbidden directory
  • 500 - Internal Server Error

You may wish to have a general error page for the most common types of errors, in which case the content of your .htaccess file may look something like this:

ErrorDocument 404 /pages/error.html
ErrorDocument 500 /pages/error.html
ErrorDocument 403 /pages/error.html

However you could go a step further have a different page for each error and so you'll probably end up with something like this:

ErrorDocument 404 /pages/error404.html
ErrorDocument 500 /pages/error500.html
ErrorDocument 403 /pages/error403.html

Whatever you decide don't forget to change the path to the correct location of the error page on your website!

Creating the actual error page itself is beyond the scope of this tutorial however somethings an error page could include:

  • What went wrong - in simple terms!
  • Solutions to fix the error (for example, check the spelling of the URL)
  • A link to your websites home page
  • A link to return the user back to the previous page (our code snippets will help with that!)
  • A search for your site

You can view an example of a 404 page not found error page right here - error page

Once the .htaccess and your error page are uploaded, you're good to go with your brand new custom error page!

 

Return to top Bookmark with:


advertisement

Tips & advice

Need coding help? Tips, tricks or advice? Check out our webmaster forums