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).

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.

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 the default Genesis 404 content
remove_action( 'genesis_loop', 'genesis_404' ); 

// Plop in our customized sitemap code
get_template_part('/partials/sitemap');
?>

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: https://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. 🙂