Modify Not Found Error 404 Page On Genesis Framework

Last updated on June 6th, 2020 at 05:58 am

By default the 404 page on Genesis, can be confusing to a visitor. If you’ve been wanting to spruce up the page, follow along as I am going to show you how to easily modify not found error 404 page on the Genesis Framework.

What is a 404 Page?

This is the page on your website that people are redirected to and it is known as a 404 or Page Not Found error. People experience this on your site if they type in an incorrect link or if there is a broken link on your site.

TIP:Take a hard long look at your blog to see if people are being re-directed to your 404 page. It could be because of broken links or an issue with your permalinks.

Having broken links on your blog shows tells that you don’t maintain it the way you should. Search engines see it as an indicator of low quality. If you haven’t checked for broken links, then maybe it’s time you do.

Sometimes, it’s not your fault if people end up on the 404 page. They may have typed in an in-correct address. Regardless of how they get to your “page not found page.”

You should take the time to customize it. If you need some inspiration for yours, read this.

This Is My Custom 404 Page Before & After

I thought I would show you a before and after pic. We all see those weight loss pictures of before and after. The reason we see them is because they work, you’re like I can’t believe they lost all that weight.

Who doesn’t want to be able to lose weight without a hardcore exercise program?

While my goal isn’t to help you lose weight. I want you to realize how easy it can be to add an opt-in box to your 404 page.

I thought if I shared a side-by-side comparison to show you the difference, would help you determine if you want to customize yours. It’s still a little hard to tell the difference, that’s why I suggest that you have an idea of what your page looks like before you start.

My New 404 Page Customization Look

As you can see from the image above, my 404 page is now full width. Thanks to Sridhar Katakam for providing the code to help me do this.

As I mentioned before and will continue saying “I am NOT a PHP Developer.” However, with so many people sharing their code online, it helps us non-coders improve our sites.

I added my popular posts to my new page and if you look closely, you will see that I added an email opt-in form to my 404 page. As I mentioned before, my main goal with this blog is to get people to subscribe to my email list. In order to add an email opt-in form I used this plugin.

What’s the main goal of your blog?

So now that I’ve showed you my new customized 404 page, let me show you how I did this.

Let’s Get Started.

Modify Not Found Error 404 Page On Genesis Framework

I am NOT using a plugin for this purpose. I don’t like using plugins for simple tasks such as these. I’m usually able to do it myself if I can find the code online.

If you want to use a plugin for this purpose, then you can use this plugin. If you’re new to WordPress and plugins confuse you, read this. For this tutorial I am using the Genesis framework.

Step 1: Access Your Genesis Theme via FTP

You want to copy your 404.php file from your Genesis theme and put it in your child theme. Go to /wp-content/themes/genesis and copy your 404 page.

Do not delete it from your Genesis Framework. We are copying the file over to the child theme, because we never want to change any of the files from the Framework.

Step 2: Open up Your Child Theme 404 Page

Now that we have a copy of the 404 page, we can start playing. Don’t worry, if you mess up the file, you can always copy the original from the Genesis to your child theme, until you get your 404 page looking the way you want.

Open up your 404 page you just copied in your favorite text editor and add any code you would like. Here is the code I use on SusanVelez blog.

As I mentioned, I am NOT a PHP developer but I found some code online and edited it to suit my needs. Check this out if you need more information on editing your error page.

Step 3: Save Your Changes and Upload Your 404 Page

Once you’ve made all the changes you want, save your newly customized 404 page and upload it back into your child theme. Now refresh your page and take a look at your 404 page. You should see your newly customized 404 page.

The best part is you are now giving someone the opportunity to join your email list when they get the dreaded 404 page.

Final Take Away

Taking the time to modify your page will help people find the articles you want them to find, when they’re lost. If you want to get a little creative then you can add an email opt-in to help grow your email list.

Yes you can use the default 404 page on Genesis. However, if you’re not happy with it, you now have the information you need to change it.

If you’re just getting started with your blog, read this. If you’re a DIY blogger and want to learn more about WordPress, be sure to access my other tutorials.

Are you planning on customizing your 404 page? If so then put a link to your new 404 page so I can check it out below. I would love to see what you did to yours.