Build a custom 404 / page not found template

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

 

Stephen James

SJ is a web developer living in the coastal town of Southsea, England. He is a Divi and WordPress advocate and the founder of Divi Space.