Sitemaps are an essential part of SEO, they allow the search engine bots to access all your posts, pages and other post types from one location. I use one here on WPLift which lists everything on one page, I use toggles to hide the links by default so you click on a toggle to reveal the links along with the date the post was made. By using this method you can include any custom post types your site may use pretty easily.

Create a Sitemap for WordPress without a Plugin

To Create a Sitemap for WordPress without a Plugin, follow these steps :

Make a copy of your page.php template and save it as sitemap.php ( this is so it matches your theme & has the correct layout elements, sidebar etc) then at the top paste in:

<?php
/*
Template Name: Sitemap
*/
?>

Next we need some javascript which handles the toggles :

<script type="text/javascript">
$(document).ready(function () {
	
	$('#toggle-view li').click(function () {

		var text = $(this).children('div.panel');

		if (text.is(':hidden')) {
			text.slideDown('200');
			$(this).children('span').html('-');		
		} else {
			text.slideUp('200');
			$(this).children('span').html('+');		
		}
		
	});

});
</script>

And this is the code to display your posts and pages on the sitemap:

<ul id="toggle-view">

<li>
<h2>Posts</h2>
<span>+</span>
<div class="panel">
<ul>
<?php
$myposts = get_posts('numberposts=-1&offset='.$debut);
foreach($myposts as $post) :
?>
<li class="sitemap"><?php the_time('d/m/y') ?>: <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endforeach; ?>
</ul>
</div>
<?php //endwhile; ?>
</li>

<li>
<h2>Pages</h2>
<span>+</span>
<div class="panel">
<ul>
<?php
$myposts = get_posts('numberposts=-1&post_type=page&offset='.$debut);
foreach($myposts as $post) :
?>
<li class="sitemap"><?php the_time('d/m/y') ?>: <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endforeach; ?>
</ul>
</div>
</li>

</ul

If you need to add in custom post types, you can add as many as you like individually with the following code, change POSTTYPENAME in two places to the name of required post type :

<li>
<h2>POSTTYPENAME</h2>
<span>+</span>
<div class="panel">
<ul>
<?php
$myposts = get_posts('numberposts=-1&post_type=POSTTYPENAME&offset='.$debut);
foreach($myposts as $post) :
?>
<li class="sitemap"><?php the_time('d/m/y') ?>: <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endforeach; ?>
</ul>
</div>
</li>

Finally add this to your style.css to add some styling for the toggling:

#toggle-view {
	list-style:none;
	font-family:arial;
	margin:0;
	padding:0;
}
#toggle-view h2 {
	border-bottom:0px;
	margin-top:15px;
	margin-top:30px;
}
#toggle-view h2:hover {
	color:#ff0000
}
#toggle-view li {
	margin:0px;
	border-bottom:1px solid #ccc;
	position:relative;
	cursor:pointer;
	list-style-type:none;
	padding-left:15px;
}
#toggle-view span {
	position:absolute;
	left:0px;
	top:0;
	color:#bdbdbd;
	font-size:28px;
	font-weight:bold;
}
#toggle-view span:hover {
	color:#ff0000;
}
#toggle-view .panel {
	margin:5px 0;
	display:none;
}

The last thing to do is publish the page which will house your Sitemap, visit “Pages” > “Add New”, after naming the page and adding any content to the page body choose “Sitemap” from the template drop-down on the right under “Page Attributes”

Sitemap template


Author:

Oliver Dale is the founder of Kooc Media, An Internet Company based in Manchester, UK. I founded WPLift and ThemeFurnace, find out more on my Personal Blog. Thanks!

Siteground Hosting
Does WPLift load fast for you? That’s because we use Siteground for hosting, WPLift readers can click here to get up to 60% off hosting for your site.

Disclosure: This page may contain affiliate links for which we will receive compensation if a purchase is made.

1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 1.00 out of 5)
Leave Yours +

7 Comments

  1. Shae

    Hey Oli! Thanks for this. So I tried it, everything was fine but for some reason something ia acting up either for the css or the javascript. The page renders fine when I don’t include the css and it shows the long extensive list of posts and the pages on the site. However when the css is added, the toggles are closed and nothing works to make them open. I added the CSS to my custom Css area and even had given the div a special name so it doesn’t conflict with my themes existing toggles selector/ids.

    I added the Javascript to the header area before the closing head tag. Any ideas what I’m doing wrong? The page is here: http://afroniquelyu.com/sitemap

    • Hi Shae,
      Put the Javascript on the sitemap page itself, just before the rest of the code – It’s only needed on that page so no need to have it in the header as that will display on every page.
      Try that and see if it works ok.

      • Shae

        I tried that and it also didn’t work as well. :(

        • Hi Shae,
          I had a look too. Is it possible, you’ve added it in the WordPress editor instead of the PHP file itself?

          Because I find a lot of in the middle of the Javascript, which is usually a sign for this problem. Add it to the PHP-file.

          Additionally, Instead of $ you should use jQuery like here:
          jQuery(document).ready(function () {
          jQuery(‘#toggle-view li’).click(function () {
          var text = jQuery(this).children(‘div.panel’);
          if (text.is(‘:hidden’)) {
          text.slideDown(‘200’);
          jQuery(this).children(‘span’).html(‘-‘);
          } else {
          text.slideUp(‘200’);
          jQuery(this).children(‘span’).html(‘+’);
          }
          });
          });

          Since WordPress usually reserves the ‘$’-sign for another Javascript framework

          • Shae

            Hey guys, so I had tried adding it in the PHP and that didn’t work, so I tried it in the wordpress editor, that didn’t work. I also tried David’s suggestion of using the JQuery title instead in the PHP and that didn’t work also. Idk what’s wrong with it. This is the code I added to sitemap.php

            JQuery(document).ready(function () {

            JQuery(‘#fro-toggle li’).click(function () {

            var text = JQuery(this).children(‘div.panel’);

            if (text.is(‘:hidden’)) {
            text.slideDown(‘200’);
            JQuery(this).children(‘span’).html(‘-‘);
            } else {
            text.slideUp(‘200’);
            JQuery(this).children(‘span’).html(‘+’);
            }

            });

            });

            Are there any errors in that code?

  2. I am in fact thankful to the owner of this website who has
    shared this wonderful post at at this time.

  • Comments are Closed

Our Sponsors

SEND ME FREE STUFF!

Join our Newsletter to Receive 6 Free WordPress Themes

We will also send you our weekly Newsletter packed with the Latest WordPress Content.

We will look after your email & Never Spam!

You have Successfully Subscribed!