Thursday, June 15, 2017

How to redirect 404 Pages to your Articles in Joomla


Create Custom 404 Pages in Joomla

We're going to create an article, add a menu link and then add a little code to a file in your template folder.

Step 1: Create an article

media_1374034818704.png
The first step in creating a custom 404 page is to create a new article.
  • Title: Create something that is specific to Error 404 since it may be displayed as your browsers title bar.
  • Alias: Type in a simple alias, such as 404.
  • Category: You can use Uncategorised or create another category.
  • Article Text: Add your 404 image or text, or design it however you'd like. In this example, I made my own funny 404 image.

Step 2: Edit Metadata Options

media_1374035630923.png
  • On the same article, look at the right column and click on the "Metadata Options" tab.
  • Select "No index, no follow" to prevent this particular page to be indexed in search engines.
  • Save and Close.

Step 3: Create a Hidden Menu

media_1374035895974.png
You can view our tutorial on how to create a Hidden menu here.
  • Menu Item Type - Select your Error 404 Page article.
  • Menu Title - Anything you'd like, such as Error 404 Page.
  • Alias - Type in a simple alias, such as 404.
Make sure this menu is not published in a module position so it is not displayed.

Step 3: Copy the Link

media_1374037469200.png
Copy the URL from your menu and store it on a notepad since you will be using this URL in your error.php file.

Step 4: Edit the error.php File

media_1374039749187.png
Find your error.php file.Usually it is located in "templates/YourTemplate/system/error.php" or in "templates/YourTemplate/error.php".
If you don't have an error.php file, create it in this folder: templates/YourTemplate/error.php.
Please make sure that you have this security code at the top of the file:
 defined( '_JEXEC' ) or die( 'Restricted access');
Now we need our 404 page code.
For Joomla 1.5 use this code:
 if ($this->error->code == '404') { header('Location: /theURLtoYour404Page'); exit; }
For Joomla 2.5 and 3.x use this code:
 if ($this->error->getCode() == '404') { header('Location: /theURLtoYour404Page'); exit; } 

Step 5: Test Your 404

Type in a URL such as yoursite.com/blahblahblah to be redirected to your custom 404 page.

how to change background color of single menu item



If your template does not include a Custom CSS option, try adding the CSS to the end of your templates CSS file.
  1. Within your Joomla administration navigate to the menu which contains the menu item you wish to style (Menus -> [YourMenu]).

  2. Joomla assigns a unique ID to each menu item. We are going to use this ID when styling the item. Under the ID column of your menu items, take note of the ID for the menu item you wish to style (Eg. 507).

    menu item ID
  3. Using your menu item ID we will add some CSS to your template using the 'Custom CSS' field of your templates parameters. Navigate to Extensions -> Templates and click in to your template settings. Select the 'Custom CSS' tab and add the following CSS to the field provided, editing the ID to match that of your menu item and the color to your own taste.

    .item-507, .item-507 > a { color: #D14233 !important; }
     
  4. Hit 'Save & Close' to apply your custom CSS.