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.


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:

// Remove the default Genesis 404 content
remove_action( 'genesis_loop', 'genesis_404' ); 

// 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:

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

23 thoughts on “Create a Custom 404 Error Page with an HTML Sitemap”

  1. Thank you Carrie,
    I have implemented this and it was such easy!

    But I am having a problem:
    The section “Not found, error 404..the page you are looking for no longer exists…” which is appearing at your page top, mine is appearing at bottom i.e. after the page/post listing.

    I am using “Magazine-Pro” theme and the 404 page is here:
    Could you please help me!

    Thank you very much and regards.
    P. Bora

    1. Heya! It depends on what sort of visibility you want for your Custom Post Type, but I’d probably control that at the level where you’re registering the CPT (i.e. For these $args, look at public, exclude_from_search, etc. to get as visible as you want).

      If it’s a CPT registered by some plugin (not something you wrote), you can still modify those arguments with the register_post_type_args filter.

      Alternatively, what you suggested with following the Yoast settings could work, too. Only hitch there is that your logic only works if that plugin is active.

  2. Another thought would be to write conditional logic to allow the sitemap to obey the Yoast plugin when no-follow,do not index are selected. That could automate the sitemap assuming that your no-index pages should also be excluded from the sitemap.

Leave a Comment

Your email address will not be published. Required fields are marked *

Carrie Dils uses Accessibility Checker to monitor our website's accessibility.