Creating a custom Joomla 404 error page

August 19, 2013 Update: This method doesn’t seem to return the correct response header for a 404 page, so use at your own risk. I switched to WordPress a few years ago and won’t be able to work out a solution for this. If you have a solution, let me know and I’ll try to update this tutorial.

Let’s face it: the default Joomla 404 error page, while useful and perhaps necessary, is one of the uglier web pages in existence. The shock value of seeing one of these pages for the first time is memorable, and diminishes only slowly over time.

Joomla 404 page

Creating a custom 404 error page for your Joomla website isn’t all that difficult, though there are several different approaches to making it work, and this blog post explains the process I’m using on this website and a few others I’ve built. I should also add that inspiration for this method came from this lengthy thread on the Joomla forums.

Creating a custom Joomla 404 error page – the process

The image below is a screenshot of the custom 404 error page I came up with.

custom 404 page

For more ideas and to see what other web designers have come up with, Smashing Magazine has put together a collection of some of the best 404 pages on the web, with links to some other collections as well.

If you’re going to be making these changes to a ‘live’ site, then I recommend that you make them in roughly the following order. Also, as a general rule-of-thumb, make a backup of your website before making any significant changes.

First, create an article and call it “404 – Error: 404” or something to that effect. I chose that title because that’s what appears in the browser title bar for the default Joomla 404 page. Insert your desired text and/or an image and format the article’s content as you normally would. You can say whatever you want in the article, but your site visitors who end up seeing the 404 page will probably find it helpful if you tell them what happened and what they could or should do next. If you don’t want this article (page) to be indexed, and you probably don’t, then add “no index, no follow” (without the quotes) to the Robots text box under Metadata Information on the right side of the Article editor screen.

Second, add a menu item to one of your menus, preferably not your main menu or one of your other visible menus – you don’t want your site visitors clicking on a link that takes them directly to your 404 page. In fact, now that I think about it, you could create a new menu for this purpose and call it “Error pages” or something similar. When you create the menu item, link it to the article you created in the first step, give it “404” as a title, and publish it.

Third, locate the default error.php file which creates the Joomla 404 error page. This file should be located in yourtemplates/system/” directory. Once you’ve found the error.php file, make a copy of the file and add the copy to the directory for the active template you’re using for your website. Joomla will look for the error.php file in that directory first before looking in the default location.

Fourth, open the new error.php file in your favorite text editor (I recommend Notepad++) and find the code at the beginning of the file (around line 13) that looks like this:

Default code in error.php

and change it to this:

Modified code in error.php

Don’t forget to change the “Location:” URL in that code to the menu item you created in the second step; otherwise, your visitors will be redirected to my website, which probably won’t help you at all!

Finally, save the file, FTP it back to the template directory, open your website in a web browser, and test it to see if it works. At the end of any legitimate URL for your website add one or more letters or numbers and hit the “enter” key. Your new 404 page should be what appears on your screen, set in the helpful context of your website, which is where it should be, in my opinion.

Comments

  1. Amma says

    THANK YOU! this was the best and easiest Joomla tutorial ever. Well explained and no important details were left out.

  2. Caveman says

    Muchos gracias mi amigos, works like a bomb. I'm using this method for a custom 403 (restricted access) Page and it work perfectly. Obviously I just needed to change 404 to 403.

  3. Anonymous says

    This is a great tutorial, very clear. However it results in a 200 response for the error page, meaning that search engines think the broken link is ok, which can lead to a lot of duplicate content issues. Is there a way to adapt this elegant solution to return a 404 page not found status so that it works fully as a proper 404 page should?