PRETTY USER FRIENDLY CUSTOM ERROR PAGES TUTORIAL

Do you want to share WYSIWYG Web Builder tips, tricks, tutorials or useful HTML code? You can post it here...
(no questions or problems please, this section is not monitored by support).
Forum rules
This section is to share tips, tricks and tutorials related to WYSIWYG Web Builder.
Please do not post questions or problems here. They will not be answered.

PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901
Post Reply
genieuk
 
 
Posts: 129
Joined: Fri Mar 06, 2009 2:10 am

PRETTY USER FRIENDLY CUSTOM ERROR PAGES TUTORIAL

Post by genieuk »

Hi Everyone,

I thought i would write this tutorial for people who may not know how to.

Basically you have likely seen before on other websites that if you access a page that does not exist for example you get a horrible 404 error in your browser.

What is the problem with this?

1) First it just shows an ugly white page with a 404 error (page not found) message.

2) Secondly it means user has to press the back button in there browser to go back to website.

3) The error message is noth blended in with your site theme and looks unprofessional.

4) Some people won't understand such error messages and likely they will leave your website.

So how do we webmasters solve this?

Simple really....

By setting up your own custom error messages, not only you can make them blend in with your site, you can for example say... sorry we could not find the page you was looking for etc...

Most webhosts allow you to edit your .htacess file in your root directory. Most times they tell you if you can in the documentation etc. If not sure just ask.

Note: Servers running Windows apparently does not allow you to create a .htaccess file. I have never used a windows server so cannot comment on this. This tutorial has been made based on a linux server not windows server.

Ok here we go...

1) Edit your .htaccess file in something like notepad and add the following to it: (the .htaccess file you want is in your root directory. If there isn't one just create one, make sure it is called .htaccess (notice the dot to in the filename? that is also required. also if editing in notepad make sure notepad does not add the .txt extension on the end of the filename)

Code: Select all

ErrorDocument 404 /error/404.php
ErrorDocument 400 /error/400.php
ErrorDocument 401 /error/401.php
ErrorDocument 403 /error/403.php
ErrorDocument 500 /error/500.php
ErrorDocument 501 /error/501.php
ErrorDocument 502 /error/502.php
ErrorDocument 503 /error/503.php
Now before i go any further i want to say is that in the code above all the error message pages are in a folder called error as you can see in code above and to indetify each page easily they are named 404.php and so on.

You can of course place them in any folder you want or directory just remember to change the error folder above to whatever folder you want to use, i think a folder called error is perfect thou. Also you can change the error page names, again just make sure you change them in the code above to your own names, althou i think it's best to leave as it is as it makes sence.

Another thing is you don't have to create all 8 error pages. I do personally on my website but you can just use the most popular ones that people are likely to see, the well known error people see. If you decide for example to just have your own 404 custom error page and no other custom error pages just remove them from the code above and obviously do not bother creating the error page for any of the errors you removed from the .htaccess code that you don't want to use.

Example: if you don't want to create a custom error page for the 400 error then just remove the following from the .htaccess code:

ErrorDocument 400 /error/400.php

and don't create a 400.php error page.

Now lets do the exciting bit.

Now some websites have really funny error pages to sort of keep the visitor happy if they do happen to see such an error page.

For example, do a google search, some of the error pages people create are very funny and some are somewhat rude etc. An example search term you could use is:

funny custom error pages

I found some here:

http://blogof.francescomugnai.com/2008/ ... ror-pages/

That will bring back results that show some error messages people create.

Obviously in web builder you can create them as you wish, infact anything you like. Personally i think it's best to make sure your website design is on the error page so if the user ends up on an error page at anytime the navigation menu etc and site design will still be seen so they can still navigate about etc and make it user friendly as possible.

Rite so Open Web Builder and create a folder in the root directory in sitemanager and call it error

(if you changed the folder name error in the .htaccess code above then remember to name accordingly here).

Now create the following webpages in the error folder in web builder. Like i said previously you can design them as you wish etc. Also you don't have to create all error pages like i said above, if not just remove the ones you dont want to create in the .htaccess code above.

Note: The pages below DO NOT have to be .php extension. I just done this as i use .php file extension on my website, but if you add any php code yourself to the pages then obviously use the .php file extension.

404.php
400.php
401.php
403.php
500.php
501.php
502.php
503.php

Ok let's assume you created those pages now in a folder called error in web builder. It is basically a matter of simply uploading your website and saving the .htaccess file and overwriting the old .htacess in your root directory. I do recommend making a backup of your old .htaccess incase you do something wrong althou it is very hard to get it wrong.

Now i will explain what each error code means and give you some example text i use on my site that you could perhaps use on yours. Obviously you can't test all error messages as some relate to browser errors, server errors etc that will only be shown when there is a problem for example with your web server, users browser etc.

You can search google for a indepth explanation on each error if you want to understand them fully.

Another thing to note is some of these errors can mean several possible things but i have in the examples given you an idea of the possible cause for each error. Like i said you can Google search to get a more indepth explanation on each error message if you want.

Also in web builder you could do other things like auto-redirect the error page to for example homepage after xx seconds etc.

404.php
(means page not found / does not exist on the server, sample text you could use:
Oops ... We could not find it.
Sorry you have requested a page or file which does not exist or no longer exists.
Here are a few options to find what your looking for.
Double check the web address for typos
Head back to our homepage via the navigation menu
Use our search facility to try and find what your looking for
This page will automatically redirect to the homepage in 60 seconds.
To see this page in action just go to the link below on my website, it is basically a file that does not exist on my webserver. You will see the 404 error message above but obviously more pretty.

http://www.genieuk.co.cc/blah.php

400.php
(usually means user browser is not responding correctly).. again some sample code below.
HTTP ERROR 400
Sorry, it seems your browser is not responding properly.
Try refresing this page. If problem persists search Google for possible solutions. The error code you need is: Error 400 bad request
If you are able to and would like to go our homepage click here
We will redirect you to our homepage in 20 seconds.
401.php
(usually means a page is off limits to user)
HTTP ERROR 401
Sorry, this page is off limits to unauthorized users.
You are seeing this page as your trying to access an area that needs autheticating.
If you would like to go to the index page please click here
We will redirect you to our homepage in 20 seconds.
403.php
(usually means a directory is off limits to a user)

Example error page from my site if someone tries to directly access the directory: http://www.genieuk.co.cc/member/
Oops ...

Sorry, this directory is off limits to unauthorized users.
You are seeing this page as your trying to access a directory that cannot be viewed.
Maybe you accidentally made a typo in the url

Here are a few options to find what you maybe looking for.

Double check the web address for typos
Head back to our homepage via the navigation menu
Use our search facility to try and find what your looking for
500.php
(usually means problem with server sometimes just a reboot)
Uh Oh ...

This is so embarrassing but there seems to be a small problem with our servers. Usually i am just being rebooted and will be back in a flash.

It's best to be safe than sorry so we have notified the administrator to check it out.

This page will automatically redirect to the homepage in 60 seconds.
501.php
(usually means a problem with visitors internet)
HTTP ERROR 501

Sorry, there seems to be a problem with your internet.

The problem is usually caused by a third party product interfering with your browser.

More information on this error can be found at: <a href="http://support.microsoft.com/kb/811262">HTTP Error 501 - Microsoft Support</a>

We will redirect you to our homepage in 20 seconds.
502.php
(usually means a problem poor ip communication)
HTTP ERROR 502

Sorry, there seems to be a problem.

This problem is due to poor IP communication between back-end computers, possibly including the Web server at the site you are trying to visit. Before analysing this problem, you should clear your browser cache completely.

If you are surfing the Web and see this problem for all Web sites you try to visit, then either 1) your ISP has a major equipment failure/overload or 2) there is something wrong with your internal Internet connection e.g. your firewall is not functioning correctly. In the first case, only your ISP can help you. In the second case, you need to fix whatever it is that is preventing you reaching the Internet.

If you get this problem for only some of the Web sites you try to visit, then it is likely to be a problem at those sites i.e. one of their pieces of equipment is failing/overloaded. Contact the people at those sites.
503.php
(usually means server is closed for repair, upgrades, rebooting)
Uh Oh ...

Sorry, Our web server is either closed for repair / upgrades or is rebooting.

Usually i am just being rebooted and will be back in a flash.
Now i know this was long but it is very simple really. I just wanted to explain everything as much as i could for novice users.

Hope you enjoyed this tutorial and hope you will find this useful.

Regards,
Mathew
Last edited by genieuk on Thu Feb 04, 2010 7:15 pm, edited 1 time in total.
User avatar
Eddy
 
 
Posts: 473
Joined: Tue Nov 27, 2007 1:52 am
Location: Nederland.

Post by Eddy »

Very good tutorial !

Thanks. :wink:
genieuk
 
 
Posts: 129
Joined: Fri Mar 06, 2009 2:10 am

Post by genieuk »

Thanks Eddy,

Glad you like it :)

I have had this setup on my site since i launched it and thought i would share it with web builder users.

I know many cpanel(s) have custom error scripts, but i found them almost useless, plus they are not easy for web builder users to setup and configure etc hence why i thought i would make this tutorial.

I went on and blabbed a bit in the tutorial but i wanted to try and explain as easy as possible.

Regards,
Mathew
genieuk
 
 
Posts: 129
Joined: Fri Mar 06, 2009 2:10 am

Post by genieuk »

kevin85 wrote:nice tutorial! thanks for sharing.
_______________________
search engine optimization | -kevin chipper-
No problem Kevin glad you like it :)

All the Best

Mathew
User avatar
me.prosenjeet
 
 
Posts: 1265
Joined: Mon Dec 24, 2007 1:50 pm
Location: Lucknow
Contact:

Post by me.prosenjeet »

Nice tutorial!

For the ease of all, I already have the 404 page extension in the extensions section, which makes its use even simpler:
Custom 404 page extension
Check the new Chat GPT and Malware detect extensions at the link below

Check my WB Extensions
Check my WB Templates
---------------------------------------------------------
www.Lucknowwebs.com
User avatar
stevieb
 
 
Posts: 65
Joined: Thu Jul 08, 2021 9:05 pm

Re: PRETTY USER FRIENDLY CUSTOM ERROR PAGES TUTORIAL

Post by stevieb »

genieuk wrote: Thu Feb 04, 2010 5:12 pm Hi Everyone,

I thought i would write this tutorial for people who may not know how to.

Basically you have likely seen before on other websites that if you access a page that does not exist for example you get a horrible 404 error in your browser.

What is the problem with this?

1) First it just shows an ugly white page with a 404 error (page not found) message.

2) Secondly it means user has to press the back button in there browser to go back to website.

3) The error message is noth blended in with your site theme and looks unprofessional.

4) Some people won't understand such error messages and likely they will leave your website.

So how do we webmasters solve this?

Simple really....

By setting up your own custom error messages, not only you can make them blend in with your site, you can for example say... sorry we could not find the page you was looking for etc...

Most webhosts allow you to edit your .htacess file in your root directory. Most times they tell you if you can in the documentation etc. If not sure just ask.

Note: Servers running Windows apparently does not allow you to create a .htaccess file. I have never used a windows server so cannot comment on this. This tutorial has been made based on a linux server not windows server.

Ok here we go...

1) Edit your .htaccess file in something like notepad and add the following to it: (the .htaccess file you want is in your root directory. If there isn't one just create one, make sure it is called .htaccess (notice the dot to in the filename? that is also required. also if editing in notepad make sure notepad does not add the .txt extension on the end of the filename)

Code: Select all

ErrorDocument 404 /error/404.php
ErrorDocument 400 /error/400.php
ErrorDocument 401 /error/401.php
ErrorDocument 403 /error/403.php
ErrorDocument 500 /error/500.php
ErrorDocument 501 /error/501.php
ErrorDocument 502 /error/502.php
ErrorDocument 503 /error/503.php
Now before i go any further i want to say is that in the code above all the error message pages are in a folder called error as you can see in code above and to indetify each page easily they are named 404.php and so on.

You can of course place them in any folder you want or directory just remember to change the error folder above to whatever folder you want to use, i think a folder called error is perfect thou. Also you can change the error page names, again just make sure you change them in the code above to your own names, althou i think it's best to leave as it is as it makes sence.

Another thing is you don't have to create all 8 error pages. I do personally on my website but you can just use the most popular ones that people are likely to see, the well known error people see. If you decide for example to just have your own 404 custom error page and no other custom error pages just remove them from the code above and obviously do not bother creating the error page for any of the errors you removed from the .htaccess code that you don't want to use.

Example: if you don't want to create a custom error page for the 400 error then just remove the following from the .htaccess code:

ErrorDocument 400 /error/400.php

and don't create a 400.php error page.

Now lets do the exciting bit.

Now some websites have really funny error pages to sort of keep the visitor happy if they do happen to see such an error page.

For example, do a google search, some of the error pages people create are very funny and some are somewhat rude etc. An example search term you could use is:

funny custom error pages

I found some here:

http://blogof.francescomugnai.com/2008/ ... ror-pages/

That will bring back results that show some error messages people create.

Obviously in web builder you can create them as you wish, infact anything you like. Personally i think it's best to make sure your website design is on the error page so if the user ends up on an error page at anytime the navigation menu etc and site design will still be seen so they can still navigate about etc and make it user friendly as possible.

Rite so Open Web Builder and create a folder in the root directory in sitemanager and call it error

(if you changed the folder name error in the .htaccess code above then remember to name accordingly here).

Now create the following webpages in the error folder in web builder. Like i said previously you can design them as you wish etc. Also you don't have to create all error pages like i said above, if not just remove the ones you dont want to create in the .htaccess code above.

Note: The pages below DO NOT have to be .php extension. I just done this as i use .php file extension on my website, but if you add any php code yourself to the pages then obviously use the .php file extension.

404.php
400.php
401.php
403.php
500.php
501.php
502.php
503.php

Ok let's assume you created those pages now in a folder called error in web builder. It is basically a matter of simply uploading your website and saving the .htaccess file and overwriting the old .htacess in your root directory. I do recommend making a backup of your old .htaccess incase you do something wrong althou it is very hard to get it wrong.

Now i will explain what each error code means and give you some example text i use on my site that you could perhaps use on yours. Obviously you can't test all error messages as some relate to browser errors, server errors etc that will only be shown when there is a problem for example with your web server, users browser etc.

You can search google for a indepth explanation on each error if you want to understand them fully.

Another thing to note is some of these errors can mean several possible things but i have in the examples given you an idea of the possible cause for each error. Like i said you can Google search to get a more indepth explanation on each error message if you want.

Also in web builder you could do other things like auto-redirect the error page to for example homepage after xx seconds etc.

404.php
(means page not found / does not exist on the server, sample text you could use:
Oops ... We could not find it.
Sorry you have requested a page or file which does not exist or no longer exists.
Here are a few options to find what your looking for.
Double check the web address for typos
Head back to our homepage via the navigation menu
Use our search facility to try and find what your looking for
This page will automatically redirect to the homepage in 60 seconds.
To see this page in action just go to the link below on my website, it is basically a file that does not exist on my webserver. You will see the 404 error message above but obviously more pretty.

http://www.genieuk.co.cc/blah.php

400.php
(usually means user browser is not responding correctly).. again some sample code below.
HTTP ERROR 400
Sorry, it seems your browser is not responding properly.
Try refresing this page. If problem persists search Google for possible solutions. The error code you need is: Error 400 bad request
If you are able to and would like to go our homepage click here
We will redirect you to our homepage in 20 seconds.
401.php
(usually means a page is off limits to user)
HTTP ERROR 401
Sorry, this page is off limits to unauthorized users.
You are seeing this page as your trying to access an area that needs autheticating.
If you would like to go to the index page please click here
We will redirect you to our homepage in 20 seconds.
403.php
(usually means a directory is off limits to a user)

Example error page from my site if someone tries to directly access the directory: http://www.genieuk.co.cc/member/
Oops ...

Sorry, this directory is off limits to unauthorized users.
You are seeing this page as your trying to access a directory that cannot be viewed.
Maybe you accidentally made a typo in the url

Here are a few options to find what you maybe looking for.

Double check the web address for typos
Head back to our homepage via the navigation menu
Use our search facility to try and find what your looking for
500.php
(usually means problem with server sometimes just a reboot)
Uh Oh ...

This is so embarrassing but there seems to be a small problem with our servers. Usually i am just being rebooted and will be back in a flash.

It's best to be safe than sorry so we have notified the administrator to check it out.

This page will automatically redirect to the homepage in 60 seconds.
501.php
(usually means a problem with visitors internet)
HTTP ERROR 501

Sorry, there seems to be a problem with your internet.

The problem is usually caused by a third party product interfering with your browser.

More information on this error can be found at: <a href="http://support.microsoft.com/kb/811262">HTTP Error 501 - Microsoft Support</a>

We will redirect you to our homepage in 20 seconds.
502.php
(usually means a problem poor ip communication)
HTTP ERROR 502

Sorry, there seems to be a problem.

This problem is due to poor IP communication between back-end computers, possibly including the Web server at the site you are trying to visit. Before analysing this problem, you should clear your browser cache completely.

If you are surfing the Web and see this problem for all Web sites you try to visit, then either 1) your ISP has a major equipment failure/overload or 2) there is something wrong with your internal Internet connection e.g. your firewall is not functioning correctly. In the first case, only your ISP can help you. In the second case, you need to fix whatever it is that is preventing you reaching the Internet.

If you get this problem for only some of the Web sites you try to visit, then it is likely to be a problem at those sites i.e. one of their pieces of equipment is failing/overloaded. Contact the people at those sites.
503.php
(usually means server is closed for repair, upgrades, rebooting)
Uh Oh ...

Sorry, Our web server is either closed for repair / upgrades or is rebooting.

Usually i am just being rebooted and will be back in a flash.
Now i know this was long but it is very simple really. I just wanted to explain everything as much as i could for novice users.

Hope you enjoyed this tutorial and hope you will find this useful.

Regards,
Mathew
I used your suggestions and so far so good. Thanks.
Post Reply