Sunday, 14 September 2014

Creating a Custom 404 Page in Joomla

One thing I have noticed about Joomla that sort of snook in under the radar for me is that it doesn't have a built in facility to create your own 404 error page. After a bit of research I've found out how to get it done. It's not that complicated but it does involve popping into the back end and adding some PHP code.

Joomla does have it's own built in 404 page but as you can see here it's not very user friendly in the slightest:
It doesn't follow the style of the site and it's doesn't include the default navigation which means any users will more than likely just give up and leave the site. 
In order to create your own custom page you first need to a new 'uncategorised' article. This will serve as your 404 page, include some text like Sorry, we couldn't find what you're looking for... Well really you can put what you want on it really (I won't tell!) but the fact it's going to be an article means that once we are done you can treat it and manage it like any other Joomla page.
Once you have saved your new article make note of the alias as we'll need this for the next step. Before we get stuck into the PHP code we need to create a hidden menu item so that we can navigate to the article. I won't go into detail on how to do this as if you don't know then this task might be a bit to advanced for you. The next step is to go to your ftp client and navigate to templates>system>error.php
Copy this error.php file and replace the one located in your sites template folder. For example, if I was using a template named 'Puriity' I would copy the error.php file to the templates/cleancloud directory.
 if (($this->error->getCode()) == '404') {
header('Location: /404');
exit;
}
Above is the code you need to add to your error.php. This needs to be added just after the line which defines _JEXEC. You then just need to change the location URL to your error pages alias (don't forget the /). If you are using Joomla 1.5 or below the you will also need change getCode() to code in order to use this snippet.
Now when you try and go to a URL that doesn't exist you will be redirected to your nice and shiny new 404 page.
Didn't I tell you it was simple :).