How to create HTML sitemap for WordPress manually without plugin?

As a webmaster, you should know how important a sitemap can be for your WordPress site. If you want to be found easier and get more organic traffic, you should create a WordPress sitemap. If you want to reduce the bound rate of your WordPress site, you should also make a WordPress sitemap, so your site visitors can easily find the content they are searching for in your site. There are two types of sitemaps you can build for WordPress websites: HTML sitemap and XML sitemap. WordPress XML sitemap is widely used to be submitted to search engines like Bing, Google. HTML sitemap for WordPress is not only search engine friendly but also user friendly. Your visitors can also make use of HTML sitemap to browse through your site and find the posts, pages or articles on your site easier. HTML sitemap makes it simpler for both clients and Search Engine to discover content on your WordPress blog and site.

Today, we will discuss how to create an HTML sitemap page for WordPress. You will learn how to make WordPress HTML sitemap, then create HTML sitemap page for WordPress to display the actual sitemap to front visitors. There’s plenty of plugins out there that will help WordPress users make an HTML sitemap. But we will recommend you to make WordPress HTML sitemap manually without any plugin unless you have an existing WordPress plugin comes the feature to generate HTML sitemap for WordPress. For example, if you use WordPress SEO plugin by Yoast or SEO ultimate for WordPress, these plugins has the built-in feature to create XML WordPress sitemap, so you do not need to install a separate plugin specifically for XML sitemap creating. Unfortunately we did not find such features to create HTML WordPress sitemap with the above mentioned plugins. Please note that to make a HTML sitemap in WordPress requires a touch of PHP code. It is not difficult though.

Following below steps, you will be able to build an HTML WordPress sitemap page like this.

How to create WordPress HTML sitemap manually?

You need WP admin access and FTP access or hosting account access in order to make WordPress HTML sitemap following below instructions. If you do not have a production site, check out this guide to create a website with WordPress in 5 minutes.

Step 1. Create HTML sitemap template file in WordPress hosting

Log on your hosting control panel to create a WordPress HTML sitemap template file on your hosting server. You can also create this sitemap file on your local computer, and then upload it to your WordPress hosting server later. They are different ways to do the same thing. In this demo, we will be using WordPress cPanel hosting to show you how to easily create WordPress HTML sitemap. If you do not have a WordPress hosting, check out this list of best WordPress hosting services. Log in cPanel, go to Files >> File Manager. Browse to the wp-content >> themes folder, open the current WordPress theme folder and create a sub-folder named “mysitemap” or anything else descriptive, then create the HTML WordPress template beneath in the name of “sitemap.php” or anything you like.

Step 2. Get the code for WordPress sitemap template

Log on your WordPress dashboard as administrator, go to WordPress Dashboard >> Appearance >> Editor, select current WordPress theme, then open Page Template (page.php) there. Copy all the code of this ‘page.php’ file and paste to the ‘sitemap.php’ file created in step 1.

Step 3. Edit the code of WordPress sitemap template

Now you need to replace:

<?php the_content(); ?>

with following code snippet:

<h2 id="pages">Pages</h2>
<ul>
<?php
// Add pages you'd like to exclude in the exclude here
wp_list_pages(
  array(
    'exclude' => '',
    'title_li' => '',
  )
);
?>
</ul>

<h2 id="posts">Posts</h2>
<ul>
<?php
// Add categories you'd like to exclude in the exclude here
$cats = get_categories('exclude=');
foreach ($cats as $cat) {
  echo "<li><h3>".$cat->cat_name."</h3>";
  echo "<ul>";
  query_posts('posts_per_page=-1&cat='.$cat->cat_ID);
  while(have_posts()) {
    the_post();
    $category = get_the_category();
    // Only display a post link once, even if it's in multiple categories
    if ($category[0]->cat_ID == $cat->cat_ID) {
      echo '<li><a href="'.get_permalink().'">'.get_the_title().'</a></li>';
    }
  }
  echo "</ul>";
  echo "</li>";
}
?>
</ul>

Step 4. WordPress HTML sitemap template comment

Add the following code on top of sitemap.php file:

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

Step 5. Create WordPress HTML sitemap page

Go to WordPress Dashboard >> Pages >> Add New to create a new WordPress page, and make sure to choose sitemap template in the Page Attributes box and then publish this page. Now preview this WordPress HTML sitemap page you will see your WordPress HTML sitemap page displays like the first picture in this guide above.

Customize WordPress HTML sitemap template

From the above WordPress HTML sitemap template code, you have enabled WordPress posts and pages display in the HTML sitemap for WordPress. If you like to display posts for all WordPress authors, you can add below code snippet.

<h2 id="authors">Authors</h2>
<ul>
<?php
wp_list_authors(
  array(
    'exclude_admin' => false,
  )
);
?>
</ul>

You can add categories with post numbers to WordPress HTML sitemap with following code too.

<h2>Categories</h2>
<ul><?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0&feed=RSS'); ?></ul>

Want to add links to feeds and comments feeds to WordPress HTML sitemap? Here is the code snippet for that.

<h2>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>

Now you know how to create an HTML sitemap page for your WordPress blog without any additional plugin and you do not need to worry about this will cause a heavy load on your WordPress hosting. Your WordPress sites can be faster and safer with less plugins.