underline
phone number

A creative, friendly web design company based in Chelmsford, Essex

back light

Add a Custom 404 Page With a Javascript Redirect

if you’ve spent weeks designing a great looking website, why should you put up with boring, ugly 404 pages? Answer: you don’t have to! Here’s a simple way to add a custom page to replace your standard 404 page. It will also work with all sorts of other pages too, like 401, 403 and 500 redirects.

All you need is access to your htaccess file in your root folder and the part of your brain that you use to design….

custom 404 page redirect

It’s all quite simple, just create your custom 404 page (use your imagination and humour; it’s annoying to click on a page that doesn’t exist and find a 404 page, so entertain the person browsing your website and you never know, they might be impressed enough to stay on your site a bit longer… If you want to use a background image, you can read here how to keep the image responsive to the user’s screen size.

Load Your Custom 404 Page with htaccess Code

Always make sure you know what you are doing when you make changes to your htaccess file, as it can render your site unusable – and maybe worse, unfindable – if you get it wrong.

Hover over the code to reveal the highlight button, top right, for easy copying.

Select Code
1
2
#404 redirect
ErrorDocument 404 /lost404.html

To make notes, add a hashtag to the start of the line before adding your comments; quite often, if you have many different functions in your htaccess file it’s a good idea to add comments as the htaccess file is not something you will be looking at too much. The 2nd line tells us that when a 404 page is due to be served, the standard 404 page will be replaced with lost404.html.

Redirect Users with Javascript

Now, you want to help your lost website user find his or her way back like a good host. Your best bet is to probably put them back onto your site’s home page, so they can try to find the right website page that they were originally looking for – hopefully this time avoiding your lovely new 404 page!

Add this code to the bottom of your new custom 404 page above the </body> tag.

Select Code
1
2
3
4
5
<script type="text/javascript">
setTimeout('ourRedirect()', 5000)
function ourRedirect (){
location.href='http://www.yoursite.com/'}
</script>

This code is telling us that the page the user is on will redirect to http://www.yoursite.com/ in 5000 milliseconds (5 seconds). Don’t leave the redirect too long or it defeats the object of having one.

Remember, you can add as many different redirect pages as you wish and call them by repeating the htaccess code above with the relevant numbers and page links changed.

Once you have uploaded your files, it’s crucial that you test your htaccess file to make sure that any other functions that it’s supposed to perform are still working. Here’s a websites that will help you do this – redirect-checker.

But don’t be lazy, check in your browser as well!

Share this..
Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInPin on PinterestEmail this to someoneShare on TumblrShare on StumbleUponShare on Reddit

Tags: , , , , , , , , ,


Leave a Reply

Please complete the sum so we know you\'re a human... *