How to Create Custom SiteMap Page Template

How to Create Custom SiteMap Page Template for WordPress

A sitemap page helps users and search engines navigate your website with ease. In this guide, you’ll learn how to create a custom sitemap page template in WordPress in just a few steps.

🧭 Why You Need a Custom Sitemap Page

A sitemap page isn’t just for SEO it’s also a fantastic way to help your visitors find content quickly. Whether your site has dozens or thousands of posts, a sitemap ensures your users (and search engine bots) can locate the right pages efficiently.

🛠️ Difference Between XML and HTML Sitemaps

Before diving into the tutorial, it’s important to distinguish the two main types of sitemaps:

• XML Sitemap: Used primarily for search engines to crawl your site (e.g., created by Yoast SEO).
• HTML Sitemap: A visible, user-friendly page listing all your important pages and posts.

This guide focuses on creating an HTML Sitemap page that can be included in your navigation menu.

Step-by-Step Guide to Creating Custom Sitemap Page Template

Step 1: Create a Child Theme (If Not Already)

Before editing theme files, always work within a child theme. If you don’t already have one:

1. Navigate to wp-content/themes/
2. Create a folder like your-theme-child
3. Add a style.css file with this header:

/*
 Theme Name:   Your Theme Child
 Template:     your-theme
*/

4. Add a functions.php file and enqueue the parent theme’s style:

<?php
add_action('wp_enqueue_scripts', 'enqueue_parent_styles');
function enqueue_parent_styles() {
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
}

Activate your child theme in the WordPress dashboard.

Step 2: Create the Sitemap Template File

Inside your child theme folder:

1. Create a new file named page-sitemap.php
2. Paste the following code:

<?php
/*
Template Name: Sitemap Page
*/
get_header(); ?>

<div class="container">
  <h1><?php the_title(); ?></h1>
  <p>This is a user-friendly sitemap to help navigate our content.</p>

  <h2>Pages</h2>
  <ul>
    <?php
    wp_list_pages(array(
      'exclude' => '',
      'title_li' => '',
    ));
    ?>
  </ul>

  <h2>Posts</h2>
  <ul>
    <?php
    $posts = get_posts(array(
      'numberposts' => -1,
      'post_status' => 'publish'
    ));
    foreach ($posts as $post) : setup_postdata($post); ?>
      <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
    <?php endforeach; wp_reset_postdata(); ?>
  </ul>

  <h2>Categories</h2>
  <ul>
    <?php wp_list_categories(array(
      'title_li' => ''
    )); ?>
  </ul>
</div>

<?php get_footer(); ?>

This template lists all your pages, posts, and categories in separate sections.

Step 3: Create the Sitemap Page in WordPress

1. Go to Pages > Add New
2. Title it something like “SiteMap” or “Navigation”
3. In the right sidebar, choose Template > Sitemap Page
4. Publish the page

You now have a fully functional, navigable HTML sitemap page live on your website!

Bonus Tips for Enhancing Your Sitemap Page

• Style it nicely: Add custom CSS to make the list easier to read and more visually appealing.
• Include post types: Want to add custom post types like “Portfolio” or “Products”? Just duplicate the logic from the “Posts” section and query those post types.
• Exclude private or utility pages: Use the 'exclude' => 'ID1,ID2' parameter in wp_list_pages() to hide certain pages.

Best Practices

• Keep the sitemap updated automatically using dynamic queries like shown above.
• Make it accessible from the footer or menu so users can find it easily.
• Use it alongside your XML sitemap submitted to Google Search Console.

Final Thoughts

Creating a custom sitemap page template in WordPress is surprisingly easy and brings great value for both SEO and user experience. It gives your visitors a simple way to navigate your content, improves site structure visibility, and helps search engines crawl your site more effectively.

🏷️ Tags: WordPress, Sitemap, HTML Sitemap, Page Template, WordPress SEO, Web Design, Navigation, Blogging Tips, User Experience, Theme Development