How to Create Custom 404 Page in Genesis Theme

How to Create Custom 404 Page in Genesis Theme. Here is the custom code that helps to create a custom 404 error page in genesis WordPress theme. Simply, create a page with name “404″ and add it to your genesis child theme.

Recommended: How to customize 404 Error Page in Thesis Theme

What is 404 Error Page ?

404 error page is displayed whenever the page or post you are trying to access on a website in not available. By default, 404 error page shows “Page not Found” message.

Check Out: How to Customize Genesis Post Excerpts

Create Custom 404 Page in Genesis Theme

For any website 404 error page is mandatory and instead of having a default one, you can create a custom 404 error page with recent posts, images etc. Follow this article and know how to create custom 404 page for Genesis Theme.

Its would be great if things like “Categories”, “Monthly Archives” etc are displayed in custom 404 error page. Check the live demo of 404 error page in WPSquare.

Demo: http://www.wpsquare.com/404-error

Display Recent Posts in 404 Page of Genesis Theme

This code displays list of recent posts published on your blog. You can change number of posts to be displayed by changing the highlighted number.

<h4><?php _e( 'Recent Articles:', 'genesis' ); ?></h4>
<ul><?php wp_get_archives( 'type=postbypost&limit=10' ); ?></ul>

Display Categories List in 404 Page of Genesis Theme

This code displays a list of all categories, which are sorted in “name” order.

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

Example of Custom 404 Error page in Genesis Theme

Show Monthly Archives  in Genesis 404 Page

It is also good to have “Monthly Archives” on 404 page and here is the code for that.

<h4><?php _e( 'Monthly:', 'genesis' ); ?></h4>
<ul><?php wp_get_archives( 'type=monthly' ); ?></ul>

Show List of Pages  in Genesis 404 Page

Displaying pages is optional and using the below code you can.

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

Also change the “Titles” of the respective sections as per your wish.

Tip: It is recommended to Back Up Files before editing Theme.

Wrapping Up all this Code – Custom 404 Page

Here is the final code to create custom 404 error page in Genesis Theme.

• Copy & paste this code to notepad and save it as 404.php file.
• Login to FTP account of your blog and go to theme folder.
• Now, upload  404.php file to root folder of your Genesis Child Theme.
• You have successfully added a custom 404 error page to Genesis theme.

<?php

remove_action( 'genesis_loop', 'genesis_do_loop' );
add_action( 'genesis_loop', 'genesis_404' );

function genesis_404() { ?>
<div class="post hentry">
<h1 class="entry-title"><?php _e( 'Not Found, Error 404', 'genesis' ); ?></h1>
<div>
<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.')); ?></p>        

<h4><?php _e( 'Recent Articles:', 'genesis' ); ?></h4>
<ul>
<?php wp_get_archives( 'type=postbypost&limit=10' ); ?>
</ul>        

<div class="archive-page">
<h4><?php _e( 'Categories:', 'genesis' ); ?></h4>
<ul>
<?php wp_list_categories( 'sort_column=name&title_li=' ); ?>
</ul>                        
</div>

<div class="archive-page">
<h4><?php _e( 'Pages:', 'genesis' ); ?></h4>
<ul>
<?php wp_list_pages( 'title_li=' ); ?>
</ul>
</div>

<div class="archive-page">
<h4><?php _e( 'Monthly:', 'genesis' ); ?></h4>
<ul>
<?php wp_get_archives( 'type=monthly' ); ?>
</ul>                    
</div>

</div>

</div>
<?php
}
genesis();

If you wish there is complexity in this code, then part of the code can be trimmed based on the requirement.

For further queries drop a comment and we are always glad to help you. Meanwhile, subscribe to our feeds using the form below.