• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar
  • Skip to user navigation

PopWP

WordPress and Genesis Tutorials

  • Get Started
  • About
  • Archive
  • Services
  • Membership
  • My Account

Customize Error 404 Page in Genesis

Last Updated on September 8, 2020 Favorited: 2 times

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();

Related Posts

  • Custom Page Template having hero title and subtitle in Genesis
  • Custom page template design for header, menu with description and footer in Genesis
  • Landing Page Design Template with Background Image in Genesis
  • Widgetized Landing Page in Genesis
  • Replicate widgetized front page design for other Page in Genesis

Categories: Genesis Tutorials Tags: 404, custom template

Reader Interactions

Primary Sidebar

Search

WPEngine WordPress Hosting, Perfected.

Hosting You are looking for?.
Perfect solution for small business to global enterprise.

Learn more

StudioPress Genesis Theme Framework

The No.1 Theme Provider.
Creative, SEO rich Theme for all niche projects.

Learn more

Categories

  • Free Content
  • Genesis Tutorials
  • Premium Content
  • Snippets
  • What's New?
  • WordPress Tutorials

Tag Cloud

Archive Background Section blog canvas menu center logo columns conditional tags CSS CSS Grid custom Customizer custom post type Custom Post Types custom template Custom Widget effect eNews Extended Featured Image front-page Genesis Genesis Sample header right hero section Image Background js layout left menu Logo menu Navigation Menu newsletter post page related posts responsive menu search search widget Shrinking Logo site header slide in-out Stylesheet Template Utility Bar Video Background widgets WordPress

Built with Genesis Framework + WordPress by Aryan Raj

  • Contact
  • FAQ
  • Disclaimer
  • Privacy Policy
  • Copyright Policy
  • Terms of Service