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.
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.
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.
Great tip!
When updating the layout will it also update the page? For example if I add another module on the layout?
Dan
Yes. Thats the beauty of it 🙂
Awesome. Thanks for this tip.
Just a quick note for fixed navigation with a different height the main-content div should also be included:
Muy interesante el truco. Lo pondré en práctica para mi blog. Gracias!
Thank you Geno. It’s simple and it’s works perfectly!
Q –
As always, thank you!
My pleasure 🙂
Well done Geno. You are a legend. Even thought to include the snippet to save re-typing. Worked very well and I will use it on all my sites.
Brilliant. Thanks Geno!
Geno,
One of many tips and tricks you have shared that makes this fun and interesting. I had not thought about a 404 replacement page until I had seen this. I just put it together and am very excited. Can’t wait to show this off to the client.
Thank you!
Darren
It doesn’t look like your 404 page footer is a standard WP footer. However, I could not get the layout I built in the divi builder to format correctly until I included both both php snippets that grab the header and footer. Is it possible to use ONLY the layout page without the WP header and footer?
Thanks in advance for your reply!
I have not tried that yet but I do not see why not.
Hi Geno, I was also wondering how you created your awesome looking footer? Is it true (as per Roger Cooper’s comment above) that this is NOT a standard WP footer, created using the standard footer and widgets? I am not a pro, but when I look at the source code using Chrome code inspector, it seems this is the standard footer – have you used a Divi layout and injected this into the footer area, in a similar fashion than you created this 404 error page template? I am still learning Divi and once created a Divi layout as a footer, then pasted the layout’s shortcode (source code) into a full-width text widget as the only widget in the standard footer area, and it populated correctly – but then I had a hard time making CSS changes to get rid of some margins and paddings, as I could not identify the correct elements in Chrome code inspector. I hope I am explaining this well enough.
Basically, I think I would love to create a standard footer using the Divi builder, then have the resulting layout appear as default on every post/page that should come with a footer. Do you have a tutorial on this?
Yes I injected a page builder section into my footer. Here is a tutorial https://quiroz.co/replace-the-default-footer-with-a-divi-builder-footer-saved-in-your-divi-library/
Hi, thanks for the info. I couldn’t get the formatting to look right IF i remove the “get header” and “get footer” codes.
How can I do this without getting the header and footer?
I am not sure why the formatting is not working but you could just hide the header and footer using CSS.
Hi Geno,
thanks for your tutorial. I need to create a 404 page and I think your idea is brilliant. I tried it and it works very well except that I get an empty paragraph at the beginning of the main area, between the header and the main area, and another one at the end of the main area, between the main area and the footer. I think that these empty paragraphs are introduced by the function do_shortcode. Did you encounter this problem too and solved it? Do you know how it can be solved? I have tried many solutions so far, but nothing worked out as expected.
Thanks again
Hi Luca, I am sorry but I have not experienced this. If I can replicate it I will post an answer.
Great article as always 🙂
Thank you Geno ^^
Thanks Salah 🙂
Nice one as usual Geno! I’ve always wanted to be able to edit that 404 page easily.
Glad you like it. Makes it so much easier 🙂
Hey Geno – great idea, I’d love to use it, but it’s not working. Here is my 404 page:
get_header();
echo do_shortcode(‘[et_pb_section global_module("1389")][/et_pb_section]‘);
get_footer();
and my url:
http://www.tandemediting.com/chicago/yepp
are the shortcodes still available in Divi 3.0?
Thanks
Hi Dean. Not sure why it is not working for you. Do you have the php opening and closing tags? Is your cache cleared?
Thanks Geno. I do have the correct php tags. My comments here were getting rejected when I tried to paste them, I use them on each line as you have.. And cleared cache.
ET support said there is another required attribute for global_module(). Do you know what that is?
Thanks a lot,
Dean
got it! my syntax was wrong.
I had
global_module(“1373″)
instead of
global_module=”1371”
great tutorial. Thanks!
please man can you tel me how changed the title page into “404 Not Found” thanks
I simply used a text module there and hard coded it.
There is a wordpress function is_404() that I suppose you could use, but I have not found a way to mix php with the Divi builder
how can i change Title “Page Not found” in the navigator tab
I am not sure. I would have to do some research on that one.
Yes please geno and thanks a lot for that as you can see this web site is already changed into “404 not found “
🙁 doesn’t work for me at all.
Followed every step, here’s my shortcode:
php get_header(); ?>
php echo do shortcode(‘[et_pb_section global_module="26162"][/et_pb_section]‘);?>
php get_footer();
Also created new page and imported by new template. Nope.
Something missing.
Make sure you have the opening and closing php tags.
If you created a page, you can use this code (add “less than sign” in front of each line)
php get_header(); ?>
meta http-equiv=”refresh” content=”0;url=http://yourwebsite.com/pagename/”/>
php get_footer(); ?>
If you created a page, you can use this code (add “less than sign” in front of each line).
php get_header(); ?>
meta http-equiv=”refresh” content=”0;url=http://yourwebsite.com/pagename/”/>
php get_footer(); ?>
This basically redirects to any page you want. Just insert your URL. I usually call my page error – then the code would be
meta http-equiv=”refresh” content=”0;url=http://mywebsite.com/error/”/>
Works perfectly, thanks so much! I didn’t use Appearance > Editor, just typed it into the 404.php file.
Sweet. Thanks for the tip.
Great article! Thank you so much!
Works PERFECT for me!!! Divi could have made this simple solution standard.
Ahhhh!!!! Thank you SO much!!!
Hey, I had a question regarding the menus that you created, how did you get the border to show up on top of the Header Text? Sorry for such a silly and simple question, thanks for your help!
Nevermind, I figured it out :). For those of you that are as bad at working with CSS like me, add one of these options into the Widget CSS section in the Advanced tab of your widget (depending what side you would like your border on):
border-top:
border-bottom:
border-right:
border-left:
Followed by the number of pixels of the border (i.e. 3px). Immediately followed by “solid” and the hex number color “#000”. You can follow this by adding some padding to the border, for example, my green border code would be as followed:
border-top: 3px solid #68d800;
padding:5px;
Thanks for sharing your find 🙂
Unfortunately, this did not work for me. All I get is a blank page with my background pattern. I also tried what @smsgatormag mentioned and still no luck. Any help?
Hi Matt. I am sorry it did not work for you but it would have to take some digging around your website to figure out what exactly is causing your issue. It works on every site I have used it on. Have sure you have cleared all levels of cache.
Hey Geno, everything works fine when I insert the header and footer, but my idea is to make a beutiful full-height page.
In this case it’s not working..
Can you help me out please?
Great post btw 😛
Thanks Vini. Did you ever get this sorted?
Amazing, the easy way I find to do it
Yeah I kicked myself for not figuring that one out sooner 🙂
I’m in the same position man… Not sure what could be the issue? but I did notice in mine I can’t make a global layout… I can make global Sections, Modules etc but not a layout.
I ran into the extra empty paragraphs just now. Never noticed them before, but on this site, they were obvious. It seems it has something to do with shortcodes and wpautop.
I found this CSS stopped the empty paragraphs from showing on my 404 page:
.error404 p:empty {
display: none;
}
Hopes this helps someone else!
Sweet. Thanks!
Thanks so much for sharing this! Seeing a weird bug – whenever I copy and paste your code, I update the post number, however, it only pulls in one section (even though my layout has 4. No matter which ones I put, it only shows 1. Any ideas? Thanks!
Thanks for the great tip!
One good information here. I have looked for the opportunity to edit divi theme for page 404. Finally the answer is here. Haven’t seen this problem addressed with divi module, thanks for making this happen.
Hi Gino, thanks for the great tutorial. Wondering if you have a fix for the fixed navigation to work as when i add this in the fixed navigation appears but the colours are not the way its set throughout the whole site
Thanks in advance
hi, what if am not using divi child theme? am using normal divi theme what is the procedure? thanks
If you modify the core divi files, you changes will get replaced with each update. Its easy to create a child theme for your website. https://quiroz.co/5-easy-steps-to-creating-a-child-theme/
Thank you very much! You post is awesome and has helped me a lot!
Thank you very much for sharing this, it’s very helpful.
You are welcome Carmen. Thanks for taking the time to comment. It means a lot 🙂
Hi Mr Quiroz, you have no idea how popular you are in our household. You are a lifesaver! Such ‘small’ hints and tips… so educational, but even more inspirational. No idea why you do it so consistently, how you know all this stuff or where you find the time and energy, but please know it is so much appreciated. I dub thee King Divi. I am pretty sure our paths will once cross in the realm of the internet. Thanks again. Jason
Thanks Jason. That really means a lot 🙂
Thanks so much Geno, you da man!
You bet 🙂
Thanks for sharing, works great!
Hi Geno, is it with this technique possible to create a blank post-template (like a blank page-template) without header and side bar, so that I can insert a custom menu like here https://www.addit-communicatie.nl
Yes you can. Or you can also use the Divi page settings and set it to Blank. That removes the header, footer and sidebar.
Hi Geno,
Thank you so much for making this tutorial, it helps a lot 🙂
Is it possible to change the categories layout also if we add category.php?
Thank you,
Pradeep
Yes you can. Check out this tutorial https://quiroz.co/add-a-section-and-category-title-to-the-top-of-your-category-pages/
Great tip! I’m definitely implementing this for all my projects…This should really be a feature within Divi but this is super easy to implement even for non-coders (me).
Thank you 😀
Hey Geno. Thanks for the tip. I can’t seem to get this to work. Divi uses a lot of code in the 404.php file that is included. I copy that file to my child theme but no matter how I modify that code (even stripping it all out an replacing it with yours) it just gives me a generic browser generated error message that the page does not exist instead of a 404 page. Am I missing something?
Try making sure you have cleared all your cache. Always make sure you have cleared your browser cache, any plugin cache, and then your hosting cache.
Still works like a charm! Thank you!
Awesome. I love it when these tips still work after all the Divi updates. That’s why I love working with CSS 🙂
Hi Geno, thank you so much for this amazing tutorial and all your other tutorials. I have done the 404, category and search pages like this but my fixed header is not shrinking on scroll. It continues to stay normal height and I need it to shrink on scroll, like all non-custom pages. Is there a way to fix this in the php for (404 & category php pages)?
I saw another lady asked this in the comments a few months ago but there was no answer, so I’m at a loss as to what to do. Thank you
Hi Lindsey. Sounds like you are having some sort of CSS or plugin conflict. The fixed header works fine with this adjustment. Take a look at how it is working on the live “Category” page demo without any extra modifications. http://montereydev.com/demos/tophead001/category/camp-notes/
Really cool your Tutorials! 🙂 Now i have solved my issue with the author page too.
Thank you 😉
Best wishes
Sven
Awesome. Thanks for sharing. 🙂
Thanks Geno. Simple, easy to follow and quick.
And fun
Here’s one I’ve just done for a safety company
https://www.eaglesafetyandenvironment.co.uk/contact.php
Sweet. Thanks for sharing.
Hi just wondering why my header won’t show any background colour and I have that it changes logo on scroll but nothing is working, do I have to enter anything else for that to make it work for 404?
There must be something else conflicting. Have you tried disabling your plugins to see if any of them are causing the conflict?