Custom 404 Not Found Page in Genesis Framework

Custom 404 Not Found Page in Genesis Framework (RainaStudio Map 101)

A couple of websites I have done recently are using WordPress and Genesis Framework. For archive and 404 not found pages, I have built custom templates. Today in this post, I am going to show you how you will create a custom 404 template for not found page.

This article is a child post of the RainaStudio Map 101 blog series. You can check out the previous posts of this series.

By default, NOT FOUND page in Genesis Framework is something like the screenshot below.

Custom 404 Not Found Page in Genesis 1

Here are 24 brilliantly designed 404 not found page examples on HubSpot. I have created one for RainaStudio, inspired by HubSpot and Google Chrome’s server not found. Here is my design; download the PSD file.

404 Page

404 Not Found Page in Genesis Framework

Genesis output a lot of markup for the 404 templates. We don’t need all of them. So, here is the template, your one might look like similar…

Let’s see what those functions do.

When we create a PHP file for any Genesis child theme, we should start with this. So we follow the best practice guide from the beginning of 404.php file.

Using those pieces of action and filter hooks we have removed .entry-title, .site-header, .nav-primary, and .nav-secondary. This filter add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' ); function returns .content full width.

Using the above code, we add not-found class to the element, and this is only for 404 not found page. It will help us when we do some CSS.

The above code is the main snippet for the look of our design. This hook function remove_action( 'genesis_loop', 'genesis_do_loop' ); removes the default loop of Genesis. Next, we have opened the article element, included text, and a 404-not-found widget area into the markup.

The first remove_action function returns the title and a FontAwesome icon HTML markup as the entry title of the content. Next, we have added text and URL. You can edit them as needed.

After finishing your modification, upload the file to your wp-content/themes/child-theme directory.

Register Custom Widget for 404 Not Found Page in Genesis

Add the snippet below into the functions.php file of your child theme. This snippet will register a widget area for the not found page. And this widget uses for newsletter sign-up form.

Do NOT include the PHP opening tag. 🙂 You’ll see a widget area at Dashboard > Appearance > Widgets. 

404 Page Widget

I have added the Jetpack subscription box here. You could add Genesis eNews Extended if you got it already installed. Save the widget and visit the 404 page.

Add below CSS code to your stylesheet.css file of the child theme.

Finally, we have done, and here is the outcome of our 404 not found page in Genesis.

404 Not Found Page of RainaStudio


We have learned to create a custom 404 not found page template for the Genesis Framework. Got an error! While updating/creating/modifying your file, no problem, contact me via email or leaving your feedback through the form below. I will be in touch within hours.

Editorial Staff

Editorial Staff is an in-house team of native WordPress developer and industry columnists.