Creating a Custom 404 Page with Genesis – Tutorial

Genesis uses a very busy default 404 page. When I made the switch I didn’t want to lose my old custom 404 page, but couldn’t figure out how to create a new one either.

But I wanted my custom 404 page damn it. So, I asked the Genesis team for some help to make it happen. Below is how it’s done.

Getting the initial code

First, in the WP Dash go to Appearance > Editor and select the core genesis framework (not your child theme, but actual “Genesis”) from the drop down on the top right.

However, DO NOT DIRECTLY EDIT ANY CORE GENESIS FILES or they’ll be overwritten with the next update.

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.

Edit the 404.php template in your child theme

Then go back to the WP Dash and go to Appearance > Editor and select the child theme you’re using. Click on the 404.php file in the right sidebar and edit away.

Say whaaaaat?

Not sure what to edit? A Genesis default 404 shows the site pages, authors, archives, recent posts and categories.

Page heading

<h1 class="entry-title"><?php _e( 'Not Found, Error 404', 'genesis' ); ?></h1>

The above code is what spits out the heading at the top of the page. It’s where you see “Not Found, Error 404″ at the top of the default 404 page. Change the “Not Found, Error 404″ in the code to whatever you’d like to appear for the page heading (mine says “Sock it to me!”):

<h1 class="entry-title"><?php _e( 'Your Heading', 'genesis' ); ?></h1>

IMPORTANT: If you’re going to use an apostrophe (AKA single quote) inside any PHP call (not a programmer, don’t know a better word for it – or if there even is one) be SURE to add a forward slash in front of it. I.e. if you want your title to say “We Can’t Find That Page” it would need to be:

<h1 class="entry-title"><?php _e( 'We Can\'t Find That Page', 'genesis' ); ?></h1>

Intro text

<?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. Or, you can try finding it with the information below.', 'genesis' ), home_url() ); ?>

The above is what generates paragraph under the heading at the top of the 404 page. Replace the intro text with whatever you’d like to change it to:

<?php printf( __( 'Add whatever intro text you want here. And put a link to your <a href="%s">homepage</a> if you want to.', 'genesis' ), home_url() ); ?>

Page content

Next you’ll see a bunch of code inside two divs labeled “archive-page”. That’s what makes the two columns that list the the site pages, authors, archives, recent posts and categories. The top <div class=”archive-page”> creates the left column which lists pages and categories:

<div class="archive-page">

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

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

</div><!-- end .archive-page-->

The second one creates the right column which lists author pages, archives and recent posts:

<div class="archive-page">

<h4><?php _e( 'Authors:', 'genesis' ); ?></h4>
<ul>
<?php wp_list_authors( 'exclude_admin=0&optioncount=1' ); ?>
</ul>

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

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

</div><!-- end .archive-page-->

If you’d like to keep two columns below your intro text on your 404 page, simply edit what’s inside each <div class=”archive-page”></div> to be what you want:

<div class="archive-page">

<p>Your left column content here.</p>

</div><!-- end .archive-page-->

<div class="archive-page">

<p>Your right column content here.</p>

</div>

What about changing the page content to be one column?

If you want to get rid of the columns all together, then simply remove both the left and right <div class=”archive-page”></div> in their entirety and simply add your 404 content via a new <p></p> tag right below the intro text <p></p>.

So this:

<div class="entry-content">
<?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. Or, you can try finding it with the information below.', 'genesis' ), home_url() ); ?>

<div class="archive-page">

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

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

</div><!-- end .archive-page-->

<div class="archive-page">

<h4><?php _e( 'Authors:', 'genesis' ); ?></h4>
<ul>
<?php wp_list_authors( 'exclude_admin=0&optioncount=1' ); ?>
</ul>

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

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

</div><!-- end .archive-page-->
</div>

Would become this:

<div class="entry-content">
<?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. Or, you can try finding it with the information below.', 'genesis' ), home_url() ); ?>
<h4>Optional subtitle here</h4>
<p>Whatever you want to show after the intro</p>
</div><!-- end .entry-content-->


Or even merely this:

<div class="entry-content">
<h4>Optional subtitle here</h4>
<p>Whatever you want to show after the heading as content</p>
</div><!-- end .entry-content-->


Cheers!