How to customize Magento Error report and maintenance page?

People who have worked with Magento for certain length of time, are mostly familiar with the “There has been an error processing your request” page. It is important to make sure that this page never appears to the customers who are online on a live site, but it may still show up occasionally. Magento provides an easy way to show a maintenance page. You have to create an empty file called maintenance flag in your Magento document root and your site will be redirected to the built in maintenance page. It is also important to customize these pages so that they are more in line with the design of the site. The principle of customization of these templates is very easy and is also very similar to customizing standard Magento skin folders. Here is how to customize Magento error report and maintenance page.

The maintenance pages and error report are rendered from template located under [MAGENTO_ROOT]/errors. The folder generally contains some php files and a folder called default in the same way as the normal Magento skin folders are structured. The skin folder also contains files with the same name as the error root folder. The only difference between them is that the files in the error root are just there to route the specific page processing. They include the processor.php file, call the appropriate method and instantiate the report class and which in turn will render the actual page template. The error folder contains

·         local.xml.sample

The members of Magento development team have provided us with a sample configuration file through which we can create our specific configuration to customize our error/maintenance pages.

·         processor.php

This file implements the Error Processing class which from the local.xml file reads the error template configuration, loads the configured design and runs the configured design.

·         page.phtml

This is the template file that contains the HTML for all the pages that are handled by the error sub-system.

·         404. phtml

This is a 404 Not Found page template which may be useful if you want to change the default 404 handling and direct all 404s to this template.

·         503.phtml

This is the “Temporarily Unavailable” page which appears when the site is in maintenance mode.

·         report.phtml

This page contains the PHP and HTML code that renders the error report page and is another candidate for our customization.

  • The local.xml File

Before customizing the phtml, you should know that, a similar paradigm like with the standard Magento design templates is also in effect here. In other words, people don’t want to “hack” the files in the default design, but create their own error design and customize the files there. For this, it is needed to create a local.xml file with the appropriate configuration.

  • Create a Custom Skin

Create a new sub-folder under errors/ and copy the files and folders from the errors/default/ skin to the new sub folder.

  • Customize the Skin

The main HTML for these pages comes from page.phtml containing the code. So, the first thing to do is replace the logo image, link image alt attribute and title attribute, as well as the footer text. Then move onto the included phtml templates and work on your CSS. You can also add or replace the images in the images folder, if you need some other imagery or fancy background.