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.
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: http://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.
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.
Once you start playing around with this type of stuff you will find you can do all sorts of amazing stuff in Divi.
Well, that’s all for now. I hope you find this article useful.
Latest posts by Geno Quiroz (see all)
- Align Buttons To The Bottom of the Row - May 1, 2018
- Inline Buttons - April 6, 2018
- Animated Gradient Background Overlay Close-In From Both Sides - March 28, 2018