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.

404.php

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!

About Rae Hoffman

Rae Hoffman aka "Sugarrae" is an affiliate marketing veteran and the CEO of PushFire, a search marketing agency specializing in SEO audits and link building strategies. She is also the author of the often controversial Sugarrae blog. You can connect with Rae via Twitter, Google+ and Facebook.

Sugarrae runs on the Genesis Framework

Genesis Framework

If you’re someone who doesn’t understand a lot of PHP, Genesis will give a ton of functionality that you wouldn’t be able to obtain otherwise with a simple control panel instead of having to alter code. For the advanced, Genesis has incredible customization possibilities via Genesis hooks.

The theme is not only highly customizable, but it has allowed me to run Sugarrae more professionally, with a much more targeted focus on monetization than it ever has been able to achieve before.

You can find out more about Genesis below:

Comments

  1. Any other reason to change the genesis 404 page other than for design purposes?

  2. Hi Rae,

    There is also a cool plugin that makes it easy to create a simple 404 page on Genesis sites:
    http://wordpress.org/extend/plugins/genesis-404-page/

    It was developed for Genesis and works very well.

    Damian

  3. Any idea on a Genesis site you stop the widget area from showing up? Got everything how I want it but cannot stop an empty, widget area showing down the right hand side.

  4. Here’s another way that doesn’t require duplicating the core 404 page:
    http://www.carriedils.com/custom-404-wordpress-html-sitemap/1574

    Also, with editing the files, the _e(‘Text’, genesis) code is used for translations, so you don’t need to keep that if you’re doing some custom stuff not for distribution. (e.g. could simply be We Can’t Find That Page.

    Welcome to the Genesis family!

    • Alright, well, the HTML I included got stripped out of that last one. In the “Also, with editing” paragraph, I was just saying that in the above example re the h1 class=”entry-title”, you could just put the text in, replacing the entire block.

  5. Thanks for that, Rae. Remarkably simple once you know how. Now I can indulge my penchant for awful Led Zeppelin puns (Page not found, arf arf arf) all I like.

  6. Brad Dalton says:

    Here’s a way to exclude pages from your 404 page template. http://www.studiopress.com/forums/topic/editing-the-404-error-page-in-fabric-theme/#post-38544

  7. I would like to use my Genesis theme’s Landing Page for my custom 404 page. Does anyone know how I would do that please?

    • Marcus – not sure what you mean by “Genesis theme’s landing page” – can you clarify?

      • I would like to know too how to use the Genesis “Landing Page” as the page template for a 404 page. Rae – I think what Marcus is saying is when you create a new page, on the right side of the page there is a drop down under Page Attributes called Template. If you drop that down you’ll see Landing Page. This is blank page with all page elements (header, sidebars, footer etc) removed.

        I’d like to use this as the basis of my 404 page and just add a header and image…

        Can you help?

        Thanks
        David

  8. Deirdre S says:

    Your tutorial is great – very easy to follow and understand. But the page I created is not displaying a custom sidebar menu. It is showing the “Primary Sidebar Widget Area.”

    How do I make the 404 page display a custom sidebar menu?

  9. Hi there, thanks for that, what do you recommend as the best ad management plug in? Currently migrating my site from .com to .org via genesis and wordpress, the child theme we bought suggests not using an ad management plug in but I think it would be very useful,

    Thanks and kindest regards from Dubai,

    Monica.

  10. James Salmons says:

    Thanks so much for the tutorial. You did a great job of presenting the kind of detailed, step by step instructions that people look for. I sorted through a lot of material that I found useless before finding this (most of what I found offered help help setting design elements but never helped with changing the content on the page!) so I am really grateful for it.

  11. Joe "The Connector" Kennedy says:

    Very good instructions on how to customize the 404 page in Genesis – thank you!

  12. Sonya Lynn says:

    I’m looking to change the sidebar on the 404.php page in my Studiopress child theme. Any clue on how to do this?

Speak Your Mind

*