Creating a custom Joomla 404 error page

Posted by John Sundberg in Tutorials Saturday, February 20 2010 View Comments

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.

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 to the left is a screenshot of the custom 404 error page I came up with, and you can see a full-size version of the page by clicking on the image.

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 your “templates/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

defined( '_JEXEC' ) or die( 'Restricted access' );
?>

and change it to this:

Modified code in error.php

defined( '_JEXEC' ) or die( 'Restricted access' );
if (($this->error->code) == '404') {
header('Location: http://blackhillswebworks.com/404');
exit;
}
?>

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.

Tags: Joomla!, tutorial

This entry was posted on Saturday, February 20th, 2010 at 3:12 pm and is filed under Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Amma

THANK YOU! this was the best and easiest Joomla tutorial ever. Well explained and no important details were left out.
http://www.blackhillswebworks.com John Sundberg

You're welcome! I'm glad you found it useful.
Caveman

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.
http://www.blackhillswebworks.com John Sundberg

Glad to hear it worked for you, Caveman!