Creating A WordPress Page Sitemap Template

If you’ve been around websites a while, you probably know how important it is to generate a WordPress XML sitemap and submit it to Google, Bing, & other webmaster tools.  Performing this task for every website you create allows search engines to quickly and accurately index the pages of your site.

But what about humans?

As visitors to your site, we don’t want to look at a boring and (possibly) confusing XML sitemap of your websites content.  We would rather have a clean, organized, layout of all your sites content so we can quickly find what we’re looking for.  Some people will tell you that frontend, or non SEO specific sitemaps, are no longer needed and that could very well be the case.  Other people might say, but what can it hurt?  I’m with the other people.  I still like to view sitemaps on a regular basis to see what other information a site might contain that may be difficult to navigate to using the menu.  If you’re like me, here’s a getting started guide to creating a nice, organized, frontend WordPress sitemap.

To get started, I’m going to create a new page template in my active theme and name it page-sitemap.php. I’m going to add the typical template name above the get_header call:

<?php
/**
Template Name: Sitemap
 */	
get_header(); ?>

Next, I’m going to start building my sitemap. For this example, I’m going to use styling based on the Bootstrap framework but you can modify that as needed Here is the full code of my sitemap content:

<div class="row">
	<div class="col-md-6">
		<h2>Pages</h2>
		<ul>
			<?php
			wp_list_pages(
			  array(
			    'exclude' => '123,456',
			  )
			);
			?>
		</ul>
	</div>
	<div class="col-md-6">
		<h2>Posts</h2>
		<ul>
			<?php
			$cats = get_categories();
			foreach ($cats as $cat) {
			  $i=0;
			  query_posts('posts_per_page=-1&cat='.$cat->cat_ID);
			  while(have_posts()) {
				$i++;
			    the_post();
			    $theid = get_the_ID();
			    $category = get_the_category();
			    // Only display a post link once, even if it's in multiple categories
			    if ($category[0]->cat_ID == $cat->cat_ID) {
				    if($i==1) {
					 	echo "<h5>".$cat->cat_name."</h5>";   
				    }
					echo '<li><a href="'.get_permalink().'">'.get_the_title().'</a></li>';
			    }
			  }
			} wp_reset_query();
			?>
		</ul>
	</div>
</div>

Now, let’s break this down a little. On the left side of my page, I have my Pages sitemap and it’s pretty simple. We are just excluding a couple pages that I don’t want to show up in my sitemap. This is just a comma separated list of the page IDs:

<?php
wp_list_pages(
  array(
    'title_li' => '',
    'exclude' => '123,456',
  )
);
?>

On my posts side, it’s a bit more complicated. What we are doing is looping through every category on our website. We’re seeing if that category has posts and then we are also checking to ensure that post has not previously showed up in any other category. Our code output looks like this:

<?php
$cats = get_categories();
foreach ($cats as $cat) {
  $i=0;
  query_posts('posts_per_page=-1&cat='.$cat->cat_ID);
  while(have_posts()) {
	$i++;
    the_post();
    $theid = get_the_ID();
    $category = get_the_category();
    // Only display a post link once, even if it's in multiple categories
    if ($category[0]->cat_ID == $cat->cat_ID) {
	    if($i==1) {
		 	echo "<h5>".$cat->cat_name."</h5>";   
	    }
		echo '<li><a href="'.get_permalink().'">'.get_the_title().'</a></li>';
    }
  }
} wp_reset_query();
?>

That about wraps up this tutorial. I hope this helps you create a killer visual sitemap on your website for your guests to browser. Want to see a working example? Checkout the WP Cover sitemap here.