How to Create a Custom Joomla 404 Page With SP Page Builder

So, let’s say you have built a website and done possibly everything to drive traffic to your site. From adding incredible content to doing SEO, you have implemented every tip and trick to grow your traffic. But what about a custom 404 page? Did you miss out on that?

When it comes to growing your business online, every visitor is important. And when you don’t set up your own customized 404 page, chances are you lose a sale every time a visitor stumbles upon a 404 error. We can’t afford to do that, right? In today’s article, we will walk you through a step by step process to customize your own Joomla 404 page using SP Page Builder. Let’s get started!

What is a 404 Error Page

A 404 error page is thrown when visitors try to access a page on your website which does not exist. The HTTP 404 status code indicates the browser was able to communicate with the server but could not find what was requested. This usually happens when the visitors click on a broken link, misspell a URL, etc.

The common reasons why a 404 error message could appear are:

• The URL or its content is moved without adjusting the internal links accordingly
• The URL or its content is deleted
• The URL is typed into the browser incorrectly
• The server where the website is hosted is facing an issue
• The entered domain name does not exist anymore

Why You Should Care About Your Joomla 404 Page

While 404 errors can be frustrating, they cannot be ignored. You have no control over a misspelled URL entered on a visitor’s browser or a broken connection. Therefore, our primary goal is to turn this negative experience into a positive one. A custom 404 error page can:

• Reduce the bounce rate and keep users on your website
• Keep people engaged with your site and moving through your sales process
• Leave them with a good feeling after a positive resolution to their 404 problem
• Maintain consistent branding across your site
• Attract additional attention for your brand if you do a good enough job

These are enough reasons to care about your Joomla 404 page.

What to Include in Your 404 Page

So, that leaves us with only one question. What to include in our custom 404 page? A good 404 page should have clear navigation. It should show the visitor the path where they wanted to go in the first place. Or, at least provide a link to the Home page. You can also be creative and display some interesting images or interactions to keep the visitors on the loop before being redirected. Landing on a fun, navigable page can be a nice surprise for the lost visitors, no?

How to Track the 404 Errors on Your Joomla Site

If you are using Google Analytics for your Joomla site you can easily track how many 404 errors visitors are encountering. From Google Analytics Pages settings you can change the Primary Dimension to Page Title and search for “page not found” to see a list of the broken URLs that triggered the 404 errors.

You can also set an alert on Google Analytics that will let you know each time your 404 page view increases above a certain threshold. Check this help center article to learn how to set a Custom Alert.

Create Your Custom 404 Page With SP Page Builder

Now, we will design our own custom Joomla 404 page using SP Page Builder. You can simply create a page just like how we normally create pages using SP Page Builder. To do that, go to your Joomla administrator dashboard > SP Page Builder > Pages > New. Give your page a title and then save to start editing from the front-end editor.

SP Page Builder has 50+ addons to add creative and fun designs to your web pages and the 404 page is a great way to show that off. You can add images, videos, search bar, interactive elements, and make this page really interesting. The primary focus of the design process is to make the users understand they are lost but can still navigate to their desired content. That way, they are less likely to bounce and go to your competitor’s site.

Let’s see an example of how to build a custom 404 page using SP Page Builder:

Step 1: Select your desired addon. For this tutorial, we will be using the Image Content addon.

Step 2: Replace the existing image with your custom image or GIF.

Step 3: Edit the Addon title. Here, we have set the title to 404 Page Not Found!

Step 4: Edit the content with some meaningful text. The goal is to help the lost visitors navigate back to their desired page.

Step 5: Lastly, edit the Button Text and the Button Link to take the users back to your homepage.

Assign the Page to a Menu

Once you have designed your 404 page, it is time to assign the page to a menu item to get the URL of our custom 404 page. Simply do the following to get the job done:

Menu Title: Give your menu item a title, we have given it 404.

Menu Item Type: Menu Item Root

Select Page: Select the custom 404 page that you have created earlier. Save the menu. Make the 404 menu item hidden (important).

Here’s why we need to assign the page to a menu - the Link. Copy the link, we will need this in our next step.

Edit the error.php File in Your Template Root Directory

From the template root directory, we need to edit the error.php file. To do that go to your Joomla root directory > templates > shaper_helixultimate > error.php. Please note, for this tutorial we are using our Helix Ultimate template. Select your template and the path accordingly.

Now, add the following code at the beginning of the file.

// 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=10';
}
if (($this->error->getCode()) == '404') {
	header('Location: ' . $redirect_url, true, 301);
	exit;
}

Replace

index.php?option=com_sppagebuilder&view=page&id=10

with the URL of the page that you have copied earlier.

Final Outcome

And, you are done! Now, you have your own custom 404 page that has the same header, footer, and navigation link as the rest of your website pages.

Wrapping Up

The default 404 error page does not give the visitors enough information about the reason for the error and how to proceed further. But a custom 404 page can add value to your Joomla site and navigate the lost visitors back to your website. So, what’s the wait? Set up your own custom Joomla 404 error page today and let us know in the comments how it went. Good luck!

Try SP Page Builder for FREE!Get SP Page Builder Pro