Customize Error 404 Page in Genesis

This tutorial provides the different ways to customize Error 404 Page for Genesis users in WordPress. You can use a Plugin or can create a simple 404.php file.

Here are some of the ways to create and customize an Error 404 Page in Genesis Framework.

Using Plugin

You can use Genesis 404 Page plugin by Bill. It offers a Simple Editor to Put and Customize the Error Page.

Using Template

We can create a 404.php template under child-theme and use a custom loop. Open child-theme/404.php(create) and add the following:

<?php
/**
 * Genesis Sample.
 *
 * This file adds Single Post template to the Genesis Sample Theme.
 *
 * @package Genesis Sample
 * @author  Aryan Raj
 * @license GPL-2.0-or-later
 * @link    https://www.aryanraj.com/
 */


// If this file is called directly, abort.
if ( ! defined( 'WPINC' ) ) {
	die;
}

// Forces full width content layout.
add_filter( 'genesis_site_layout', '__genesis_return_full_width_content' );

// Remove default loop.
remove_action( 'genesis_loop', 'genesis_do_loop' );

// Add custom loop
add_action( 'genesis_loop', 'my_custom_loop' );
/**
 * Display post content.
 *
 * @since  1.0.0
 *
 * @return void
 */
function my_custom_loop() {

	echo '<div class="error-content"> <div class="error-wrap">';
	echo '<h1 class="error" itemprop="headline">Oops!</h1>';
	echo '<h2 class="suberror">404 – Page Not Found</h2>';
	echo '<img src="/" />'; // use an image
	echo '<div class="entry-content"><p>The page you are looking for no longer exists. Perhaps you can return back to the site’s <a href="/">homepage</a> and see if you can find what you are looking for.</p></div>';
	echo '</div></div>';
}

// Run Genesis.
genesis();

We can change the output of default content without removing the default loop. You can also create a widget area in above template under custom loop instead of output custom html.

Here is the reference from old way.

Customized Template

STEP 1

Create a 404 widget area in /child-theme/functions.php

// Register a `404-widget` Widget area
genesis_register_widget_area( array(
	'id'           => '404-widget',
	'name'         => __( '404 Section', 'designody' ),
	'description'  => __( 'This is a custom 404 widget area.', 'designody' ),
	'before_title' => '<h3 class="error-info">',
	'after_title'  => '</h3>',
) );

STEP 2

Create a file 404.php under /child-theme/ and add the following:

<?php
/**
 * Genesis Framework.
 *
 * WARNING: This file is part of the core Genesis Framework. DO NOT edit this file under any circumstances.
 * Please do all modifications in the form of a child theme.
 *
 * @package Genesis\Templates
 * @author  StudioPress
 * @license GPL-2.0-or-later
 * @link    https://my.studiopress.com/themes/genesis/
 */

// Force full-width-content layout setting
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );

// Remove default loop.
remove_action( 'genesis_loop', 'genesis_do_loop' );

add_action( 'genesis_loop', 'genesis_404' );
/**
 * 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',
		)
	);

	genesis_markup(
		array(
			'open'    => '<header class="entry-header"><h1 %s>',
			'close'   => '</h1></header>',
			'content' => apply_filters( 'genesis_404_entry_title', __( 'Oops', 'genesis' ) ),
			'context' => 'entry-title',
		)
	);

	genesis_markup(
		array(
			'open'    => '<div %s>',
			'context' => 'entry-content',
		)
	);

	//$genesis_404_content = '';

	//echo apply_filters( 'genesis_404_entry_content', '<p>' . $genesis_404_content . '</p>' );
	
	//genesis_widget_area( '404-widget' );



	genesis_widget_area ('404-widget', array(
        'before' => '',
		'after'  => '',
	) );

	genesis_markup(
		array(
			'close'   => '</div>',
			'context' => 'entry-content',
		)
	);

	genesis_markup(
		array(
			'close'   => '</article>',
			'context' => 'entry-404',
		)
	);

}

genesis();