How to build a dynamic sitemap for wordpress

Posted on 14th October, 2013 Leave a Comment

I always like to include a built in sitemap page to my themes (without using a plugin). So thought I’d include this quick tut on how this is achieved. Also to give the end user some control over whether this should be displayed, I’m including this as a template, for use with WP pages.

This template includes:

  • A Search field
  • Links to our feeds
  • Categories as a list
  • Archive section
  • Lists all Pages
  • Lists all Posts
  • A list of Custom Post Type posts

An example of this page can be found here

I’ll be adding the examples back soon.


Let’s begin by adding the usual template definition.

<?php
/*
 * Template Name: Sitemap Template
 * @package WPtricks
 */
?>
<!-- All other content - below this line -->

Then save this as sitemap.php.

By defining this as a template we’ll be able to select it when we create a new page in the dropdown under the Page Attributes module on the right of “Add New Page”.

Now we have our template defined lets include the default page content: header, footer, page content.
I’m going to make this page full width, without the sidebar. If you’d like to include the sidebar just uncomment that below!

<?php get_header(); ?>

   <div id="sitemap" class="content-area">
   <div id="content" class="site-content" role="main">

         <?php while ( have_posts() ) : the_post(); ?>

            <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

			<header class="entry-header">
                  <h1 class="entry-title h1"> <?php the_title(); ?> </h1> <!-- Include the page title -->
            </header>

              <div class="entry-content">

				<?php the_content(); ?> <!-- Show the content added to the page by the user -->

                 <div class="sitemap">

					<!-- More content to come || Add below -->

					<!-- End here -->

                 </div><!-- .sitemap -->
			  </div><!-- .entry-content -->
			</article><!-- #post -->

		 <?php endwhile; // end of the loop. ?>

   </div><!-- #content -->
   </div><!-- #sitemap -->

<?php   /* Uncomment to show the sidebar
		get_sidebar();  */ ?>
<?php get_footer(); ?> <1-- Include the Footer -->

Now lets start to add our actual sitemap.

We’ll add all this content below the <!– More content to come || Add below–>:

Add a search box:

<section class="q-search">
<h2 class="entry-title">Quick Search</h2>
<?php get_search_form(); ?>
</section>

Add links to your site feeds

<section class="feeds">
<h2 class="entry-title">Feeds</h2>
<ul>
	<li><a title="Full content" href="feed:<?php bloginfo('rss2_url'); ?>">Main RSS</a></li>
	<li><a title="Comment Feed" href="feed:<?php bloginfo('comments_rss2_url'); ?>">Comment Feed</a></li>
</ul>
</section>

Show a list of our Categories

<section class="categories">
<h2 class="entry-title"><i class="icon-th-list"></i> Categories</h2>
   <ul><?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0&feed=RSS'); ?></ul>
</section>

Show the Archives

<section class="archives">
<h2 class="entry-title">Archives</h2>
<ul>
	<?php wp_get_archives('type=monthly&show_post_count=true'); ?>
</ul>
</section>

List the Pages

<section class="pages">
<h2 class="entry-title">Pages</h2>
	<ul><?php wp_list_pages("title_li="); ?></ul>
</section>

Show 10 Blog Posts

<section class="posts">
<h2 class="entry-title"><i class="icon-paper-clip"></i> All Blog Posts:</h2>
                  <ul><?php // Change showposts= to the amount you'd like to show on the front end.
		  $archive_query = new WP_Query('showposts=10');
                  while ($archive_query->have_posts()) : $archive_query->the_post(); ?>
                  <li>
                  <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a>
                  </li>
                  <?php endwhile; ?>
                  </ul>
</section>

Show the Custom Post Types as a list

In the example below I have a CPT called products so would like to show 10 posts from this post type.

<section class="cpt-posts">
<h2 class="entry-title">Products:</h2>
               	<ul><?php query_posts( array( 'post_type' => 'product', 'showposts' => 10 ) ); // Change product to the slug used by your CPT!
  					if ( have_posts() ) : while ( have_posts() ) : the_post();?>
					<li>
                  <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a>
                  </li>
					<?php endwhile; endif; wp_reset_query(); ?>
                 </ul>
</section>

Finally you’ll need to style the sitemap with some CSS. Below are some simple styles that you’ll be able to work from.

Add the Styles

#sitemap,
#sitemap #content {
	width: 100%;
}

#sitemap section {
	width: 50%;
	float: left;
	display: block;
	margin: 1.3em 0 0 0;
}

#sitemap .q-search {}
#sitemap .feeds {}
#sitemap .categories {}
#sitemap .archives {}
#sitemap .pages {}
#sitemap .posts {}
#sitemap .cpt-posts {}

Now save up and add this to your theme folder, then you’re done.

Leave a Comment

To preserve code added to a comment you can wrap your code in short tags
by using [square brackets]:

  1. PHP use - [php] <?php code here ?> [/php]
  2. CSS use - [css] #code-here {} [/css]
  3. HTML use - [html] <div> code here </div> [/html]
  4. JS use - [js] $(".codeHere") [/js]