1 / 25

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

WordPress tutorial to create a custom 404 not found page in Genesis Framework child theme. No matter which theme you are using. Just follow our step by step guide to creating a new custom 404 not found page in Genesis.<br>[ https://rainastudio.com/404-not-found-page-in-genesis/ ]

margiermann
Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. 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. ●How to Add TopBar in Genesis Framework ●How to Add an Audio Sound to Blog’s About Page By default, NOT FOUND page in Genesis Framework is something like the screenshot below.

  3. Custom 404 Not Found Page in Genesis Framework (RainaStudio Map 101) 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.

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

  5. 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… <?php /** * 404 NOT FOUND. * * @package StudioPlayer * @link https://rainastudio.com/themes/studioplayer * @author RainaStudio * @copyright Copyright © 2018 RainaStudio * @license GPL-2.0+ */

  6. 404 Not Found Page in Genesis Framework // Remove page title. remove_action( 'genesis_post_title', 'genesis_do_post_title' ); // Remove site header elements. remove_action( 'genesis_header', 'genesis_header_markup_open', 5 ); remove_action( 'genesis_header', 'genesis_do_header' ); remove_action( 'genesis_header', 'genesis_header_markup_close', 15 ); // Remove navigation. remove_theme_support( 'genesis-menus' ); // Force full width. add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' ); // Add 'not-found' class to body. function nf_site_inner_attr( $attributes ) {

  7. 404 Not Found Page in Genesis Framework $attributes['class'] .= ' not-found'; // Add the attributes from .entry, since this replaces the main entry $attributes = wp_parse_args( $attributes, genesis_attributes_entry( array() ) ); return $attributes; } add_filter( 'genesis_attr_body', 'nf_site_inner_attr' ); // Remove default loop. remove_action( 'genesis_loop', 'genesis_do_loop' ); // Add content to default loop.

  8. 404 Not Found Page in Genesis Framework /** * This function outputs a 404 "Not Found" error message. * * @since 1.6 */ function genesis_404() { genesis_markup( array( 'open' => '<article class="entry">', 'context' => 'entry-404', ) ); printf( '<h1 class="entry-title"><i class="fa fa-life-ring"></i> %s</h1>', apply_filters( 'genesis_404_entry_title', __( '404 Not Found!', 'genesis' ) ) ); echo '<div class="entry-content">'; ?>

  9. 404 Not Found Page in Genesis Framework <p>Server can't find your query at <?php echo $_SERVER["SERVER_NAME"]; ?>. In the meantime, you can...</p> <ul> <li>See what's happening at <?php echo get_bloginfo( 'name' ); ?> on <a href="<?php echo get_permalink( get_option( 'page_for_posts' ) ); ?>">our awesome blog.</a></li> <li>Read more about our project on <a href="https://rainastudio.com/service/">the service page.</a></li> <li>Sign up for newsletter and join the community!</li> </ul> <div class="not-found-widget"><?php if ( is_active_sidebar('not-found-widget')) { // 404 page widget area. genesis_widget_area( 'not-found-widget', array( 'before' => '<div class="not-found-widget widget-area clearfix"><div class="wrap">', 'after' => '</div></div>', ) ); } ?></div>

  10. 404 Not Found Page in Genesis Framework <?php echo '</div>'; genesis_markup( array( 'close' => '</article>', 'context' => 'entry-404', ) ); } add_action( 'genesis_loop', 'genesis_404' ); // Remove footer widgets. remove_theme_support( 'genesis-footer-widgets' ); // Remove site footer elements. remove_action( 'genesis_footer', 'genesis_footer_markup_open', 5 ); remove_action( 'genesis_footer', 'genesis_do_footer' ); remove_action( 'genesis_footer', 'genesis_footer_markup_close', 15 ); genesis();

  11. 404 Not Found Page in Genesis Framework Let’s see what those functions do. <?php /** * 404 NOT FOUND. * * @package StudioPlayer * @link https://rainastudio.com/themes/studioplayer * @author RainaStudio * @copyright Copyright © 2018 RainaStudio * @license GPL-2.0+ */ 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.

  12. 404 Not Found Page in Genesis Framework // Remove page title. ●remove_action( 'genesis_post_title', 'genesis_do_post_title' ); ● ●// Remove site header elements. ●remove_action( 'genesis_header', 'genesis_header_markup_open', 5 ); ●remove_action( 'genesis_header', 'genesis_do_header' ); ●remove_action( 'genesis_header', 'genesis_header_markup_close', 15 ); ● ●// Remove navigation. ●remove_theme_support( 'genesis-menus' ); ● ●// Force full width. ●add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );

  13. 404 Not Found Page in Genesis Framework 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.

  14. 404 Not Found Page in Genesis Framework // Add 'not-found' class to body. function nf_site_inner_attr( $attributes ) { $attributes['class'] .= ' not-found'; // Add the attributes from .entry, since this replaces the main entry $attributes = wp_parse_args( $attributes, genesis_attributes_entry( array() ) ); return $attributes; } add_filter( 'genesis_attr_body', 'nf_site_inner_attr' );

  15. 404 Not Found Page in Genesis Framework 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. // Remove default loop. remove_action( 'genesis_loop', 'genesis_do_loop' ); // Add content to default loop. /** * This function outputs a 404 "Not Found" error message. * * @since 1.6 */

  16. 404 Not Found Page in Genesis Framework function genesis_404() { ● ●genesis_markup( array( ●'open' => '<article class="entry">', ●'context' => 'entry-404', ●) ); ● ●printf( '<h1 class="entry-title"><i class="fa fa-life-ring"></i> %s</h1>', ●apply_filters( 'genesis_404_entry_title', __( '404 Not Found!', 'genesis' ) ) ); ●echo '<div class="entry-content">'; ?> ●Server can't find your query at <?php echo $_SERVER["SERVER_NAME"]; ?>. In the meantime, you can...

  17. 404 Not Found Page in Genesis Framework <ul> <li>See what's happening at <?php echo get_bloginfo( 'name' ); ?> on <a href="<?php echo get_permalink( get_option( 'page_for_posts' ) ); ?>">our awesome blog.</a></li> <li>Read more about our project on <a href="https://rainastudio.com/service/">the service page.</a></li> <li>Sign up for newsletter and join the community!</li> </ul> <div class="not-found-widget"> <?php if ( is_active_sidebar('not-found-widget')) { // 404 page widget area. genesis_widget_area( 'not-found-widget', array( 'before' => '<div class="not-found-widget widget-area clearfix"><div class="wrap">', 'after' => '</div></div>', ) ); } ?></div>

  18. 404 Not Found Page in Genesis Framework <?php ●echo '</div>'; ●genesis_markup( array( ●'close' => '</article>', ●'context' => 'entry-404', ●) ); ● ●} ●add_action( 'genesis_loop', 'genesis_404' );

  19. 404 Not Found Page in Genesis Framework 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.

  20. 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. <?php // Do NOT include the PHP opening tag. // Register not-found-widget genesis_register_sidebar( array( 'id' => 'not-found-widget', 'name' => __( '404 Page Widget', 'studio_player' ), 'description' => __( 'This is the widget area for 404 NOT FOUND page. It uses to add sign up form.', 'studio_player' ), ));

  21. Register Custom Widget for 404 Not Found Page in Genesis You’ll see a widget area at ? Do NOT include the PHP opening tag. Dashboard > Appearance > Widgets. 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.

  22. Register Custom Widget for 404 Not Found Page in Genesis /* # 404 NOT FOUND page ---------------------------------------------------------------------------------------------------- */ .not-found .content, .not-found .content .entry { background: transparent; border-color: transparent; } .not-found .content { margin: 7% auto 0; } .not-found .content .entry-title { font-size: 55px; font-weight: 100; margin-bottom: 30px; }

  23. Register Custom Widget for 404 Not Found Page in Genesis @media only screen and ( max-width: 700px ) and ( min-width: 320px ) { .not-found .enews-widget input { max-width: 100%; width: 100% !important; margin: 5px 0 !important; } }

  24. Register Custom Widget for 404 Not Found Page in Genesis Finally, we have done, and here is the outcome of our 404 not found page in Genesis.

  25. Conclusion 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.

More Related