Building websites, templates, running blog is rewarding, no doubts about it. Sometimes although we face some errors, especially when article isn’t found. For SEO perspective the best is to avoid such errors ( set up redirections ), but it is not always possible. If it happens we should create custom error page.
In Joomla we can find error.php file inside yourwebsite/templates/system folder.
You need to copy it into yourTempalte folder. After you made copy ( gantry already has this file in place ) you may start styling and modify it. One way is to edit this file directly, another is to create article which will be displayed when error accurs. I will start from the end ( second way ). First create article.
You may want to add some image, text, etc. Hidden submits, author info.. You will ned article ID, it is last part of URL
In this case article id is set to id=2, I have used very fresh Joomla 3 installation with protostar template. Next step is to go to menu and create link for this article.
You select type as single article and then choose your article. Important is that you don’t want to publish this menu ( Status unpublished ). There is no point for user to click on page not found article. Below is what my main menu looks like:
Now it is time to make some codding. Open youe error.php file and add redirection. Check if error code is 404 and if it is true go to the article.
For this part I have used default built in protostar error.php. At this point you have custom 404 page. If you build your templates with plans to redistribute this option very unlikely suits you. You may want to edit it directly and it is easy to modify:
<p> This is some custom text</p>
<img src=”<?php echo $this->baseurl; ?>/templates/protostar/tksdLogo.jpg”>
<?php echo JText::_(‘THIS_IS_EXTRA_TEXT_WHICH_I_WILL_TRANSLATE’); ?>
I have added my logo,hard coded paragraph and translatable string.
Ok, we are pretty much done with Joomla! template, now is time to have a look at gantry framework. As usually Rokettheme guys provide us with “goog looking” error page. This file is already in our template folder and it is a bit more complex than default Joomla.
You also can edit this file. We can get rid off this rocket by removing class .rt-error-rocket to whick this iamge is a background. We can add custom stuff and images as we did previously. Below my own stuff in line 64-65, just text and image:
The most important difference is taht gantry handle this page for all errors:
$doc->setTitle($this->error->getCode() . ‘ – ‘.$this->title);
You will have:
Error: 404 – Category not found
Error: 404 – Component not found
But you may also change it override if you wish.