Build a custom 404 / page not found template

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:

  1. 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.
  2. 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.
  3. 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.

  1. Create a new page. Make sure it’s a page and not a post.
  2. Add any content you want to appear on your 404 page. Use the page builder if you like 🙂
  3. 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.

custom 404 2
  • Google+
  • Facebook
  • Twitter

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.

custom 404 3
  • Google+
  • Facebook
  • Twitter

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 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 🙂

 

Previous post
Next post

59 Comments

  1. Dan

    This sounds brilliant!! So the page can remain as a draft?

    Reply
    • Stephen

      Correct 🙂 As we’re no longer using the post in it’s natural habitat, whether it’s published or not doesn’t matter.

  2. Sally

    Wow! I’ve been looking for a way to do this for ages!!!

    Thank you, SJ!!

    Reply
    • Stephen

      You are most welcome 🙂

  3. Stephen

    All sorted now Izzy? 🙂

    Reply
  4. pablo

    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.

    Reply
    • Stephen

      Actually Pablo, none of the CSS from the tut is visible on your page. Where did you add it?

    • Marcia

      Same problem for me… did you solve it

    • Stephen

      Awesome 🙂 Great place for a contact form 🙂

  5. Patrick

    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.

    Reply
    • Stephen

      You may want to consider using the page builder everywhere plugin to recreate headers on static pages too.

    • Ed

      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;
      }

    • Mansoor

      Hey, How did you fix it? Experiencing the same tiny space above the main header.

  6. Claes Engelin

    Thanks SJ!

    That was a great help. Especially after I read the final part of the article and fixed the styling :-}

    Reply
  7. Marc

    Hi! Thank you for the great tutorial!
    Here is my error page http://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!

    Reply
  8. John Anderson

    Hi SJ,

    It worked a treat.

    Thanks,

    John.

    Reply
  9. Leslie

    Worked perfectly, thanks! 😀

    Reply
  10. Wayne

    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.

    Reply
  11. Séverine

    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

    Reply
  12. Frode

    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?
    https://wayout.no/hloska

    Reply
  13. ben

    have you tried this on extra? i could not get it work.

    Reply
  14. Leha Carpenter

    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;
    }

    Reply
    • Eugene

      Wow – this one works!!!
      Thank, dude!

  15. Zbysiu

    Hi SJ,
    I still get the sidebar. I’m using WP 4.5.2 and the latest version of Divi.
    Thanks, Zbysiu

    Reply
  16. helene

    I customized 404 page successfully! Thank you for your article. 🙂

    Reply
  17. Avi

    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

    Reply
  18. Avi

    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.
    if you want to see the result visit the following link http://goo.gl/BviFsC

    Reply
  19. Rachael

    I can’t see where you set the page body class to error404 …? Can you elaborate on that?

    Reply
  20. Mathilde

    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!

    Reply
  21. Jaime Buckley

    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

    Reply
    • Jaime Buckley

      …and by the way SJ, I have 12 kids =)

    • Sarah

      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.

  22. Ed

    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?

    Reply
  23. OliGo11

    Great tut, thanks a lot!

    Reply
  24. Kevin

    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?

    Reply
    • Stephen

      Hey, there’s no reason it shouldn’t work with latest wp

  25. Mark

    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!

    Reply
  26. Dozza

    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.

    Reply
  27. Jim

    Hi,
    This is very informative. I have been looking for this info for quite a while.
    Thanks for sharing this.

    Reply
  28. Lee A

    Excatly what I was looking for, Thanks for this.

    Reply
  29. Alice

    This is a brilliant tutorial… thank you so much for sharing your expertise.

    Reply
    • David Blackmon

      Thanks Alice!

  30. Sylvester

    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.

    https://www.hlbenefits.com/404

    Reply
  31. Lukasz

    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?

    screenshot: https://ibb.co/ekxKSG

    Reply
    • Lukasz

      I meant *written content of the page, not post

  32. Marcia

    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 : https://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;
    }

    Reply
    • Cory Jenkins

      Hi Marcia, you can place this code in your theme options custom css box if you don’t have a child theme installed.

  33. Lee A

    This is the way to do it!

    Cheers,

    Reply
  34. Jared

    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;
    }

    Reply
  35. Eli

    So thankful for this tutorial, it’s easy and awesome. Thank you so much.

    Reply
  36. Alain

    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.

    Reply
    • mohamad

      PSDVN can you help me how create you 404 page from Cpanel

Submit a Comment

Your email address will not be published. Required fields are marked *


Receive notifications about our new blog posts.


Don’t leave before entering to win an iPad Pro! It’s Free!

You may be too early for our Black Friday specials, but you can still enter our competition! Leave your details below and you could win an iPad Pro!

Great you've entered our giveaway! Only one step remaining! Please check your email and confirm it.