Creating A WordPress Page Sitemap Template


About The Author
Avatar Cabe Nolan is the founder of WP Cover where he shares his insight into WordPress, development, & entrepreneurship. Outside of WPCover, Cabe continues to run a successful WordPress development firm, Bold City Design as well as a few high profile websites, Arrivala, Two Way Resume, Dock Skipper, and a successful outdoors brand, DolfinPack.







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.


Share Your Thoughts

Leave a Reply

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


Related Stuff You Might Like







WordPress News, Tips, & Code Snippets

Join the WP Cover mailing list and get wordpress news, tips, code snippets, security warnings, and more delivered right to your inbox.  We won't flood your inbox, newsletters typically go out every 1-2 weeks unless it involves an important security release.

You have Successfully Subscribed!