Saturday, 12 December 2015 19:26

Custom 404 error pages

Written by
Rate this item
(0 votes)

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.

404 error file location

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.

article screenshot

You may want to add some image, text, etc. Hidden submits, author info.. You will ned article ID, it is last part of URL

article id where to find it

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.

menu manager screenshot bt tkstudiodesign.com

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:

menu manager screenshot main menu

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.

404 error screenshot

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:

                           <div class="span6">
                                <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'); ?>
                                
                            </div>

I have added my logo,hard coded paragraph and translatable string.

joomla error page

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.

default gantry framework error page - screenshot

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:

code gantry error page

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.

 

 

Read 1123 times Last modified on Saturday, 12 December 2015 19:32