If you know enough about PHP then replacing your 404 / Page Not Found template is fairly easy. But what if you don’t? Wouldn’t it be great if you could just build a normal page using the page builder you know and love and use that as the template instead?
That’s what I did when replacing the ‘no-results.php’ template for Divi Space. You can see it here, and here’s how you can do the exact same thing…
Setting up the template
By default, the no-results.php looks like this:
<div class="entry">
<!--If no results are found-->
<h1><?php esc_html_e('No Results Found','Divi'); ?></h1>
<p><?php esc_html_e('The page you requested could not be found. Try refining your search, or use the navigation above to locate the post.','Divi'); ?></p>
</div>
<!--End if no results are found-->
What we’re going to do is replace the text that’s being called with a bit of php that will load a page instead. Here’s what you need to do:
- In your child theme, create a folder called ‘includes’ at the root level (the same place as your functions.php). If you’re already using a child theme that has an ‘includes’ folder in it, then ignore this step.
- Inside that folder, either copy the no-results.php template from your parent Divi theme (you’ll find it in the ‘includes’ folder), or create a new file called no-results.php.
- Open your new ‘no-results.php’ file and if it isn’t already blank, delete everything in it.
Now that you have a blank canvas, add this code:
<div class="entry">
<!--If no results are found-->
<?php $id = ###; $p = get_page($id); echo apply_filters('the_content', $p->post_content); ?>
</div>
<!--End if no results are found-->
If you’re worried that you may get the steps above wrong, just unpack this custom-404 zip at the root of your child theme instead. I’ve already taken care of the code for you.
Adding the content
You’ve now replaced the standard template with your own that has the ability to call a page, by its ID into the content. Super! The next step is to create your new page.
- Create a new page. Make sure it’s a page and not a post.
- Add any content you want to appear on your 404 page. Use the page builder if you like 🙂
- Save the post as a draft and grab the page ID.
The page ID
To get your page ID just hover over the ‘edit’ button next to the ‘publish immediately’ option in the publish section.
In the bottom left corner you’ll see post = ### . That number is your page ID.
Make sure you’ve saved the post. Copy that number and go to Appearance > Editor in your admin menu. Look for the file that says no-results.php and click on it to edit.
In your version you have to replace the ### with whatever page ID you just copied.
Now your 404 template will call that page and display it instead 🙂
The last piece of the puzzle
The only thing left to do is add some CSS to remove all of the padding and margins from the default 404 to ensure that the page fills all of the space available. Here’s the CSS you need to add to you child’s style sheet:
.error404 #main-content .container, .error404 #content-area, .error404 #left-area {
padding: 0 !important;
margin: 0 ;
width: 100% !important;
max-width: none;
}
.error404 #sidebar {
display: none;
}
.error404 .et_pb_post:last-child {
margin-bottom: 0;
}
and for no result page:
.search-no-results #main-content .container, .search-no-results #content-area, .search-no-results #left-area {
padding: 0 !important;
margin: 0 ;
width: 100% !important;
max-width: none;
}
.search-no-results #sidebar {
display: none;
}
.search-no-results .et_pb_post:last-child {
margin-bottom: 0;
}
And that’s how you use a page as a 404 / no results template. If you use this tut then please let me know in the comments. I look forward to checking out your custom 404’s 🙂
This sounds brilliant!! So the page can remain as a draft?
Correct 🙂 As we’re no longer using the post in it’s natural habitat, whether it’s published or not doesn’t matter.
Wow! I’ve been looking for a way to do this for ages!!!
Thank you, SJ!!
You are most welcome 🙂
All sorted now Izzy? 🙂
Hello, SJ. I know there is something I’ve done wrong but I can’t pinpoint what. Even after placing the CSS code, my site keeps displaying the sidebar… Will you give me a hand?
My site is bikerdreams.net. Thank you in advance for your help.
Actually Pablo, none of the CSS from the tut is visible on your page. Where did you add it?
Same problem for me… did you solve it
Is it possible to use this same idea for single.php pages? I like to use completely custom divi pages using the blank page template but then my default WordPress pages like the 404.php and the single.php still use the divi default template.
You may want to consider using the page builder everywhere plugin to recreate headers on static pages too.
Patrick,
Since I wasn’t using the default headers or footer (on any posts/pages), I just added this to the CSS and it works for what I need.
#top-header, #main-header, #main-footer {
display: none !important;
}
Hello,
thank you so much sharing this most east way. Here is my new shiny 404 page. bbck.sk/404-2/?lang=en
Awesome 🙂 Great place for a contact form 🙂
Awesome!
this is mine: salmonproject.wpengine.com/not-a-link.html
but there’s some extra white space at the very top (you can see the sidebar line). must be some css I still need to adjust?
Hey, How did you fix it? Experiencing the same tiny space above the main header.
Thanks SJ!
That was a great help. Especially after I read the final part of the article and fixed the styling :-}
Hi! Thank you for the great tutorial!
Here is my error page marcprobst.com/blog2016/ukfzuf
But the CSS doesn’t seem to work. You can still the small sidebar line at the bottom and also there is a wide gap at the top. Any idea how to fix this?
Thank you!
Hi SJ,
It worked a treat.
Thanks,
John.
Worked perfectly, thanks! 😀
Worked like a charm! Thanks, mate!
Here it is for now, til I go live: vivatestsite.com/DestWest/crazy404page
SJ, I used this today to build a new 404 page, worked perfectly. However, right after I upgraded to WP 4.5 and now my footer is compressed left almost as though the sidebar is still there. To compound the issue if you go to the new 404-page evolt.us/404-page it looks fine. However, if you go to evolt.us/home2 (which doesn’t exist) this is where you see the compression of the footer. Any thoughts or suggestions would be appreciated.
Hello, Thanks a lot for the tuto. It worked great. But since I upgraded to WP 4.5, I have the same problem as Wayne (footer compressed). Do you have a suggestion ? Thanks.
Séverine
Hi SJ!
Great tut, but my 404 gets a sidebar. I used a teplate with fullwidth and placed the css in the child theme style.css, what is not correct?
wayout.no/hloska
have you tried this on extra? i could not get it work.
I have created a 404 page. My idea is a blank page (without menu and footer) this is the page: gestiondeactuantes.es/404-2/
But when I try to access unknown page as this for example gestiondeactuantes.es/ljrltjwrt
the menu and footer appear.
How Can I remove them?
Thank you
Hi, all: Thank you, Stephen for the excellent customization!
For those having trouble getting rid of the outer page stuff, I used a combination of Stephen’s code and CSS, and some more CSS that was posted here by Ed. If you target Ed’s CSS to just the 404 page the same way Stephen did, it will preserve the rest of the site. Here’s the CSS I used:
/* Remove Divi 404 Page Stuff */
.error404 #main-content .container, .error404 #content-area, .error404 #left-area {
padding: 0 !important;
margin: 0 ;
width: 100% !important;
max-width: none;
}
.error404 #sidebar {
display: none !important;
}
.error404 .et_pb_post:last-child {
margin-bottom: 0;
}
.error404 #top-header, .error404 #main-header, .error404 #main-footer {
display: none !important;
}
Wow – this one works!!!
Thank, dude!
Hi SJ,
I still get the sidebar. I’m using WP 4.5.2 and the latest version of Divi.
Thanks, Zbysiu
I customized 404 page successfully! Thank you for your article. 🙂
great post. It works for 404.
What if I want to add unique pages for 401, 403, 500 (with different content relates to the error#)?
Out of creating the pages what should be changed in the no-result.php and in the style.css ?
thanks for your help
hello
on WP 4.5.3 with Divi 2.7.8 and css is in Divi-child.
I have a similar issue as reported above.
While viewing the “Preview Changes” of my custom error-404 page, it is OK, but viewing it live (going to non existing page)I get the custom error-404 page with additional content of a post menu and vertical line. This page name seems to be “404 Not Found” which is not my custom error-404 page.
I have tried both Stephen’s and Leha’s codes and got the same.
Will appreciate any help.
I can’t see where you set the page body class to error404 …? Can you elaborate on that?
Hi Stephen,
Thanks so much for this great tutorial! It works perfectly except for the sidebar space (that still seems to be there). I wish my content was centered, just like on your awesome 404 page.
I’ve also tried creating and editing a 404.php file in my child theme but still not working.
Any idea what could be wrong?
Thanks!
Oops, I’ve forgot to put the link to my 404 page:
http://www.ketchose.com/404
This tutorial is awesome, but NOT being a programmer–I’m a bit discouraged.
When I tested the preview of the page, it all looks fine…but then I tried using it and the results page creates 3 columns no matter what I do.
Anyone know why that might be??
I built the page with Divi’s page builder and this 404 page is one of the last things left to go live in 2 weeks.
Help?
I’m using WordPress 4.6 and the latest version of Divi.
Thank you much!
Jaime Buckley
Fantasy Author/Cartoonist
…and by the way SJ, I have 12 kids =)
Hey Jaime, How did you get the results page displaying with three columns fixed to show just your page layout as is? I’m having the same problem using the tutorial above.
I updated the post with CSS code for no results page. Let me know if it works for you!
I’ve tried this with the latest WP and the latest Divi 3…the content from the page I created doesn’t show up on the 404 page at all. Any thoughts?
Great tut, thanks a lot!
Clearly other people have gotten this to work, but I can’t get any custom page content to load. I applied the styles above and know I’m calling the correct page ID, but the value of $p is nothing, so the resulting page is effectively blank. get_page() is deprecated, so I tried using get_post() instead with no change. Does this customization still work for WP 4.6.1 / Divi 3.0.8? Any ideas what might be going wrong?
Hey, there’s no reason it shouldn’t work with latest wp
SJ, thanks so much for the post! This is the easiest custom 404 tut I’ve seen. Saved it to my evernote and shared it on facebook. Also, love listening to you on divi chat. I’m a 7 year teacher turned divi web developer and learning as I go. Thanks for giving me another tool in my toolbox. Cheers!
OK, maybe mention that you don’t need to copy the 404.php template from parent theme that ships with current Divi theme! Nice tut.
Hi,
This is very informative. I have been looking for this info for quite a while.
Thanks for sharing this.
Excatly what I was looking for, Thanks for this.
This is a brilliant tutorial… thank you so much for sharing your expertise.
Thanks Alice!
I have tried to apply this tutorial to an Extra theme that’s similar to Divi’s but there are some fundamental differences that won’t allow me to do that. The main is that I couldn’t find the no-results.php file and only adding a 404.php file into my child theme folder would do the trick but not entirely, meaning that I’ve ended up with a page that doesn’t look like what I’ve been expecting. I like the idea of creating the 404 just by adding a page on my website but not sure to achieve that for my Extra theme.
hlbenefits.com/404
Hi, I finally got this to work when I uploaded this file as 404.php instead of no-name.php however it’s not pulling any styling, just the written content of the post. Any idea why and how can I fix this?
I meant *written content of the page, not post
I don’t know where to put the following code … I used DIVI theme to create my page. The right column is still there (example : modeles.mawebsolution.ca/eee
/////////////////////
.error404 #main-content .container, .error404 #content-area, .error404 #left-area {
padding: 0 !important;
margin: 0 ;
width: 100% !important;
max-width: none;
}
.error404 #sidebar {
display: none;
}
.error404 .et_pb_post:last-child {
margin-bottom: 0;
}
Hi Marcia, you can place this code in your theme options custom css box if you don’t have a child theme installed.
This is the way to do it!
Cheers,
I was also having trouble getting it to appear without the sidebar, as a number of people have mentioned. I was able to fix the issue by placing the code in the custom CSS box in my Divi theme options menu rather than in my child-theme’s stylesheet.
And for some reason I kept getting a small margin at the top of my content, just under my nav bar. I had to give the content area a negative margin-top value to fix that. Your mileage may vary…
Here’s the modified code I used if anyone is interested.
.error404 #main-content .container, .error404 #content-area, .error404 #left-area {
padding: 0 !important;
margin-top: -15px !important;
width: 100% !important;
max-width: none;
}
.error404 #sidebar {
display: none !important;
}
.error404 .et_pb_post:last-child {
margin-bottom: 0;
}
So thankful for this tutorial, it’s easy and awesome. Thank you so much.
Same here. Styling did not work when included in the child’s style.css. Like other “recent” commenters, it worked right away when dropped in the Divi Theme Options –> Custom CSS box.
Something must have been updated in Divi that broke the original method outlined here.
Aahh.. Finally found how to make 404 page. 🙂
This is my 404: /psdvn.com/error-404/
Thank you for this tutorial.
PSDVN can you help me how create you 404 page from Cpanel
Thanks for posting this. Unfortunately did not work for me, though this one did: worthitmedia.co.uk/easy-custom-404-page-using-divi-builder/. Thought perhaps a caching issue. Was never able to figure it out.
404 is here: goatcloud.com/jlkj/
Can this method be used to have a general 404 page and a custom 404 page to be shown under a specific path such as downloads (i.e. domain.com/downloads/filenotavailable.pdf )) ?
I am not sure if my first comment came through. I did everything from tut and comments and still having issue where ALL styling is showing up with sidebar and all. Please help!!
Hi I am having issues with the header changes from transparent to colour and different logo on scroll for 404 should I have used this but doesn’t make any difference to the 404 page: sitescreated.com.au/website-servicews/
#logo2, .error404#logo {
display: none;
}
.et-fixed-header #logo, .error404.et-fixed-header #logo {
display:none;
}
.et-fixed-header #logo2, .error404.et-fixed-header #logo2 {
display:inline;
float: none;
max-height: 54%;
margin-bottom: 0;
vertical-align: middle;
}
Looks like the new CSS to get rid of styling only works on a 404 page, not the no results from search page. Anyone figure out how to get it to work there as well?
Hi Nina, I updated the post with CSS code for no results page. Let me know if it works for you!
Just followed the instructions and everything worked peachy! Thanks for that. One of the best essential guides on the web for WordPress/Divi.
Simple and it worked!
Thank you Stephen!
I’ve also used Teresas code to get rid of the header and footer. See my example here: nataschabuck.com/404
I’d like to adapt this concept to the password protection page (where the user is asked to enter a pw). How could that be done?
1.No-Result-Page works after menu-bar search was used.
2.I integrated a divi search module within the no-result-page.
3. I searched within the “no-result” page something without results
4. Instead of showing again the no-result-page in fullwidth, the “no-result” pages shows up only as a result, with sidebar, like a usual finding of a post.
Can someone help in this issue?
I got the same issue bro, hope they have the solution…
I updated the post with CSS code for no results page. Let me know if it works for you!
Hi Stephen,
i added the no-result.php inside the includes folder of my child theme, and changed the ID for the draft page. However, it is not showing anything , as yo can see taging1.viajarlocuratodo.com/sara
Thanks for the tutorial and your help!
Hi,
This works very good for the 404 page, but not for the no results page after searching. Anyone got the solution???
I updated the post with CSS code for no results page. Let me know if it works for you!
Thank you Stephan! Worked perfectly.
Tip that may help others, the css code needed to be in the Divi Theme Options and not in my child theme style.css file.
Hi Diana, probably you have been putting css in the wrong place or in the wrong way 🙂 It’s always better to put custom css in a child theme! Let me know if you need any help and figure it out what was wrong.