- Web templates
- E-commerce Templates
- CMS & Blog Templates
- Facebook Templates
- Website Builders
JS Animated. How to integrate custom 404 error page
December 12, 2014
This tutorial shows how to create a custom 404 page for your HTML website
JS Animated. How to integrate custom 404 error pageCreate the Custom 404 page:
Create a file called 404.html (or whatever you want to call it) with any message you want your visitors to see when they hit any missing page. A small sitemap and / or search box is a nice idea, along with letting them know the page they requested is not available. You might also be interested in checking out some tips for a useful 404 error page.
In our case 404.html page has been already created:
Note that 404 page is included in the HTML5 and Bootstrap Template packages.
-
Create the .htaccess:
Open your .htaccess file if you already have one. If not, then open notepad or your favorite text editor (a WYSIWYG editor won’t work here) and add this line:
ErrorDocument 404 /404.html
You can name your error file whatever you’d like and use any extension you are most comfortable with, however, DO NOT use an absolute (full URL including the domain name) here:
Upload:
Make sure your FTP program is set to upload in ASCII mode, upload the 404.php, then the .htaccess:
-
Make sure your browser cache is cleared and type in a file that doesn’t exist on your server. Something like http://www.example.com/oops. You will see your new 404 page:
-
Notes About a Custom Error Page
What you have on your error page is your personal choice. Some people prefer just a link to the main page, others go for a more friendly approach and let the visitor know that the page isn’t available and create a nicely designed page with links to other areas or even a search to let them find what they wanted.
Feel free to check the detailed video tutorial below:
JS Animated. How to integrate custom 404 error page