By default, Joomla does not provide a 404 page that you can easily create and manage.
A 404 is really useful for guiding your visitors when they visit a broken URL on your site.
I'm going to demonstrate how to create a custom 404 page.
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
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 Robots Options
- In the same article, click the "Publishing" tab. Look at the right column and click on the "Robots" field.
- Select "No index, no follow" to prevent this particular page to be indexed in search engines.
- Click "Save & Close".
Step #3: Create a Hidden Menu
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.
- Click "Save".
Note: Make sure this menu item is not published so it is not displayed.
Step #4: Copy the Link
- 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 #5: Edit the error.php File
- 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. Use this code:
if ($this->error->getCode() == '404') { header('Location: /theURLtoYour404Page'); exit; }
Step #6: Test Your 404
- Type in a URL such as yoursite.com/blahblahblah to be redirected to your custom 404 page.
In this example, I used my 404.png file. As you can see, I'm not much of a graphic artist, but it gets the point across.
Congratulations! You now know how to create custom 404 pages.
Pro tip: 404 status code
We've published a follow-up tutorial on how to get a 404 status code as well.
What's Next?
Save $1,000's when you sign up to Joomlashack's Everything Club.
You will get access to all our 32 extensions, and legendary support!