Tutsflow

How to create a sitemap in WordPress without plugin

Sitemaps are important for SEO because they make it easier for Google or search engine to find your site’s pages.  it is a communication tool between your website and search engines. By using this method you can include any custom post types your site may use pretty easily.

Follow these steps to create a sitemap in WordPress without any plugin:

Create 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”

Share the Post:

Featured WordPress Plugins

PatternsWP

WordPress Block Patterns Library

Deals & Coupons

Unbounce Coupon

Save 20% off first 3 months

Cloudways Coupon

Save 20% off first 1 months