Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

Creating a good 404 page for your website is a good idea. You never know when an old page or blog post that might have changed or has been removed is still linked elsewhere on the web.

The 404 page is a useful way to share that the page is missing and still give users an opportunity to find something else they may be looking for.

Aspen Grove published a great article on 404 pages and I highly recommend you give it a look.

But in this tutorial, I am going to share with you the method we used on Monterey Premier’s 404 page template injecting a saved Divi Library Layout into the 404 page template.


View The Live Demo


To do this you will need a basic child theme and you will need to use either an ftp program such as FileZilla or if your hosting company offers you access to the cPanel, you can use the File Manager.

Let’s Get Started


Creating the 404.php File

The first thing we are going to do is create a 404.php template and add it to your child theme. If you have never done this before, don’t worry. It is much easier than you think and you will be stoked once you do it for the first time.

1. Open up your favorite text editor and name it 404.php


2. Next, you are going to add a couple of hooks to grab the default header and the default footer.

<?php get_header(); ?>

<?php get_footer(); ?>



3. Now you will need to upload it to the child theme you have already installed. If you have not installed a child theme you can learn more about them, and download a free one here: https://quiroz.co/the-ins-outs-of-child-themes-premium-divi-child-themes/


3a. If you use an FTP program like Filezilla or WinSCP, you can just drag and drop the file over to your child theme. This is what it will look like using WinSCP.

Add a Header Section & Fullwidth Category Menu to the Top of your Single Post Pages


3b. If you prefer to use the cPanel File Manager, then you just open up the file manager and go to the child theme folder (/wp-content/themes/the_name_of_your_child_theme/) and upload the 404.php file. This is what it will look like.



Awesome. Now that was not so hard, was it? Let’s move on to the next step.


Creating the rest of the page using a Divi Layout

Now we are going to create a header section and fullwidth menu section (using a category menu) and save it to the Divi Library.


4. Go to your Divi Library and select Add New.


5. Give the template a name and make sure to select “Layout” as the Template Type. This way you can add multiple sections if needed.


6. Now go ahead and create the page layout of your choice. In my example, I added a header section and a specialty section so that I could include an image, a search box, and some custom menus I have attached to specific sidebar widgets.



This is what my example looks like




Inserting the Archive Header Section into the PHP template

Now we are going to grab the header shortcode and insert it into the 404.php page with a little PHP snippet.


7. While having the layout open, check out the URL and you will see a sequence of characters and numbers. You are going to want to grab the numbers as we will need that for the next steps. For example in my case, the number sequence that I want to grab is 207965. This is the URL: http://montereydev.com/demos/tophead001/wp-admin/post.php?post=207965&action=edit


8. Go to Appearance> Editor and on the right you will find the 404.php that you added to your child theme earlier. Go ahead and open that up.


9. The code should look like this.


Add this highlighted snippet in between the header and the footer hooks. And then replace the number 207965 with the number you grabbed from your saved layout back in step 7.


Unfortunately, my Syntax plugin does not know how to read the shortcode without messing up this page so you will have to write the code yourself or grab the snippet from this rich text format file.
BOOM!!!! You have just created a custom 404 page and injected a Divi Layout into it.



Inserting Different Header Sections into Search pages, author pages, and category pages.

We have been doing a series on injecting Divi Sections and Layouts into various parts of your website. So be sure to check out these other two great tutorials on the subject.

Add a Header Section & Fullwidth Category Menu to the Top of your Single Post Pages

Add a Divi Library Header Section to the Top of your Archive Pages

Once you start playing around with this type of stuff you will find you can do all sorts of amazing stuff in Divi.

Have fun!

Well, that’s all for now. I hope you find this article useful.

The following two tabs change content below.
Geno is an entrepreneur who has been designing websites since 1996. He also enjoys all things design, traveling, hanging out with friends, encouraging other believers, and experimenting with new technologies. When not doing any of the above, you can find Geno blogging or writing Divi customization tutorials here on Quiroz.co.

©2012-2019 Geno Quiroz | Teach Learn Build Love | Divi Expert ServicesJohn 3:16

Divi is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed by Elegant Themes.



You have Successfully Subscribed!

Pin It on Pinterest