How to Create a Custom Divi 404 Page

How to Create a Custom Divi 404 Page

Customizing the 404 error page on your website is an important step for keeping users engaged when they land on a page that does not exist. Whether it is a typo in the URL, a blog post you removed without a 301 redirect, or a page you deleted, a clear simple 404 page can keep users from leaving, save a sale, and redirect your visitors to the content they were searching for.

Thankfully, for Divi users, it couldn’t be easier to build a custom 404 page on a WordPress website.

In this guide, we’re going to look at the 3 best methods for correctly converting your 404 error page with Divi. These methods include:

  • Manual – replacing the 404 template with custom PHP
  • Divi – using the template builder to create and use a 404 layout
  • Plugin – Activate a plugin like Divi switch or Page Builder Anywhere, and you can set any page to function as your 404 page with the flick of a switch.

Choosing the Right 404 Method for Your Website

Choices are great but additional steps researching the right method for your setup can slow you down when you are just wanting to find the quickest solution. If you’re wanting fast and efficient, the Divi Switch plugin method will let you skip a few steps. Plus, it includes over 50 additional toggle controls for expanding the Divi builder. Check out all the available switches and how you can speed up development or see what’s new in Divi Switch.

If you are trying to keep everything contained to the Divi builder and don’t plan on using plug-ins for added functionality, Divi’s theme template’s option is the best method.

Finally, we’ve included the manual option so you can see what’s going on under the hood. This is not the most efficient method, but If you’re just learning how Divi and WordPress handle the 404 not found page, this is a good place to start and will give you a better understanding of the WordPress Template Hierarchy.

For speed, ongoing maintenance, and to get the job done with as little fiddling as possible, use the plugin or Divi template method.

1. How to Manually Setup a 404 Page Using PHP

If you know a little about PHP then replacing your 404 / Page Not Found template is fairly easy.

But what if you don’t?

Wouldn’t it be great if you could just build a normal page using the page builder you know and love and use that as the template instead?

You can by replacing the ‘no-results.php’ template for Divi Space. Here is an example of our custom 404 page.

Setting up the Template

By default, the no-results.php looks like this:

<div class="entry">
<!--If no results are found-->
 <h1><?php esc_html_e('No Results Found','Divi'); ?></h1>
 <p><?php esc_html_e('The page you requested could not be found. Try refining your search, or use the navigation above to locate the post.','Divi'); ?></p>
</div>
<!--End if no results are found-->

What we’re going to do is replace the text that’s being called with a bit of php that will load a page instead. Here’s what you need to do:

  1. In your child theme, create a folder called ‘includes’ at the root level (the same place as your functions.php). If you’re already using a child theme that has an ‘includes’ folder in it, then ignore this step.
  2. Inside that folder, either copy the no-results.php template from your parent Divi theme (you’ll find it in the ‘includes’ folder), or create a new file called no-results.php.
  3. Open your new ‘no-results.php’ file and if it isn’t already blank, delete everything in it.

Now that you have a blank canvas, add this code:

<div class="entry">
<!--If no results are found-->
 <?php $id = ###; $p = get_page($id); echo apply_filters('the_content', $p->post_content); ?>
</div>
<!--End if no results are found-->

If you’re worried that you may get the steps above wrong, just unpack this custom-404 zip at the root of your child theme instead. I’ve already taken care of the code for you.

Adding Content to Your 404 Page

You’ve now replaced the standard template with your own that has the ability to call a page, by its ID into the content. Super! The next step is to create your new page.

  1. Create a new page. Make sure it’s a page and not a post.
  2. Add any content you want to appear on your 404 page. Use the page builder if you like 🙂
  3. Save the post as a draft and grab the page ID.

Locating Your New 404 Page ID

To get your page ID just hover over the ‘edit’ button next to the ‘publish immediately’ option in the publish section.

custom 404 2
  • Facebook

Locate your Divi page id and publish your page

In the bottom left corner, you’ll see post = ### . That number is your page ID.

Make sure you’ve saved the post. Copy that number and go to Appearance > Editor in your admin menu. Look for the file that says no-results.php and click on it to edit.

custom 404 3
  • Facebook

Add your page id to no-results.php

In your version, you have to replace the ### with whatever page ID you just copied.

Now your 404 template will call that page and display it instead 🙂

Removing Default CSS Padding and Margins

The only thing left to do is add some CSS to remove all of the padding and margins from the default 404 to ensure that the page fills all of the space available. Here’s the CSS you need to add to you child’s style sheet:

.error404 #main-content .container, .error404 #content-area, .error404 #left-area {
 padding: 0 !important;
 margin: 0 ;
 width: 100% !important;
 max-width: none;
}

.error404 #sidebar {
 display: none;
}

.error404 .et_pb_post:last-child {
margin-bottom: 0;
}

and for no result page:

.search-no-results #main-content .container, .search-no-results #content-area, .search-no-results #left-area {
 padding: 0 !important;
 margin: 0 ;
 width: 100% !important;
 max-width: none;
}

.search-no-results #sidebar {
 display: none;
}

.search-no-results .et_pb_post:last-child {
margin-bottom: 0;
}

Testing Your 404 Page

Now you can check to see your 404 page is using the new template. This is the easy part. Just visit your site’s home page and add a random slug to a page that does not exist. For example: www.yoursite.com/adfasad

Chances are you don’t have a page or post with the slug “/adfasad/” if you do, choose a different slug that does not exist.

If your template is displaying correctly, congratulations! You have successfully manually set a custom 404 / no results page for your Divi site. You might be a WordPress/Divi genius now 😉

Now let’s look at some faster solutions that are built-in and are easier to maintain moving forward.

2. How to Use Divi Theme Builder to Customize the 404 Page

The Divi Theme Builder comes packaged in Divi. The Theme Builder lets you create templates for all your pages and posts types including:

  • Pages – Individual, categories, all, and custom page types
  • Posts – Individual, categories, tags, all, and custom post types
  • Archive pages – Author, date, category, and tag variations
  • Project pages – Specific categories, archive, tag, and project types
  • Other pages – 404 and search pages

To customize your 404 page with the Divi Theme Builder, from the WordPress dashboard go to the Divi > Theme Builder menu item.

Click the “Add New Template” option.

Divi theme builder add new icon
  • Facebook

Click the add new icon in the Theme Builder

This will open the Template Settings module. Under the “Other” section, check the box next to 404 Page and click the Create Template button.

Divi 404 template select module
  • Facebook

Open the template settings module and select 404 page

This tells Divi to use your template as the new 404 page. Here you can set and create a custom 404 page configuration by editing the template. Template elements include:

  • Header
  • Body
  • And, Footer

Leaving an element blank will display Divi’s default 404 page option. If you want any part of the 404 page to be hidden, click the Hide On Front End icon. For example, you may not want your default mega footer to appear because you’ve integrated some custom footer elements into the 404 body content.

Divi hide on front end icon
  • Facebook

Click the eye icon to hide an element from displaying

Click the Add Custom Body option and you will be given the option to build out your 404 body content from scratch or add one from a layout.

Divi custom body build
  • Facebook

Use the Build Custom Body option to customize your 404 page

If you are putting together a completely custom website or are using a free or premium Divi layout that does not include a 404 template, you will choose the Build Custom Body option.

Click the start building button under “Start Building From Scratch” to open the Edit 404 Page Body Layout builder tool.

Divi build options
  • Facebook

Use the build from scratch option if you do not have a template created

Keep in mind, when editing from here you are only editing the body. To customize the header and footer you will need to return to the theme builder overview page, select the element customize, and save.

Divi editor text module
  • Facebook

Use the builder to edit your 404 content

This built-in option is great but it does require a few extra steps over the plugin option below. The good news is your 404 page is not typically edited or changed very often. If you plan on iterative changes or incremental improvements based on user experience continue to the plugin method.

3. 404 Pages Made Easy With The Plugin Method

The plugin method uses a plugin to implement the change. This can be valuable if you are trying to move quickly or are planning on making changes to the page often. In this section we will look at two plugins with different approaches to customizing the 404 page.

Divi Switch

If you plan on running A/B tests on your 404 page, making minor tweaks over time, or are using a plugin to expand Divi functionality, the plugin option eliminates steps and allows you to create and customize a 404 page as easily as setting up a new page with Divi.

With Divi Switch, you can make any page you create the 404 page.

To get started, create a page. From the WordPress dashboard menu go to the Pages menu and click Add New.

Create a new WordPress Page
  • Facebook

Use the add new option in the WordPress dashboard

You can give it any slug you like and style it just like you would any page. For this example, I am going to use the page title “404”.

Style your page how you like. For a look at what elements should be included on a 404 page, learn elements for a successful 404 error page over on the Aspen Grove Studios blog. Our members also have access to a pack of professionally designed 404 templates that make it really easy to setup a 404 page.

Divi designed 404 page
  • Facebook

Here is an example 404 page from our member exclusive pack

Once you’ve published your page, with Divi Switch active on your site, go to Divi > Divi Switch and under the Main Content tab, scroll to the Custom 404 Page option, and select the desired page in the dropdown menu.

Divi Switch 404 page selector
  • Facebook

Use the Divi Switch 404 page selector to choose your custom page

Click Save Changes, and that’s it.

Now you can edit your 404 page just like any other page. Switching to a new slug, design, or page moving forward is as easy as returning to the dropdown menu and selecting a new page.

Page Builder Everywhere 404 Page Option

Page Builder Everywhere takes a different approach than Divi Switch to expanding Divi functionality. Where Divi Switch adds simple toggles for turning on features, Page Builder Everywhere allows you to not only use Divi elements on pages and posts, it lets you and Divi elements anywhere text goes.

Create and save a layout and then use the widget editor to apply your custom 404 page conditional logic to apply it to your page.

Here is a video tutorial on how you can use PBE:

If you are already familiar with the PBE logic and more comfortable using the widget editor or the WordPress customizer, this option eliminates the need for adding an additional option but if you are looking for the quickest option we recommend using Divi Switch.

More Customization With Divi and WordPress

Divi makes customizing every part of your WordPress website easy from landing pages and posts to custom archive, and 404 pages. And using powerful extensions like Divi Switch simplify and expand your possibilities.

So whatever method you choose, knowing all the available options gives you a better understanding of how the WordPress Template Hierarchy works and how to speed up development with Divi and expansion pack plugins.

To learn more and get even more out of Divi follow us here on the blog and become a member to get access to exclusive Divi courses, Divi Switch, and our suite of design tools for speeding up development in WordPress.

Did this guide help you set up a custom 404 page? Let us know what other guides we should create if you have any questions, or tell us what features you would like to see added to Divi Switch in the comments section below!

Stephen James

SJ is a web developer living in the coastal town of Southsea, England. He is a Divi and WordPress advocate and the founder of Divi Space.