This article describes an approach to creating a Divi 404 page without needing a plugin and by using one of the Divi’s own pages, making it very easy to edit the page and giving maximum flexibility in its design.

If a visitor requests a page from your website that does not exist, the default behaviour of WordPress is to respond with a ‘404 error’ and to display a ‘Page Not Found’ message. This might give a poor impression to someone visiting your website. In fact, they might abandon your website immediately. So, it’s a good idea to try and ‘trap’ any such error and provide a more helpful response instead.

One approach to this is to use a plugin. Many such plugins require you to fill in a form to specify your new error message. A more flexible approach is a plugin such as 404page, which displays one of your WordPress pages in response to a 404 error. The advantage of this is that you are then free to design the error page in any way you want using any available tools.

Another approach is the more traditional way of creating a new file called a 404.php. The best place to create this file is in your child theme folder. You can create this file in your theme folder instead but we recommend using your child theme folder. When the visitor requests a non-existent page, it is your 404.php file that is displayed. This solution requires knowledge of PHP and HTML (to write the 404.php file). However, it does mean that you can avoid loading an extra plugin into your theme.

So, in this tutorial we will aim for the best of both worlds – to use a page from our website as a 404 error page but to do this without needing a plugin. We will be able to create and edit the error page ourselves using Divi Builder etc.

First, let’s create a simple 404.php file, one that displays a short message. To do this, create a file called 404.php in your child theme folder and use the following as its contents –

 

<?php get_header(); ?>

<div id="main-content">
  <div class="container">
    <div id="content-area" class="clearfix">
      <div id="left-area">
        <article id="post-0" <?php post_class( 'et_pb_post not_found' ); ?>>
            <h1>Sorry - file not found</h1>
            <p>Please search our site to find what you are looking for.</p>
        </article> <!-- .et_pb_post -->
      </div> <!-- #left-area -->

      <?php get_sidebar(); ?>
    </div> <!-- #content-area -->
  </div> <!-- .container -->
</div> <!-- #main-content -->

<?php get_footer(); ?>

 

The code in this file is based on the code that Divi uses to display pages and posts, but simplified a lot. With this 404.php file in place, requests for non-existent files should receive a response of –

Sorry – file not found

Please search our site to find what you are looking for.

Try it out now. It’s not difficult to change this message by changing the 404.php file but the design of the page is very limited unless you know HTML well. However, with a small change to the above 404.php file, we can get it to display a Divi library layout instead. We can then edit this layout with Divi Page Builder and put anything we like in it!

The trick to this is to know the Post-ID (often just called the ID) of the Divi library layout that you create and use that in the 404.php file. Every page, post etc. in WordPress has an ID associated with it. IDs are unique numbers and are allocated when the page is created. They do not change, even if you change the file name and title. WordPress uses the IDs to structure its database. In effect, the IDs link all of the objects in the database together and define the relationship between them.

There are a couple of ways of finding the ID. The simplest is to just look at the URL when editing the page/post/layout.

 

So the ID of the post being edited above is 3194.

When you create a layout in the Divi library, simply look at its URL when editing it and note its ID. It does not matter what the name of the layout is, the code in your 404.php file is going to refer to the layout by using its ID, not its name. Do not use 3194 as the ID, that is the ID of my page from my website. You need to instead use the ID of your layout.

Ok, so the final thing to do to get the 404.php file to use the Divi library layout is to replace the original code above that displayed the text message with code that will insert the layout into the 404 page, using your layout ID. The new version is below but there are two things though that you need to change in this code to get it working in your site –

Be sure to replace MY-LAYOUT-ID with the ID of your layout or this will not work.

Be sure to replace etpbsection with et_pb_section (in two places) or this will not work.

Unfortunately, the plugin we use to display our code does not seem to cope very well with this particular fragment. We have avoided this problem by using etpbsection instead of et_pb_section. You need to change the code to use et_pb_section before using it.

<?php get_header(); ?>

<div id="main-content">
  <div class="container">
    <div id="content-area" class="clearfix">
      <div id="left-area">
        <article id="post-0" <?php post_class( 'et_pb_post not_found' ); ?>>

        <?php echo do_shortcode('[etpbsection global_module="MY_LAYOUT_ID"][/etpbsection]'); ?>
        <!-- replace MY_LAYOUT_ID with YOUR layout ID - something like global_module="1234" -->
        <!-- replace etpbsection with et_pb_section and replace /etpbsection with /et_pb_section --> 

        </article> <!-- .et_pb_post -->
      </div> <!-- #left-area -->

      <?php get_sidebar(); ?>
    </div> <!-- #content-area -->
  </div> <!-- .container -->
</div> <!-- #main-content -->

<?php get_footer(); ?>

 

 

So, this is the same as the original code but the message, the <h1> and <p> elements, have been replaced with code that will output the chosen layout from your Divi library, by using its ID.

 

Subscribe To Our Blog

If you found our blog article useful, why not subscribe? Get all of our articles and tutorials delivered direct to your inbox!

You have Successfully Subscribed!