Custom 404 page for Divi
Howdy and Hello! I see a lot of questions on custom 404 pages. I’m sure there are several plugins that can do this for you, but this method takes two files and a folder in your child theme, and one layout in your Divi Library. I’ve been doing this set up for a few years and I can’t remember where I found this method. I use something very similar for adding headers on archive pages for custom post types. It’s really handy.
First, you MUST have a child theme. This is the most important part of these tweaks. If not, as soon as you update your theme, goodbye, customizations! The child theme I use is at the bottom of this post. You are more than welcome to use it.
If you already have a child theme, you will also need to have SFTP/FTP access to add the files and folder.
Second, create a file called 404.php. Copy and paste the “Code for 404.php” into it. Save it!
Third, create a folder called includes in the root of your child theme. Inside this folder, create a file called no-results.php. You guessed it, copy and paste the code labeled “code for no-results” into the file. Save it!
Code for 404.php
< ?php get_header(); ?>
<div class="container" style="width:100%;max-width:100%; margin-bottom:0;">
<div id="content-area" class="clearfix">
<article id="post-0" style="margin-bottom:0;" <?php post_class( 'et_pb_post not_found' ); ?>>
< ?php get_template_part( 'includes/no-results', '404' ); ?>
</article> <!-- .et_pb_post -->
</div> <!-- #content-area -->
</div> <!-- .container -->
</div> <!-- #main-content -->
< ?php get_footer(); ?>
Code for no-results.php
<!--If no results are found-->
< ?php $id = THE ID OF YOUR DIVI LIBRARY LAYOUT GOES HERE; $p = get_page($id); echo apply_filters('the_content', $p->post_content); ?>
<!--End if no results are found-->
Next, go to your Divi library and create a new layout. I recommend a search module, maybe a link to popular pages, blog posts, contact form, and definitely a link back home. Save it!
What you name it doesn’t really matter. What you need it the post id. The post id is up in the URL. It will be toward the end of the string. Check out my image. The post id is highlighted. It’s 54306.
Lastly, go back to your no-results file. Replace “THE ID OF YOUR DIVI LIBRARY LAYOUT GOES HERE”, with your post id. Save it!
That’s it. Pretty simple, right?
How to find your Post ID
You might be saying, “um Rebekah, do I really need the no-results file”? No, not really. This just follows the Divi file structure. If you take a look, our 404 file is the exact same one from Divi, with some inline CSS added.
The no-results file is the same as well. We just call the content of a page, using get_post, instead of a static “no results found” response. If you wanted to, you could drop the no-results page and call the post id from the 404 file.
You could also use a page instead of a layout in the library. My only worry here is that the page get’s indexed and then you have a random page that isn’t really relevant. You could always no index it with whatever SEO plugin you are using.
As I mentioned before, this method of calling a page comes in really handy. You could use this method to create custom headers for archive pages. I often use it when I have custom post types. You can read more about get_post in the WordPress Codex. Here is a link to these files on Github. Here is link to download my child theme that includes these files. It also includes a footer file. If you don’t need the footer, you can delete it.