Creating a custom 404 error page.

radiantphotography.com > Blog > business > Creating a custom 404 error page.

A custom 404 error page can inject some fun into your company website, should a client get lost while navigating your site.  It doesn’t take much time and it looks much better than your browser’s stock text-only 404 page.

We at Radiant Photography just finished our first custom 404 page, and plan on rotating out some more creative ideas in the future.  Here is a sample:

Radiantphotography.com 404 error page

Radiantphotography.com 404 error page

To make a page similar to ours, you can take a screen shot of your original homepage, play with it in Photoshop and saved it as a jpeg on a colored background in your favorite html editor.  You would give this html file a name like “custom404.html” or something similar, then uploaded the picture and the html file to your server.

After uploading, you need to figure out what type of server your files are on and pick an appropriate method of redirecting your 404 errors to your new page (list of server types and methods here).  In our case, we use an Apache server, so if you’re in the same boat, here’s how to redirect to your custom page:

There should be a file called .htaccess in your root directory of the server (usually where your “index.html” file is).  Us using a Windows-based platform (and being first timers at this), we couldn’t modify the .htaccess file, so we found a workaround.  Open WordPad or another text editor and enter your 404 error command in the following format on one line:

ErrorDocument 404 /errors/”your404filename.html” (in our case we named our custom page “custom404.html”)
Save the text file as ‘htaccess.txt’.  Open your FTP client and drop the file into your root folder.  After it uploads, delete the existing .htaccess file and rename your htaccess.txt file to .htaccess.
Test your modification by typing in a non-existing URL at your domain, like “http://www.yourdomainname.com/iloveporkchopmilkshakes.html”.  You should see your new custom 404 page!

Leave a Reply

Your email address will not be published. Required fields are marked *