In this quick tutorial, I'll show you how you can create a custom 404-error page-not-found for your WordPress website using the Genesis Theme Framework.
You may or may not know that I'm a HUGE fan of the Genesis theme framework for WordPress. And over the last decade, for the most part, I have enjoyed using Genesis to build out custom blogs and websites.
Even though the technology is now so diverse when it comes to WordPress, I still get a thrill each time I install a brand new Genesis child theme and get to customize it the way I want.
However, there is one feature that often seems to be missing on some of the child themes, and that is the ability to add a custom 404 error page.
If you are using Genesis on your site right now, and your child theme does NOT have a dedicated 404-error page, I feel your frustration.
But, you need not stress yourself out, 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 a very simple process to do. And no, you don't have to be a coding expert to do this.
Here's what you're going to need access to -
I'll explain how you can access the first two in the tutorial below.
Right, let's get started.
To start with, you'll need to access your WordPress website via the Cpanel.
If you're not too sure where your Cpanel is located, 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.
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 > Genesis > Theme Folder. 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 the 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 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.
Of course, we don't want to customize the parent theme's 404-error page because when a new update comes out, this will just get over-ridden.
Right then, in the next step, we'll create a 404 file.
Start by creating 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. One-click to highlight it then navigate back to the top toolbar to find Edit. See the image below.
When you click on Edit, a pop-up box will appear like the one below for the text-editor.
The message, if you see one, 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.
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 you are going to paste your new custom 404-error page PHP code snippet.
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&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 are all highlighted in red. Here's the list -
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.
So, if I go to my own blog and add some random text onto the end of the primary URL to generate a 404 error, I can see that the custom 404-page and message I created for my blog is now working as it should. See the image below.
You should be seeing something similar to this.
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.
That's it, you're all set to go. I hope you enjoyed reading this quick little tutorial, and I hope that this has worked for your Genesis powered website or blog.
Best of luck.
