• In simple words, a Sitemap provides detailed information about the content of your website to both the search engines and users.
  • Normally search engines uses sitemaps to improve the index process of a website.
  • It also provides accessibility to certain pages that are not accessible via your menus.
  • It should be noted that the Sitemap does not affect the way crawler bots index your page. It just extends the visibility and accessibility of your website content.
  • It also does not mean that having sitemap guarantees that pages will be indexed by the search engines.
  • A sitemap does not affect your page rank in searching but it provides a visual or textually organized model of a Website’s content that allows the users to navigate through the site to find the information they are looking for.
  • It is similar to geographical map that helps people to find places they are looking for.
  • In other words, a sitemap is interactive table of contents that lists items with direct links to the portion or pages of a website that contains desired information.
  • There are lot many plugins are available that provides facility to generate sitemap such as google XML sitemaps, XML Sitemaps or you can do so without using plugins.
  • There are people like me who prefer to add sitemap manually.
  • In this article, we will focus on creating sitemap manually without using any plugin.
  • To create sitemap, follow the steps given below:
  1. Create a copy of your page.php WordPress template and save it as sitemap.php ( so that it matches your theme and layout elements, sidebar etc) .
  2. At the top Paste the following code. It will assign template name as Sitemap.
 <? php 
    /*
      Template Name: Sitemap
    */
?>
  • We need to add the following java script code to handles the toggles for hierarchical structure :
 <script type="text/javascript">
    $(document).ready(function()
   {
     $('#toggle-view li').click(function()
     {
        vartext = $(this).children('div.panel');
        if(text.is(':hidden'))
        {
           text.slideDown('200');
           $(this).children('span').html('-');
        }
        else
        {
           text.slideUp('200');
           $(this).children('span').html('+');
        }
     });
  }); 
</script>
  1. Add the following 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($mypostsas$post) : ?>
  <li class="sitemap">
     <?phpthe_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($mypostsas$post) : ?>

<li class="sitemap"><?phpthe_time('d/m/y') ?>:
<a href="<?phpthe_permalink(); ?>"><?phpthe_title(); ?></a>
</li>
  <?php endforeach; ?>
  </ul>
</div>
</li>
</ul>
  • If you require to add in custom post types, you can do so individually with the following code just by changing 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($mypostsas$post) : ?>
<li class="sitemap"><?phpthe_time('d/m/y') ?>:
   <a href="<?phpthe_permalink(); ?>">
   <?php the_title(); ?></a>
</li>
  <?php endforeach; ?>
  </ul>
 </div>
</li>
  • Finally we have to add some the following css code to for toggle styling into the style.css file.
#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;
}
  • To publish the sitemap page go to “Pages” > “Add New” in the dashboard, after naming the page and adding any content to the page body select  “Sitemap” from the template drop-down on the right under “Page Attributes”.
  • Now click on publish button and click on preview button to check in browser.