Custom 404 Error Page

Create a Custom 404 Error Page with an HTML Sitemap

Okay, I’m having fun over here with the new Genesis Extender Plugin and wanted to share (yet another) cool way to use it. This tutorial will cover how to make a custom 404 error page complete with an html sitemap.

Ready?

Create an HTML Sitemap

Thanks to Yoast for his post outlining how to create an HTML Sitemap for WordPress. I’m going to borrow some of his code with some slight variations.

Per the Yoast recommendation, we’re going to create a partials folder within your theme folder (Doing this allows you to re-use the sitemap code in multiple places). In that partials folder, create a file called sitemap.php.

So now you’ll have something like this in your theme folder: wp-content/themes/your-theme/partials/sitemap.php.

Here’s the code for sitemap.php that will output your HTML sitemap in an unordered list. I’ve wrapped it in two columns with the “archive-page” class, but you can do whatever you want with styling.

Use Genesis Extender Plugin to Tie-in Your Sitemap

Create the Conditional Statement

Once your code snippet is ready to roll, head on over to Genesis Extender Plugin > Extender Custom > Conditionals. We’re going to create conditional statement for whether a page is a 404. (Check here for a full reference of WordPress conditional tags that will come in handy for this part of Genesis Extender).

Genesis Extender - Custom Options 404

Note that these fields in the Genesis Extender Plugin don’t seem to like cut/paste, so just get in there and type it by hand. Name the conditional whatever you want and add the tag: is_404();

Create the Hook Box

Click over to the Genesis Extender Plugin > Extender Custom > Hook Boxes tab and now we’re going to hook in our sitemap code.

Genesis Extender -Hooks

Name it whatever you want and make sure to select Hooked from the dropdown on the far right. We want to hook it into genesis_before_loop. Next, click on the Conditionals dropdown and select the is_404 conditional you created in the last step.

Now you’re primed and ready. All’s that left is to call in sitemap.php. Drop this in the code area:

<?php
remove_action( 'genesis_loop', 'genesis_404' ); // Remove the default Genesis 404 content
get_template_part('/partials/sitemap'); // Plop in our customized sitemap code
?>

Don’t forget to save your changes!

Not using the Genesis Extender Plugin?

That’s okay! You can still play. You can write a custom function instead add it to functions.php. Here you go:

Test it Out

There’s probably an official way to test a 404 page, but I just entered a URL I know didn’t exist on my site: http://www.carriedils.com/404.

Go try it out and see what you think! Be sure to come back and leave a comment so I can see how you implemented your custom 404 page.

p.s. The woman on the cover image is my great aunt, “Biggie” Armstrong. It’s a pic of her standing in her beloved flower patch, which she would not have appreciated you stomping through. :)

7 day free trial

Carrie Dils

I’m a recommended Genesis Developer with 15+ years experience in web design and development. I'm creative, resourceful, and ready to put my mind to your project. Want to discuss your WordPress project? Let's talk!

Comments

  1. Eric Hamm says

    Hey Carrie,

    Thanks for sharing this very useful tip!

    I’m actually the developer of the Genesis Extender Plugin and noticed your mention of not being able to paste in the Custom Conditional text field.

    As you know you can certainly paste into the “Tag” field to add your actual Custom Conditional, but the “Name” fields are set to prevent pasting (using jQuery) to help prevent certain characters from being used for the Names. This helps prevent certain settings issues that can arise from certain character configurations.

    Hope that helps clear things up a bit. And glad to see you’re already making great use of the Plugin! :)

    Eric

    • Carrie Dils says

      Hey Eric,
      Thanks for stopping by and thanks for creating an awesome tool! The cut/paste totally makes sense now. :) I look forward to learning more with your plugin!
      Carrie

  2. says

    Hi Carrie
    Your aunt, “Biggie” Armstrong looks like a woman not to be trifled with!

    Useful article and I passed your comment about not being able to paste into various areas of the Extender plugin over to Eric Hamm.

    Eric said:

    “Regarding the pasting issue, that’s intentional and done by way of jQuery. The reason for it is because we restrict (also by way of jQuery) certain characters in the “Name” fields to prevent issues that can arise from things like spaces and dashes in the names. So by preventing pasting we’re also preventing names that can cause issues in the settings of Genesis Extender (and Dynamik and Catalyst).

    You can paste in the actual Custom Conditional “Tag” section which is where I’d think it would be the most likely place for pasting anyway, when people want to paste in a Custom Conditional.”

    I thought that it might be something like that.

    And finally… congrats on making it to the Genesis hall of fame, well deserved.

    • Carrie Dils says

      Hey Keith,
      Always good to see you ’round these parts! As I told Ben Boykin, if you offered up circus peanuts or candy corns to Aunt Biggie, you’d be IN!

      The intentional leave out of cut/paste makes total sense. It’ll actually help me learn better about naming standards – and using them. :)

      Have a great weekend!
      Carrie

      • says

        Hi Carrie
        Not sure wehat Candy Corns are but they sound great.
        Have a good weekend yourself and don’t forget… no playing with the Extender plugin!

  3. says

    Hi Carrie,

    Was just re-reading this blog post–now that we’re finally getting something to look at with our new website, etc. and it makes more sense to me/us.

    I was wondering if you used this plug-in any further–and/or is it one you include in your everyday site dev work?

    We have Eric’s Dynamik for Genesis Website Builder (child theme) which we’re enjoying learning and using. I’m thinking of buying the plug-in so we can use a different Genesis child theme, and still have the functionality.

    Have you gotten any different conclusions and/or more mileage from the Genesis Extender Plugin over the last 2-3 months? Did you install/use the Genesis Extender Plugin-in for your recently finished site located up here by us east of Seattle? Do you think I’ve asked enough questions?

    Thanks!
    Steve (& Sally) Wharton, Seattle

    • says

      Hey Steve!
      I am still loving GE. I am mostly using it to add custom CSS and custom functions to sites – it’s just a nice, consistent place to put code that’s separate from the theme. The custom home page options have been the least used feature for me – it’s an awesome feature with no complaints, I just haven’t found a need for it recently.

      That said, if you’re only working on a couple of sites and don’t plan to change out themes like underwear, you may not benefit from it. Also, if you like a theme out of the box and don’t need to do a lot of modifications, you may find the plugin to be overkill – it’s really designed more for users who plan to get in there and customize the heck out of things WITHOUT a ton of code.

      Because I want to sound like a home shopping network commercial, I’m going to make you a SPECIAL ONE-TIME OFFER. Ready? If you get GE, I’ll send you all the custom code snippets I use on my personal site. I don’t promise they’re exciting, but they may be something helpful in there. :)

      • says

        Wow! Cool offer; will give it some thought. Thanks! Glad to hear that you like GE. I’m thinking that it will be a great learning tool…especially when noodling around to see the specific files it updates/creates under the WP hood so to speak…

  4. says

    Hi Carrie,
    I’m so glad I found your site! It’s been so helpful! I just downloaded Genesis Extender, so I’m playing around and trying to figure things out :) I’m a complete novice, so I know this is a really dumb question: but how did you get the picture and search bar on the 404 page? I basically want to create the exact same thing as you (a funny lil title, cute picture + a search bar any time someone ends up at a page that isn’t there). Where do I add in my picture and text, etc? Thanks!

Trackbacks