How to Create A Custom 404 Error Page in Joomla 4

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.

Rate for post

The post How to Create A Custom 404 Error Page in Joomla 4 appeared first on LTHEME.