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 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 designed one for RainaStudio, inspired by HubSpot and Google Chrome’s server not found. Here is my design, download PSD file.

404 Page

404 Not Found Page in Genesis Framework

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

Let’s see what those functions actually 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 body element and this is only for 404 not found page. It will help us when we do some CSS.

Above code is the main snippet for the look of our design. This hook remove_action( 'genesis_loop', 'genesis_do_loop' ); function 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 title and a FontAwesome icon HTML markup as 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 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 subscriptions box here. You can add Genesis eNews Extended if you got it already installed. Save the widget and visit 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

Conclusion

We have learned to create a custom 404 not found page template for 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.

>