Custom 404 Error Pages

If a person surfing the web enters your domain name followed by a non-existent page name into the address bar or clicks on a link with an out of date page name for your site, they will come to a 404 Error page. 

The default setup for Joomla 3 has an error.php page in the templates/system folder of your Joomla 3 installation. This page will appear whenever someone types in your domain name followed by a slash and a non-existent page. If you are using a third party template, they may already created a replacement error page that reflects the look of their template. Protostar has an error.php page in templates/protostar in your Joomla 3 installation.

In some cases, your hosting company has an error page that overrides your Joomla error page.

If you are using Protostar as your template, you can restyle this error.php page itself. Another option is to use PHP redirects to send the visitor to a page that you have created for this purpose in Menu Manager for your Joomla 3 installation.

Detecting bad URLs

Joomla 3.+ keeps track of all the bad URLs that people have typed in or clicked on as links for your site. These bad URLs can be seen under Components -> Redirects. This way you can tell if there are bad links to your site out there that people continually click on.  Landing on a 404 error page can be harmful to your site's SEO so you will want to create a redirect for that page that takes the user directly to a more appropriate page.

Create Redirects for common bad URLs

We suggest that you create Redirects for common bad URLs. If you have a URL on the list under Components -> Redirects that has multiple hits, then it is likely that an external site or search engine has a broken link to your website. This is not good for SEO and is frustrating to the visitor. You want the visitor to get to the right place.

Read the joom3 article:
How to create Redirects with Joomla 3

Set up the Custom 404 Error page

Option 1: Restyle the error.php page for your template

A screen shot of the default 404 error page for Joomla 3.+ Protostar Template.In this example, we are going to set up a custom 404 Error page for the Protostar template. Your template may already have a customized Error page. If there is no file called error.php in your template, then your site likely relies on the error page in the Joomla core.

To test this, open a browser tab and type in your domain name, followed by a slash, followed by some garbage phrase, a page name that you know does not exist on your site. See what page is displayed.

The default error.php file located in templates/protostar does not have the same appearance as the other pages on your Joomla website. It is coded to bring in some elements from your template, like the logo that you uploaded under extensions -> template manager and the menu that you have in position-1 for your site. It will not bring in your custom stylesheets, modules, etc., unless you edit it to do so. 

Your potential visitor can go directly to your site by clicking on the logo or the Home Page button located down in the content area. It also loads a Search box if the user chooses to do a search for the subject in which he is seeking. 

Joomla loads this error.php page instead of the index.php page, so all the goodies that index.php contains may will be present in this error.php page.

To test this out on your Joomla site, type in your domain name followed by a slash then add some nonsense phrase that you know is not a page on your site. See what error page comes up.

You can edit the error.php (make a copy of the original version first and set it aside!!) to look more like a page on your site, if you know enough about HTML to edit it properly. You can add a <style> section at the top of the error.php document or link it to your template's style sheets.

Option 2: Redirect the error.php page to a page created with a Joomla Menu Item

You can create a custom 404 Error page that has the same appearance and functionality of the other pages on your Joomla 3 website. By creating an article and linking to it with a Menu Item, the page will automatically have the appearance and menu structure that all of you other pages have. You can also choose to display or not display modules on this page.

You create an article for the content you want to appear on the 404 Error page. You then create a separate Menu in Menu Manager that holds individual pages. These individual pages will not be displayed in your Main Menu navigation. You will add your new article to this new menu as a Single Page Menu Item. Then we will edit the original error.php in the Protostar template to redirect to this newly create 404 Error page.

The following steps walks you through this process. 

Step 1: Create an Article with the content that you want to show on your Custom 404 Error page. You might want to put some text about how this page doesn't exist and how the user should use the menu system to find the page he is interested in. You may want to create a Smart Search module that will only display in a position on this custom error page.

Step 2: Create an entirely new Menu for pages that you don't want to show up on your navigation menus.  Call it something like Pages-only. If you already have a separate menu set up for individual pages, you can create a new page in this menu.

Step 3: Create a new Single Article Menu Item for that new menu. Link it to your Article that you created for the Custom 404 Error page. Give it the title of Error-page and the alias of error-page.

Step 4: Using an FTP program or the file manager on your hosting site, make a backup copy of the current error.php page in templates/protostar and name it errorORIG.php as a backup is case you code something incorrectly. Download the original error.php to your own computer and open it in a text editor.

Step 5: Delete everything on the page (make sure you made that backup copy first!!) and type in:

<?php
    header( 'Location:http://www.mygreatsite.com/error-page')
?>

What this does is use a PHP redirect to send the visitor to the Menu Item that you created in Step 3.

Note: The method above will only work if you have enabled friendly URLs.  If you don't have this feature enabled, you need to copy the php code for the Menu Item in the Details tab next to Link. Triple click on the grey text box next to Link and hit CNTL+C to copy the code. Replace that error=page in code in Step 5 with your PHP code. It will look something like this.

<?php
    header( 'Location:http://www.mygreatsite.com/index.php?option=com_content&view=article&id=100')
?>

Step 6: Upload this file back to the templates/protostar folder, replacing the existing error.php (because you have a backup, right?).

Step 7: Test out the Custom 404 Error Page by opening a browser window, typing in the domain name for your site, followed by a slash, followed by some nonsense letters that couldn't possible be a site on your website. You should be taken to the Error Page that you just created in Step 3 with the content of the Article that you created in Step 1.

This approach isn't working for you?

If this approach to creating a custom 404 error page is not working for your Joomla 3 website, it may be due to your template or your hosting environment or for other reasons.

You may wish to refer to the Joomla Doc article: Creating a Custom 404 Error Page