HTML Sitemap for WordPress

An HTML sitemap (as opposed to an XML sitemap) is often mentioned as being useful for SEO. They certainly are if you use them wisely (and especially Bing seems to like them at times), but I like them even more for the fact that users like them a lot.

There’s plenty of plugins out there that will help you make an HTML sitemap. It’s not a feature in my WordPress SEO plugin just yet, but it might become one. The issue is though, that in most cases, you’ll want to do specific things with your sitemaps, include or exclude certain pages / post types, show certain taxonomies, etc. That’s why I tend to advise people to create a Sitemap Page template in their theme and use that.

In fact, I advise you to use a theme partial, so you can reuse your HTML sitemap template on your WordPress 404 error pages too. To do that, follow these steps: first of all, create a partials folder within your theme folder. In that partials folder, create a file called sitemap.php.

Paste the following code into that file and adapt as needed for your site:

<h2>Authors</h2>
<ul>
<?php wp_list_authors( array(
  'exclude_admin' => false
) ); ?>
</ul>

<h2>Pages</h2>
<ul>
<?php
wp_list_pages( array( 
  'exclude' => '',
  'title_li' => '',
) ); ?>
</ul>

<h2>Posts</h2>
<?php 
$cats = get_categories('exclude=');
foreach ($cats as $cat) {
  echo '<h3>' . $cat->cat_name . '</h3>';
  echo '<ul>';
  query_posts('posts_per_page=-1&cat=' . $cat->cat_ID);
  while(have_posts()) {
    the_post();
    $category = get_the_category();
    if ($category[0]->cat_ID == $cat->cat_ID) {
      echo '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>'; 
    }
  }
  echo '</ul>';
}

Now, wherever you need that HTML sitemap “bit” in your WordPress theme, use this:

<?php get_template_part('/partials/sitemap'); ?>

HTML Sitemap WordPress Page Template

You could do this, for instance, for a sitemap page template. To create a sitemap page template using this code, duplicate your page.php file and rename it to page-sitemap.php. Now open it, and below the call to the_content(); that’s in there, add the get_template_part() bit mentioned above. Now go to the first line of the file, and after the opening <?php (but before get_header()), add this comment:

/*
Template Name: Sitemap Page
*/

That’ll make WordPress recognize it as an HTML Sitemap template. This will allow you to write some introductory text for your HTML sitemap, after which the full sitemap shows.

Add Custom Post Types to your HTML Sitemap

Update: If you need custom post types in your HTML sitemap too, add this code underneath the other code:

<?php
foreach( get_post_types( array('public' => true) ) as $post_type ) {
  if ( in_array( $post_type, array('post','page','attachment') ) ) {
    continue;
  }
  
  $pt = get_post_type_object( $post_type );

  echo '<h2>' . $pt->labels->name . '</h2>';
  echo '<ul>';
  query_posts('post_type=' . $post_type . '&posts_per_page=-1');
  while( have_posts() ) {
    the_post();
    echo '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
  }
  echo '</ul>';
}
?>

Read more: Why you should buy Yoast SEO Premium »

Thank for such an awesome tutorial! I did it.