Get fresh WordPress Content delivered in your inbox with warpspeed!

learn wordpress wplift wordpress rocket

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]<?php
/*
Template Name: Sitemap
*/
?>[/php]

Next we need some javascript which handles the toggles :

[php]
<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>
[/php]

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

[php]
<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
[/php]

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 :

[php]
<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>
[/php]

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

[php]
#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;
}
[/php]

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

Published:

Last updated on:

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!

6 thoughts on “Quick Tip: Create a Sitemap for WordPress without a Plugin

  1. 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.

        • 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

          • 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. Pingback: The WhiP Newsletter #43 | Dev

Comments are closed.

Join 40,000 WordPress Astronauts
AND GET OUR LATEST CONTENT IN YOUR INBOX WITH WARPSPEED

We will never spam you.
close-link
siteground coupon
Get 60% Off the No. 1 WordPress Hosting!
Get 60% Off the No. 1 WordPress Hosting!