How to Create Custom 404 Page in Genesis Theme

A 404 page is what a user sees when they try to reach a non-existent page on your site (because they’ve clicked on a broken link, the page has been deleted, or they’ve mistyped a URL). A 404 page is called that because in response to a request for a missing page, webservers send back a HTTP status code of 404 to indicate that a page is not found. While the standard 404 page can vary depending on your ISP, it usually doesn’t provide the user with any useful information, and most users may just surf away from your site.

If you have access to your server, we recommend that you create a custom 404 page. A good custom 404 page will help people find the information they’re looking for, as well as providing other helpful content and encouraging them to explore your site further.

Best WordPress 404 Error Page

Best WordPress 404 Error Page

When creating a 404 page you need to remember to combine all three elements: creativity, usability, and the ability to leave a lasting impression.

With WordPress, you can create your own 404 error page. On WordPress, you can also almost do anything. It’s a complete CMS. When you use the Genesis framework, it becomes so easy doing all that. So, creating a custom 404 page is not so tough, at all. You can easily create a new page in simple steps. The default Genesis 404 layout is of course, good. But if you want to have your own page, you should customize it. There are several ways to get it done. Creating custom 404 error page in Genesis framework can be done by following ways:

Method 1: Install the Plugin

Love plugin? This is for you. After installing the plugin, you’ll see the new post Editor for creating your own custom 404 page in Genesis > 404 Page. Put nice words, some cool pictures and you’re done. You can also change the title of the 40 page and add search form to the page.

If you want to display your recent post or other dynamic posts, I suggest you to install Display Post Shortcode.

Install Genesis 404 Page plugin.

Method 2: Use your Page as 404 Page

This is simple, too. Here, instead of installing an additional plugin, you are supposed to create the 404 page layout by creating a new page and then, use it as your 404 error page. In simple words, all users will be redirected to this page when they land on a missing page on your blog.

Step 1: Create a New Page in your WP dashboard.
Step 2: Design the page and publish it with permalink as 404 (e.g. www.haloseeker.com/404)
Step 3: Now, create a new file (using notepad). Insert the following code into the page:

<?php $URL= get_bloginfo('url'); header("Location: https://haloseeker.com/404/"); ?>

Note: Edit haloseeker.com with your domain.

Step 4: Save the file as 404.php

Step 5: Upload it to your theme’s folder (…/wp-content/themes/yourtheme/404.php)

That’s it. Now, the page will be used as 404 error page for your site. In case, if you want to redirect the visitors to your home page when they land on an error page, use the following code in the 404.php instead of the above one.

<?php header("HTTP/1.1 301 Moved Permanently"); header("Location: ".get_bloginfo('url')); exit(); ?>

Method 3: Adding the 404.php template to your child theme

One you have the Genesis framework files open in the editor, choose the 404.php template and copy and paste all that’s written within it to a NEW FILE on your computer using your favorite text editor. Save that file as 404.php and then upload it to the child theme folder that you’re using via FTP.

Feel free to customize it the way you want it, as long as you know what you are doing:

<?php
/**
* Handles display of 404 page.
*
* Edited by Ricky1990 - https://haloseeker.com/
*
* This file should be added in the directory of your child theme!
*
* @category Genesis
* @package Templates
* @author StudioPress
* @license http://www.opensource.org/licenses/gpl-license.php GPL v2.0 (or later)
* @link http://www.studiopress.com/themes/genesis
*/
 
/** 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() { ?>
 
<div class="post hentry">
 
<h1 class="entry-title"><?php _e( 'Uh-Oh! It looks like you are lost!', 'genesis' ); ?></h1>
<div class="entry-content">
<p><?php printf( __( 'The page you are looking for no longer exists. Perhaps you can return back to the site\'s <a href="%s">homepage</a> and see if you can find what you are looking for.', 'genesis' ), home_url() ); ?></p>
<p><?php printf( __( 'Or you can try a link from the navigation.' ) ); ?></p>
</div><!-- end .entry-content -->
 
</div><!-- end .postclass -->
 
<?php
}
 
genesis();

Creating Custom 404.php File

Here, we create a new 404.php file with custom functions. In simple words, you can put whatever you want to display on the 404 page. Below are few codes you can use for your page

Display Recent Posts

<h4><?php _e( 'Recent Posts from the Blog', 'genesis' ); ?></h4>
<ul><?php wp_get_archives( 'type=postbypost&limit=10' ); ?></ul>

You can show any number of posts. Just change the 10 to whatever you want.

Display The List of Pages

<h4><?php _e( 'Pages:', 'genesis' ); ?></h4>
<ul><?php wp_list_pages( 'title_li=' ); ?></ul>

Display Blog Categories

<h4><?php _e( 'Categories:', 'genesis' ); ?></h4>
 <ul><?php wp_list_categories( 'sort_column=name&title_li=' ); ?></ul>

You can however use any code inside the file to show relevant information. So, creating a custom 404 error page in Genesis framework is that simple.

That’s it! You have just completed creating custom 404 page in Genesis Theme.If you have any queries drop a comment and we are always glad to help you.

Leave a Reply

2 Comments on "How to Create Custom 404 Page in Genesis Theme"

Notify of
avatar
Josephine Reijman
Guest

Hi, nice tut! Just one question: how do I add an image to te page?

Thanks!

wpDiscuz