How To: Create a 404 Error Page not Found

Discussion in 'Tutorials' started by Bart, Sep 8, 2012.

  1. Bart

    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:

    [​IMG]

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

    [​IMG]

    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
    cajkan, leonor, Mark and 1 other person like this.

Share This Page