How To: Create a 404 Error Page not Found

Bart

Active Member
Hi :)

In this simple tutorial in which i will show you how to create an integrated 404 Error Page.

Result/Demo:
http://maxleech.com/page/notfound/
http://maxleech.com/no.page.exists.here

What we will be using:
  • .htaccess
  • Create Custom Page
  • Manage Custom Menus
Step 1:
You need to think of what you want; it could be text/images or both.
In this tutorial I will only be using an image.

Go to Google and find a image of a 404 picture. (Max width ~630px)

Here are some example 404 images:
http://s15.postimage.org/71itor1pl/404.jpg
http://s15.postimage.org/3vy7yjj3d/404_bored_panda_eat.jpg
http://s15.postimage.org/ohhl46q21/notfound.jpg

Step 2:
Once you have your content you may proceed to creating the page.

a. Go to your admin panel
b. Go to Custom Pages > Create Custom Page
c. Enter the page ID “notfound”
d. Enter Title “404: Page not Found”

Now where is says enter content we are going to write some html, please click on this icon in the toolbar:



Once you click on the that HTML Source Editor will pop up:



In the HTML Source Editor enter the following text:

Code:
 <h1>404: Page not Found</h1>
<center><img src="http://domain.com/path/to/your/image.png" alt="404: Page not Found" /></center>
Then click “Update”

You can leave Menu Text blank

Menu Path is the URL path to your page, you need to remember this.

Now click “Create Custom Page”

Now make sure you page works by going on its url.

Step 3:
Removing your error page from the header Menu.

Go to: Custom Pages > Manage Custom Menus

Select your Main Menu

Delete the Error Page from the menu

Step 4:
Adding the error page into .htaccess

Login to the cPanel and open your .htaccess

At the bottom of your .htaccess add the following code:

Code:
 ErrorDocument 404 /page/notfound/
Save your .htaccess file.
_______________________________________________________

You have successfully create a custom 404 Error Page :)
Test the error page by going to http://yourdomain.com/fqwfo7yf3chgj
Which should produce your custom error page.

Regards,
Bart
 
Top