I love most things about the Genesis theme framework software. It’s the only flexible WordPress theme framework I enjoy working with for myself and for my clients.
When I install a brand new child theme to work with Genesis, there are a few things I like to do to customize the site I’m working with.
One of which is creating a custom 404 error page.
If you are using Genesis on your site too, and your child theme does NOT have it’s own 404-error page, in this post I’m going to show you how to create one personal to your website. It’s very simple.
Here’s what you’re going to need access to –
- Cpanel, to access the public_html file your WordPress site and theme is residing in.
- WordPress dashboard.
- Some custom PHP code which I’ll share with you shortly.
The first two items, you should naturally have access to.
OK, let’s begin.
Create a custom 404 page: Step one
First of all, you’ll need to access your website via the Cpanel.
If you’re not too sure where your Cpanel is, you can access it via your web host provider.
Once you’re logged in, you’ll need to navigate to access your File Manager folder 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. Then look for the name of your child theme folder.
Then look for the name of your child theme. For this tutorial, I’m going to use the Magazine Pro child theme as an example. See image below.
When you find the name of the child theme you want to add your custom 404-page in, 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.
Create a custom 404-error page: Step two
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 we’re going to name this file 404.php See images below.
Hit Create New File to save it. Then locate the new file in your child theme folder and navigate back to the header 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.
Create a custom 404 page: Step three
So at this stage, you should see a new tab open in your browser with the editor open.
It is in here 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.
Don’t hit save yet, there are a few obvious things you need to change in the above code.
First of all, replace the %s with your own homepage URL.
Secondly, you might want to change the text that says Search more than… with whatever message you’d like.
The next thing to do is to add the URL of the search results page in your WordPress website to the code.
So if you’re using a custom AdSense search box, for instance, you can add the URL of the results page where it says;
Don’t forget to also change the Partner Pub ID shown above in red. This ID is for your Google AdSense custom search, and you can find it in your Google AdSense account.
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 screen shot below.
OK so now you 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. See image below.
Create a custom 404-error page: Step four
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.
I hope you enjoyed reading this quick little tutorial, and I hope that it has worked for you and your Genesis site.
If you have any questions or get stuck, please don’t hesitate to get in touch with me here, I’ll try and assist you the best I can.
Best of luck.