Introduction
What is A 404 Error Page?
As you know, the HTTP 404 status code shows that visitors’ browsers can communicate with the server, but they can’t find the requested content. So, when your visitors try to open a page that doesn’t exist on your site, a 404 error page will be showcased. Some popular reasons that cause a 404 error message include:
- The URL/ its content is removed.
- The visitors typed the URL incorrectly.
- The URL/ its content is moved without customizing the internal links.
- The domain no longer exists.
- The website hosting server faces trouble.
Hence, if you want to build a 404 error, what content you should add? A good and useful 404 page should have clear navigation. That means you should display:
- Your homepage.
- Some hottest blog pages.
- Some popular or trending product or service pages.
- An HTML sitemap.
Why do you need to create A Custom 404 Error Page in Joomla 4?
If you are using Joomla 4, there are many compelling reasons you should consider creating a custom 404 error page for your site:
- Navigating visitors to the homepage or any page you want them to access.
- Helping your site become more professional.
- Decreasing the bounce rate.
- Giving the visitors a great experience when they surf your site.
After taking a look at some fundamental information about the 404 error page, it’s time for you to explore how to generate it.
Let’s create A Custom 404 Error Page in Joomla 4
In the blog, we would like to provide you with two ways to build a custom 404 page. So, you can read and select the most suitable one for your site.
Generating a custom 404 error page manually
First of all, you need to create a new menu item for your 404 page. In order to do that, you just need to go to Menus -> Main Menu Blog -> New.
Now, simply fill out the title, then click on the Select button in the Menu Item Type option.
A Menu Item Type popup will appear for you to select. Thus, let’s choose Articles -> Single Article, then close the popup.
In the Select Article option, press the Create button to generate a new article.
Next, let’s enter the title of the article. After that, in the Article Text, you need to fill out the content you want to display on the 404 error page. You can add text, images, links, and much more.
After finishing, simply click on the Save & Close button.
Now, you need to move on to the Link Type tab and disable the Display in Menu option.
Once turning off the Display in Menu option, let’s save the menu. Moreover, you need to remember the ID number of the article in the Link box.
Close the menu, you will see a menu ID. So, all you need to do is remember the ID number of the 404 error page menu.
In the next step, let’s open System -> Site Templates, then click to edit the template you are using in Joomla 4. In our example, we are using Cassiopeia, so we will open and customize it.
Now, let’s find and edit the error.php file in the /templates/cassiopeia folder.
After the code defined('_JEXEC') or die; in line 10, you just need to add the following code:
if (($this->error->getCode()) == '404') {
header('Location: ' . Jroute::_("index.php?option=com_content&view=article&id=XXItemid=YY", false));
exit;
}
Don’t forget to replace XX with the ID of the article, and YY with the ID of the menu item you created before.
Eventually, simply save it.
Now, you can freely check the result on your site. After the URL, simply add anything you want to view the 404 error page.
Using SP Page Builder to build a custom 404 error page
If you feel the first method is quite complicated and time-consuming, you can try the second one.
We will start the second way by downloading SP Page Builder and installing the extension on your Joomla site.
Once successful installation, you just need to go ahead Components -> SP Page Builder -> Pages -> New. After that, simply add the title for a new page and save it. It will allow you to customize from the front-end editor.
SP Page Builder will support you to edit the page with the drag-drop feature. Therefore, it’s easy and simple for you to edit the page in your own way.
You need to add the row, then choose the add-on you want to use. In the next step, simply enter the title as well as add the image you want to showcase on the 404 error page. Besides, you can edit the text and image with some useful options. If you desire to add a button link to navigate the visitors to go back to your homepage, you need to use the premium version with many outstanding add-ons.
Don’t forget to save the page after completely designing it.
Now, let’s go back to your admin dashboard and create a new menu item. Simply open Menus -> Main Menu Blog -> New.
Enter the title first, then click on the Select button in the Menu Item Type.
You need to select SP Page Builder -> Page.
In the Select Page section, let’s choose the 404 page you created in the previous steps. After that, simply save the menu item and remember the page ID in the Link box.
Next, go to the Link Type tab and turn off the Display in Menu option. Save it again.
Finally, all you need to do is open System -> Site Templates (in the Templates tab), then click to edit the template you are utilizing.
Let’s find the error.php and customize it. After that, simply add the code below:
// custom 404 redirect
$config = JFactory::getConfig();
$sef = $config->get('sef');
$sef_rewrite = $config->get('sef_rewrite');
$sef_suffix = $config->get('sef_suffix');
$redirect_url = JURI::base();
if(!$sef_rewrite) {
$redirect_url .= 'index.php/';
}
$redirect_url .= '404'; // menu alias
if($sef_suffix) {
$redirect_url .= '.html';
}
// if sef is turned off
if(!$sef) {
$redirect_url = 'index.php?option=com_sppagebuilder&view=page&id=XX';
}
if (($this->error->getCode()) == '404') {
header('Location: ' . $redirect_url, true, 301);
exit;
}
Change the XX into the ID number of the page you have already generated before and save it.
Everything is done. So, why don’t you take a look at the result on your site now?
Closing thoughts
In conclusion, we are happy to show you the way how to Create A Custom 404 Error Page in Joomla 4. Therefore, we hope that the blog will be helpful for you. If you have any relevant questions, then let’s leave your comment below. Furthermore, in case you have an intention to use another template for your site, don’t hesitate to visit our Joomla 4 Templates. Since the collection includes many templates on many different topics, you can freely select the one you love.
- How to place menu items in helix joomla 5 ? - December 14, 2024
- How to reduce the size of helix 2 layout ? - December 14, 2024
- What’s J4 starter template and how to use it - December 3, 2024
Not working. Redirects to index.php
Did you follow steps from blog?
Yes
I am using Joomla 4.1.5
I have exactly the same issue. Any 404 error is redirecting to index.php … no matter what I try to change in error.php or .htaccess. It’s frustrating.
Thank you for your feedback! Our team will recheck this process and confirm it shortly.
when I enter the URL index.php?option=com_content&view=article&id=7Itemid=173 it shows up but not when enter a non existing page.
Thank you for your update, will update shortly.
Still having the same problem
index.php?option=com_content&view=article&id=4Itemid=156
in url works perfectly, but not with a 404 error
The whole point to me of defining a custom error page is not to have to edit existing Joomla files, to avoid issues when updating. Yet this means I have to update the existing error.php, so I might as well just put my new code in there? Interesting that Joomla allows one to create a custom fatal error page without editing as fatal.php checks, but error.php does not
Yes, I agree with your opinion. So, we have custom 404 page from our template function instead.
I managed to get this to work by changing ‘404’ to ‘500’ since the error code displayed in the browser tab was 500. I guess this means that Joomla 4 does not actually use the 404 error code for page not found?