How To Create A Custom 404 Page For Your Genesis Child Theme

In this quick tutorial, I'll show you how you can create a custom 404-error page not found for your Genesis theme powered WordPress website.

You may or may not know that I'm a HUGE Genesis theme framework fan. And, for the most part, I love using Genesis to build websites both for myself and for my clients.

Each time I install a brand new Genesis child theme, I set about working on customizing it straight away. However, one feature that I have noticed that's missing on some of the child themes is a custom 404 error page.

If you are using Genesis on your site too, and your child theme does NOT have its own 404-error page, I feel your frustration.

But, you need not panic anymore, because in this post I'm going to show you how to create a custom 404 error page for your theme/website, complete with custom Google AdSense search box.

Don't worry, this is very simple to do, and you don't have to be a code geek to do this, although using some PHP code is required.

Here's what you're going to need access to -

  1. Cpanel, to access the public_html file your WordPress site and theme is stored in.
  2. WordPress dashboard.
  3. Some custom PHP code which I'll share with you below shortly.

I'll explain how you can access the first two in the tutorial below.

Right, let's get started.

Step one: Access the theme file in File Manager

To start with, you'll first need to access your website via the Cpanel.

If you're not too sure where your Cpanel is, you can usually access it via your web host provider.

Once you're logged in, you'll need to navigate to access your File Manager folder which is located under Files in your Cpanel. See image below.

How To Create A Custom 404 Page For Your Genesis Child Theme

Once you're in, you'll need to look on the left-hand side of the File Manager page to find: public_html > wp-content > themes. Then look for the name of your child theme folder.

For the sake of this tutorial, I'm going to use the Magazine Pro Genesis child theme. See image below.

When you find the name of the child theme you want to add your custom 404-page to, simply click on it to open it and to view all of the files within this child theme folder.

As you can see from the image below, inside the Magazine Pro child theme there isn't a 404-page template in sight, so the child theme is simply pulling the 404-page template from the Genesis parent theme.

In the next step, we'll create a 404 file.

Step two: Create a custom 404-error page

OK, so the next thing you need to do is create a new file inside your theme's folder, this is very simple to do.

Navigate to the top of the page, on the left-hand side you'll see an icon that says New File. Click on it to create one.

Now name this file 404.php See images below.

Hit Create New File to save it, then locate the new file you just created inside your child theme folder, single click on it to highlight it then navigate back to the top toolbar to find Edit. See image below.

When you click on Edit, a pop-up box will appear like the one below for the text-editor.

This is just to advise you to backup the original file before making changes to it. Since the file is going to be empty at this stage, just go ahead and click on Edit. Don't change anything else.

Step three: Add the code to your 404-file

So at this stage, you should see a new tab open up in your browser with the editor also open. The page will be empty.

It is in this empty area that we are going to paste our new custom 404-error page PHP code.

Now carefully copy the code below and paste it into the open file.

<?php

remove_action('genesis_loop', 'genesis_do_loop');
add_action('genesis_loop', 'genesis_404');

function genesis_404()
{
echo genesis_html5() ? '<article class="entry">' : '<div class="post hentry">';
printf('<h1 class="entry-title">%s</h1>', apply_filters('genesis_404_entry_title', __('Not found, error 404', 'genesis')));
echo '<div class="entry-content">';
echo apply_filters('genesis_404_entry_content', '<p>' . sprintf(__('The page you are looking for no longer exists. Perhaps you can return back to the site\'s <a href="http://www.yourwebsite.com">homepage</a> and see if you can find what you are looking for. Or, you can try finding it by using the search form below.', 'genesis') , trailingslashit(home_url())) . '</p>');
?>

<h4><?php
_e('Search more than 150 articles:', 'genesis'); ?></h4>

<form action="http://www.yourwebsite.com/search/" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="partner-pub-000" />
<input type="hidden" name="cof" value="FORID:10" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="55" />
<input type="submit" name="sa" value="Search" />
</div>
</form>

<script type="text/javascript" src="https://www.google.com/coop/cse/brand?form=cse-search-box&amp;lang=en"></script>

<div class="archive-page">
<br />
<h4><?php
_e('OR - You might like reading these recent posts:', 'genesis'); ?></h4>
<ul>
<?php
wp_get_archives('type=postbypost&limit=10'); ?>
</ul>

</div><!-- end .archive-page-->
<?php
}

genesis();

Don’t hit save yet, there are a few other things you need to change in the above code. These things are highlighted in red.

  1. Replace the primary URL with your website's URL.
  2. Replace the number of articles with however amount of articles and pages you have on your website or blog.
  3. Add the URL of the search results page in your WordPress website.
  4. Replace the partner-pub ID with your own.

Once you’ve made all the changes needed to the PHP code in your new 404-page file, simply click on the Save button to save it. See screenshot below.

OK, so now you will need to check to see what you've actually done has worked for your site.

If I go to my own website and add some random text on the end of the URL to generate a 404 error, I can see that the custom 404-page and message I created for my site is now working as it should. See image below.

You should be seeing something similar.

Step four: Access your custom 404-error page via WP dashboard

If you head back into your WordPress dashboard for your website or blog, then click on Appearance > Editor, you should see a new file called 404 Template for your child theme. See image below for example.

In the future, you can make changes to your 404-template for your child theme here, instead of going via the Cpanel.

You're all set to go. I hope you enjoyed reading this quick little tutorial, and I hope that this has worked for you and your Genesis website or blog.

If you have any questions or get stuck with anything, please don't hesitate to get in touch with me via this page, I'll try and assist you the best I can.

Best of luck.

Enjoyed reading this post?

Hey! Thanks a bunch for reading this post, I hope it was of value to you. I publish new posts every week, so be sure to check back soon, or hit the button below to subscribe.
subscribe to updates
Read Commenting Policy
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
Share via
Copy link