2 Methods for Custom Error Pages on 000webhost

First method being the simple and boring approach.

  1. Create a PHP error file and name it anything you’d like but we shall use “phperror.php”
  1. Open the newly created PHP file and paste in the code below

<?php

$status = $_SERVER['REDIRECT_STATUS'];
$codes = array(
        403 => array('403 Forbidden', 'The server has refused to fulfill your request. If you think this is an error please inform the owner of this 000webhost website!'),
        404 => array('404 Not Found', 'The document/file requested was not found. If you think this is an error please inform the owner of this 000webhost website!'),
        405 => array('405 Method Not Allowed', 'The method specified in the Request-Line is not allowed for the specified resource.  If you think this is an error please inform the owner of this 000webhost website!'),
        408 => array('408 Request Timeout', 'Your browser failed to sent a request in the time allowed by the server.  If you think this is an error please inform the owner of this 000webhost website!'),
        500 => array('500 Internal Server Error', 'The request was unsuccessful due to an unexpected condition encountered by the server. If you think this is an error please inform the owner of this 000webhost website!'),
        502 => array('502 Bad Gateway', 'The server received an invalid response from the upstream server while trying to fulfill the request.  If you think this is an error please inform the owner of this 000webhost website!'),
        504 => array('504 Gateway Timeout', 'The upstream server failed to send a request in the time allowed by the server.  If you think this is an error please inform the owner of this 000webhost website!')
        );
        
$title = $codes[$status][0];
$message = $codes[$status][1];
if ($title == false || strlen($status) != 3) {
    $message = 'Please supply a valid status code.';
}

echo '<p><h1>' . $title . '</h1></p>' . 
     '<p>' . $message . '</p>'; 

 
?>

You can edit this code to display different error messages to the end user just simply edit the lines in the phperror.php file!

Now you’ve got to open your existing .htaccess file if you have one

Or create a new file in public_html folder called .htaccess

Once you have opened or created a new one then you’ll have to insert some code

ErrorDocument 403 /phperror.php
ErrorDocument 404 /phperror.php
ErrorDocument 405 /phperror.php
ErrorDocument 408 /phperror.php
ErrorDocument 500 /phperror.php
ErrorDocument 502 /phperror.php
ErrorDocument 504 /phperror.php

If you’d like to display any other error codes simply replicate the code above and add your code in and also add it into the phperror.php file as well!

Now when I visit a page that I’ve incorrectly linked on my main site or simply a URL on my site I have mistyped I will see the following 404 message!


Now

Method 2 (more personal error pages)

As above we will need to create our custom error pages

So 404

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <link rel="stylesheet" media="screen" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600" />
    <link rel="stylesheet" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />


    <style>
     * {
         -moz-box-sizing:border-box;
         -webkit-box-sizing:border-box;
         box-sizing:border-box;
     }

     html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
     abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
     small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
     fieldset, form, label, legend, caption, article, aside, canvas, details, figcaption, figure,  footer, header, hgroup,
     menu, nav, section, summary, time, mark, audio, video {
         margin:0;
         padding:0;
         border:0;
         outline:0;
         vertical-align:baseline;
         background:transparent;
     }

     article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
         display: block;
     }

     html {
         font-size: 16px;
         line-height: 24px;
         width:100%;
         height:100%;
         -webkit-text-size-adjust: 100%;
         -ms-text-size-adjust: 100%;
         overflow-y:scroll;
         overflow-x:hidden;
     }

     img {
         vertical-align:middle;
         max-width: 100%;
         height: auto;
         border: 0;
         -ms-interpolation-mode: bicubic;
     }

     body {
         min-height:100%;
         -webkit-font-smoothing: subpixel-antialiased;
     }

     .clearfix {
	       clear:both;
	       zoom: 1;
     }
     .clearfix:before, .clearfix:after {
         content: "\0020";
         display: block;
         height: 0;
         visibility: hidden;
     } 
     .clearfix:after {
         clear: both;
     }
    </style>
    <style>
  body.background.error-page-wrapper, .background.error-page-wrapper.preview {
    font-family: 'Source Sans Pro', sans-serif;
    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover;
    position:relative;
  }

  .background.error-page-wrapper .content-container {
    border-radius: 6px;
    text-align: center;
    box-shadow: 0 0 20px rgba(0,0,0,.2);
    padding:50px;
    background-color: #fff;
    width:100%;
    max-width:525px;
    position:absolute;
    left:50%;
    margin-left:-262px;
  }

  .background.error-page-wrapper .content-container.in {
    left:0px;
    opacity:1;
  }

  .background.error-page-wrapper .head-line {
    transition:color .2s linear;
    font-size:48px;
    line-height:60px;
    letter-spacing: -1px;
    margin-bottom: 5px;
    color:#ccc;
  }
  .background.error-page-wrapper .subheader {
    transition:color .2s linear;
    font-size:36px;
    line-height:46px;
    color:#333;
  }
  .background.error-page-wrapper .hr {
    height:1px;
    background-color: #ddd;
    width:60%;
    max-width:250px;
    margin:35px auto;
  }
  .background.error-page-wrapper .context {
    transition:color .2s linear;
    font-size:18px;
    line-height:27px;
    color:#bbb;
  }
  .background.error-page-wrapper .context p {
    margin:0;
  }
  .background.error-page-wrapper .context p:nth-child(n+2) {
    margin-top:16px;
  }
  .background.error-page-wrapper .buttons-container {
    margin-top: 35px;
    overflow: hidden;
  }
  .background.error-page-wrapper .buttons-container a {
    transition:text-indent .2s ease-out, color .2s linear, background-color .2s linear;
    text-indent: 0px;
    font-size:14px;
    text-transform: uppercase;
    text-decoration: none;
    color:#fff;
    background-color:#2ecc71;
    border-radius: 99px;
    padding:12px 0 13px;
    text-align: center;
    display:inline-block;
    overflow: hidden;
    position: relative;
    width:45%;
  }

  .background.error-page-wrapper .buttons-container .fa {
    transition:left .2s ease-out;
    position: absolute;
    left:-50px;
  }

  .background.error-page-wrapper .buttons-container a:hover {
    text-indent: 15px;
  }

  .background.error-page-wrapper .buttons-container a:nth-child(1) {
    float:left;
  }

  .background.error-page-wrapper .buttons-container a:nth-child(2) {
    float:right;
  }

  .background.error-page-wrapper .buttons-container .fa-home {
    font-size:18px;
    top:15px;
  }

  .background.error-page-wrapper .buttons-container a:hover .fa-home {
    left:10px;
  }

  .background.error-page-wrapper .buttons-container .fa-warning {
    font-size:16px;
    top:17px;
  }

  .background.error-page-wrapper .buttons-container a:hover .fa-warning {
    left:5px;
  }

  .background.error-page-wrapper .buttons-container .fa-power-off {
    font-size:16px;
    top:17px;
  }

  .background.error-page-wrapper .buttons-container a:hover .fa-power-off {
    left:9px;
  }


  .background.error-page-wrapper .buttons-container.single-button {
    text-align: center;
  }

  .background.error-page-wrapper .buttons-container.single-button a  {
    float:none !important;
  }

  @media screen and (max-width: 555px) {
    .background.error-page-wrapper {
      padding:30px 5%;
    }
    .background.error-page-wrapper .content-container {
      padding:37px;
      position: static;
      left: 0;
      margin-left:0;
    }
    .background.error-page-wrapper .head-line {
      font-size:36px;
    }
    .background.error-page-wrapper .subheader {
      font-size:27px;
      line-height: 37px;
    }
    .background.error-page-wrapper .hr {
      margin:30px auto;
      width:215px;
    }
    .background.error-page-wrapper .buttons-container .fa {
      display:none;
    }
    .background.error-page-wrapper .buttons-container a:hover {
      text-indent: 0px;
    }
  }

  @media screen and (max-width: 450px) {
    .background.error-page-wrapper {
      padding:30px;
    }
    .background.error-page-wrapper .head-line {
      font-size:32px;
    }
    .background.error-page-wrapper .hr {
      margin:25px auto;
      width:180px;
    }
    .background.error-page-wrapper .context {
      font-size:15px;
      line-height:22px;
    }

    .background.error-page-wrapper .context p:nth-child(n+2) {
      margin-top:10px;
    }
    .background.error-page-wrapper .buttons-container {
      margin-top:29px;
    }
    .background.error-page-wrapper .buttons-container a {
      float:none !important;
      width:65%;
      margin:0 auto;
      font-size:13px;
      padding:9px 0;
    }

    .background.error-page-wrapper .buttons-container a:nth-child(2) {
      margin-top:12px;
    }
  }
</style>

    <style>


    .background-image {
      background-color: #FFFFFF;
      background-image: url(https://dka575ofm4ao0.cloudfront.net/assets/better_error_pages/templates/background/background-e1d28eee7cab6e890134c7271be33d66.png) !important;
    }

    .primary-text-color {
      color: #494949 !important;
    }

    .secondary-text-color {
      color: #AAAAAA !important;
    }




    .border-button {
      color: #2ECC71 !important;
      border-color: #2ECC71 !important;
    }
    .button {
      background-color: #2ECC71 !important;
      color: #FFFFFF !important;
    }

    .shadow {
      box-shadow: 0 0 60px #000000;
    }

</style>

  </head>
  <body class="background error-page-wrapper background-color background-image">
    <center>
  <div class="content-container shadow">
    <div class="head-line secondary-text-color">
      404
    </div>
    <div class="subheader primary-text-color">
      Oops, the file you're looking for does not exist. Do you think this is wrong?
    </div>
    <div class="hr"></div>
    <div class="context secondary-text-color">
      <p>
        You may want to head back to the homepage.
        If you think something is broken, report a problem.
  Inform the owner of this 000webhost website!    </p>
    </div>
    <div class="buttons-container">
      <a class="button" href="http://yoursite.000webhostapp.com" target="_blank"><span class="fa fa-home"></span> Go To Homepage</a>
      <a class="button" href="mailto:000webhost@youremail.com" target="_blank"><span class="fa fa-warning"></span> Report A Problem</a>
    </div>
  </div>
</center>


    <script>
     function ErrorPage(container, pageType, templateName) {
       this.$container = $(container);
       this.$contentContainer = this.$container.find(templateName == 'sign' ? '.sign-container' : '.content-container');
       this.pageType = pageType;
       this.templateName = templateName;
     }

     ErrorPage.prototype.centerContent = function () {
       var containerHeight = this.$container.outerHeight()
         , contentContainerHeight = this.$contentContainer.outerHeight()
         , top = (containerHeight - contentContainerHeight) / 2
         , offset = this.templateName == 'sign' ? -100 : 0;

       this.$contentContainer.css('top', top + offset);
     };

     ErrorPage.prototype.initialize = function () {
       var self = this;

       this.centerContent();
       this.$container.on('resize', function (e) {
         e.preventDefault();
         e.stopPropagation();
         self.centerContent();
       });

       // fades in content on the plain template
       if (this.templateName == 'plain') {
         window.setTimeout(function () {
           self.$contentContainer.addClass('in');
         }, 500);
       }

       // swings sign in on the sign template
       if (this.templateName == 'sign') {
         $('.sign-container').animate({textIndent : 0}, {
           step : function (now) {
             $(this).css({
               transform : 'rotate(' + now + 'deg)',
               'transform-origin' : 'top center'
             });
           },
           duration : 1000,
           easing : 'easeOutBounce'
         });
       }
     };


     ErrorPage.prototype.createTimeRangeTag = function(start, end) {
       return (
         '<time utime=' + start + ' simple_format="MMM DD, YYYY HH:mm">' + start + '</time> - <time utime=' + end + ' simple_format="MMM DD, YYYY HH:mm">' + end + '</time>.'
       )
     };


     ErrorPage.prototype.handleStatusFetchSuccess = function (pageType, data) {
       if (pageType == '503') {
         $('#replace-with-fetched-data').html(data.status.description);
       } else {
         if (!!data.scheduled_maintenances.length) {
           var maint = data.scheduled_maintenances[0];
           $('#replace-with-fetched-data').html(this.createTimeRangeTag(maint.scheduled_for, maint.scheduled_until));
           $.fn.localizeTime();
         }
         else {
           $('#replace-with-fetched-data').html('<em>(there are no active scheduled maintenances)</em>');
         }
       }
     };


     ErrorPage.prototype.handleStatusFetchFail = function (pageType) {
       $('#replace-with-fetched-data').html('<em>(enter a valid Statuspage url)</em>');
     };


     ErrorPage.prototype.fetchStatus = function (pageUrl, pageType) {
       //console.log('in app.js fetch');
       if (!pageUrl || !pageType || pageType == '404') return;

       var url = ''
         , self = this;

       if (pageType == '503') {
         url = pageUrl + '/api/v2/status.json';
       }
       else {
         url = pageUrl + '/api/v2/scheduled-maintenances/active.json';
       }

       $.ajax({
         type : "GET",
         url : url,
       }).success(function (data, status) {
         //console.log('success');
         self.handleStatusFetchSuccess(pageType, data);
       }).fail(function (xhr, msg) {
         //console.log('fail');
         self.handleStatusFetchFail(pageType);
       });

     };
     var ep = new ErrorPage('body', "404", "background");
     ep.initialize();

     // hack to make sure content stays centered >_<
     $(window).on('resize', function() {
       $('body').trigger('resize')
     });

    </script>

    
  </body>
</html>

You need to make two changes in the code above, insert your 000webhostapp URL and an email where people can contact you for bugs!

Create a new file on File Manager called 404errorpage.html and insert this code into it.

For the rest of the codes for easy showing I’ll just call it globalerrorpage.html and use the page for the rest of the codes but for other codes you can use this code below and customise it and save it as the different error status codes and also update your .htaccess to match!

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <link rel="stylesheet" media="screen" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600" />
    <link rel="stylesheet" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />


    <style>
     * {
         -moz-box-sizing:border-box;
         -webkit-box-sizing:border-box;
         box-sizing:border-box;
     }

     html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
     abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
     small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
     fieldset, form, label, legend, caption, article, aside, canvas, details, figcaption, figure,  footer, header, hgroup,
     menu, nav, section, summary, time, mark, audio, video {
         margin:0;
         padding:0;
         border:0;
         outline:0;
         vertical-align:baseline;
         background:transparent;
     }

     article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
         display: block;
     }

     html {
         font-size: 16px;
         line-height: 24px;
         width:100%;
         height:100%;
         -webkit-text-size-adjust: 100%;
         -ms-text-size-adjust: 100%;
         overflow-y:scroll;
         overflow-x:hidden;
     }

     img {
         vertical-align:middle;
         max-width: 100%;
         height: auto;
         border: 0;
         -ms-interpolation-mode: bicubic;
     }

     body {
         min-height:100%;
         -webkit-font-smoothing: subpixel-antialiased;
     }

     .clearfix {
	       clear:both;
	       zoom: 1;
     }
     .clearfix:before, .clearfix:after {
         content: "\0020";
         display: block;
         height: 0;
         visibility: hidden;
     } 
     .clearfix:after {
         clear: both;
     }
    </style>
    <style>
  body.background.error-page-wrapper, .background.error-page-wrapper.preview {
    font-family: 'Source Sans Pro', sans-serif;
    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover;
    position:relative;
  }

  .background.error-page-wrapper .content-container {
    border-radius: 6px;
    text-align: center;
    box-shadow: 0 0 20px rgba(0,0,0,.2);
    padding:50px;
    background-color: #fff;
    width:100%;
    max-width:525px;
    position:absolute;
    left:50%;
    margin-left:-262px;
  }

  .background.error-page-wrapper .content-container.in {
    left:0px;
    opacity:1;
  }

  .background.error-page-wrapper .head-line {
    transition:color .2s linear;
    font-size:48px;
    line-height:60px;
    letter-spacing: -1px;
    margin-bottom: 5px;
    color:#ccc;
  }
  .background.error-page-wrapper .subheader {
    transition:color .2s linear;
    font-size:36px;
    line-height:46px;
    color:#333;
  }
  .background.error-page-wrapper .hr {
    height:1px;
    background-color: #ddd;
    width:60%;
    max-width:250px;
    margin:35px auto;
  }
  .background.error-page-wrapper .context {
    transition:color .2s linear;
    font-size:18px;
    line-height:27px;
    color:#bbb;
  }
  .background.error-page-wrapper .context p {
    margin:0;
  }
  .background.error-page-wrapper .context p:nth-child(n+2) {
    margin-top:16px;
  }
  .background.error-page-wrapper .buttons-container {
    margin-top: 35px;
    overflow: hidden;
  }
  .background.error-page-wrapper .buttons-container a {
    transition:text-indent .2s ease-out, color .2s linear, background-color .2s linear;
    text-indent: 0px;
    font-size:14px;
    text-transform: uppercase;
    text-decoration: none;
    color:#fff;
    background-color:#2ecc71;
    border-radius: 99px;
    padding:12px 0 13px;
    text-align: center;
    display:inline-block;
    overflow: hidden;
    position: relative;
    width:45%;
  }

  .background.error-page-wrapper .buttons-container .fa {
    transition:left .2s ease-out;
    position: absolute;
    left:-50px;
  }

  .background.error-page-wrapper .buttons-container a:hover {
    text-indent: 15px;
  }

  .background.error-page-wrapper .buttons-container a:nth-child(1) {
    float:left;
  }

  .background.error-page-wrapper .buttons-container a:nth-child(2) {
    float:right;
  }

  .background.error-page-wrapper .buttons-container .fa-home {
    font-size:18px;
    top:15px;
  }

  .background.error-page-wrapper .buttons-container a:hover .fa-home {
    left:10px;
  }

  .background.error-page-wrapper .buttons-container .fa-warning {
    font-size:16px;
    top:17px;
  }

  .background.error-page-wrapper .buttons-container a:hover .fa-warning {
    left:5px;
  }

  .background.error-page-wrapper .buttons-container .fa-power-off {
    font-size:16px;
    top:17px;
  }

  .background.error-page-wrapper .buttons-container a:hover .fa-power-off {
    left:9px;
  }


  .background.error-page-wrapper .buttons-container.single-button {
    text-align: center;
  }

  .background.error-page-wrapper .buttons-container.single-button a  {
    float:none !important;
  }

  @media screen and (max-width: 555px) {
    .background.error-page-wrapper {
      padding:30px 5%;
    }
    .background.error-page-wrapper .content-container {
      padding:37px;
      position: static;
      left: 0;
      margin-left:0;
    }
    .background.error-page-wrapper .head-line {
      font-size:36px;
    }
    .background.error-page-wrapper .subheader {
      font-size:27px;
      line-height: 37px;
    }
    .background.error-page-wrapper .hr {
      margin:30px auto;
      width:215px;
    }
    .background.error-page-wrapper .buttons-container .fa {
      display:none;
    }
    .background.error-page-wrapper .buttons-container a:hover {
      text-indent: 0px;
    }
  }

  @media screen and (max-width: 450px) {
    .background.error-page-wrapper {
      padding:30px;
    }
    .background.error-page-wrapper .head-line {
      font-size:32px;
    }
    .background.error-page-wrapper .hr {
      margin:25px auto;
      width:180px;
    }
    .background.error-page-wrapper .context {
      font-size:15px;
      line-height:22px;
    }

    .background.error-page-wrapper .context p:nth-child(n+2) {
      margin-top:10px;
    }
    .background.error-page-wrapper .buttons-container {
      margin-top:29px;
    }
    .background.error-page-wrapper .buttons-container a {
      float:none !important;
      width:65%;
      margin:0 auto;
      font-size:13px;
      padding:9px 0;
    }

    .background.error-page-wrapper .buttons-container a:nth-child(2) {
      margin-top:12px;
    }
  }
</style>

    <style>


    .background-image {
      background-color: #FFFFFF;
      background-image: url(https://dka575ofm4ao0.cloudfront.net/assets/better_error_pages/templates/background/background-e1d28eee7cab6e890134c7271be33d66.png) !important;
    }

    .primary-text-color {
      color: #494949 !important;
    }

    .secondary-text-color {
      color: #AAAAAA !important;
    }




    .border-button {
      color: #2ECC71 !important;
      border-color: #2ECC71 !important;
    }
    .button {
      background-color: #2ECC71 !important;
      color: #FFFFFF !important;
    }

    .shadow {
      box-shadow: 0 0 60px #000000;
    }

</style>

  </head>
  <body class="background error-page-wrapper background-color background-image">
    	
<div class="content-container shadow">
	<div class="head-line secondary-text-color">
		Ouch!
	</div>
	<div class="subheader primary-text-color">
		Looks like we're having some server issues.
	</div>
	<div class="hr"></div>
  <div class="context secondary-text-color">
    
    <p>
      Go back to the previous page and try again.
      If you think something is broken, report a problem.
    </p>


  </div>
	<div class="buttons-container single-button">
		<a class="button" href="mailto:000webhost@youremail.com" target="_blank"><span class="fa fa-warning"></span> Report A Problem</a>
	</div>
</div>


    <script>
     function ErrorPage(container, pageType, templateName) {
       this.$container = $(container);
       this.$contentContainer = this.$container.find(templateName == 'sign' ? '.sign-container' : '.content-container');
       this.pageType = pageType;
       this.templateName = templateName;
     }

     ErrorPage.prototype.centerContent = function () {
       var containerHeight = this.$container.outerHeight()
         , contentContainerHeight = this.$contentContainer.outerHeight()
         , top = (containerHeight - contentContainerHeight) / 2
         , offset = this.templateName == 'sign' ? -100 : 0;

       this.$contentContainer.css('top', top + offset);
     };

     ErrorPage.prototype.initialize = function () {
       var self = this;

       this.centerContent();
       this.$container.on('resize', function (e) {
         e.preventDefault();
         e.stopPropagation();
         self.centerContent();
       });

       // fades in content on the plain template
       if (this.templateName == 'plain') {
         window.setTimeout(function () {
           self.$contentContainer.addClass('in');
         }, 500);
       }

       // swings sign in on the sign template
       if (this.templateName == 'sign') {
         $('.sign-container').animate({textIndent : 0}, {
           step : function (now) {
             $(this).css({
               transform : 'rotate(' + now + 'deg)',
               'transform-origin' : 'top center'
             });
           },
           duration : 1000,
           easing : 'easeOutBounce'
         });
       }
     };


     ErrorPage.prototype.createTimeRangeTag = function(start, end) {
       return (
         '<time utime=' + start + ' simple_format="MMM DD, YYYY HH:mm">' + start + '</time> - <time utime=' + end + ' simple_format="MMM DD, YYYY HH:mm">' + end + '</time>.'
       )
     };


     ErrorPage.prototype.handleStatusFetchSuccess = function (pageType, data) {
       if (pageType == '503') {
         $('#replace-with-fetched-data').html(data.status.description);
       } else {
         if (!!data.scheduled_maintenances.length) {
           var maint = data.scheduled_maintenances[0];
           $('#replace-with-fetched-data').html(this.createTimeRangeTag(maint.scheduled_for, maint.scheduled_until));
           $.fn.localizeTime();
         }
         else {
           $('#replace-with-fetched-data').html('<em>(there are no active scheduled maintenances)</em>');
         }
       }
     };


     ErrorPage.prototype.handleStatusFetchFail = function (pageType) {
       $('#replace-with-fetched-data').html('<em>(enter a valid Statuspage url)</em>');
     };


     ErrorPage.prototype.fetchStatus = function (pageUrl, pageType) {
       //console.log('in app.js fetch');
       if (!pageUrl || !pageType || pageType == '404') return;

       var url = ''
         , self = this;

       if (pageType == '503') {
         url = pageUrl + '/api/v2/status.json';
       }
       else {
         url = pageUrl + '/api/v2/scheduled-maintenances/active.json';
       }

       $.ajax({
         type : "GET",
         url : url,
       }).success(function (data, status) {
         //console.log('success');
         self.handleStatusFetchSuccess(pageType, data);
       }).fail(function (xhr, msg) {
         //console.log('fail');
         self.handleStatusFetchFail(pageType);
       });

     };
     var ep = new ErrorPage('body', "503", "background");
     ep.initialize();

     // hack to make sure content stays centered >_<
     $(window).on('resize', function() {
       $('body').trigger('resize')
     });

    </script>

    
  </body>
</html>

Remember to change your email address too!

So now open your existing .htaccess or create a new .htaccess

Or create a new file in public_html folder called .htaccess

Once you have opened or created a new one then you’ll have to insert some code

ErrorDocument 403 /globalerrorpage.html
ErrorDocument 404 /404errorpage.html
ErrorDocument 405 /globalerrorpage.html
ErrorDocument 408 /globalerrorpage.html
ErrorDocument 500 /globalerrorpage.html
ErrorDocument 502 /globalerrorpage.html
ErrorDocument 504 /globalerrorpage.html

Now when a user clicks upon a wrongly coded link on your site or mistypes they’ll see the 404 custom error page!

The same if they hit any other status codes depending on your customisation.

5 Likes