How to create an HTML Sitemap Page in WordPress 2025

What Is an HTML Sitemap

An HTML sitemap is a webpage on a website containing all the lists of posts, pages, and other content on the site. An HTML sitemap is structured in a well-organized hierarchical format, unlike an XML sitemap, which is mainly created for search engine crawlers to index webpages in the search engines.

An HTML sitemap is a wonderful, user-friendly archive designed just for visitors! It offers a clear and accessible overview of the website’s posts and pages, working as a helpful navigational tool that makes it easy for its users to find specific pages or posts so quickly on one page. It’s also very useful for larger websites.

Why HTML Sitemap Important

An HTML sitemap plays a very important role for your website. It helps websites to improve their user experience, it is also very effective for search engine optimization (SEO), and enhances website availability on search engines.

How To Create an HTML Sitemap Page In WordPress

In this Article, it will help you to create html sitemap page in your WordPress website without adding any plugins or a simple code snippet plugin. All you need to do is add a few lines of code to create an HTML sitemap page for your website. So, you can either use any code manager plugin or directly use it in the default theme code editor.

We suggest using a Code Manager plugin such as WP Code to handle all my code on the WordPress site. This allows me to easily enable or disable code snippets as needed, and it also facilitates more efficient management of multiple codes. Now, let’s explore how to create an HTML sitemap page on your WordPress site.

Download WPCode plugin from here for free: Click Here

Steps Of Creation HTML Sitemap Page

Step 1

At first, you can use any one of the five codes provided below with different styles and functionalities. You need to just copy any code you like and add that code in the code manager plugin, so that plugin will generate a shortcode for the added code.

Step 2

Now, copy the shortcode, then go to the Pages section and create a new page named “Sitemap or HTML Sitemap“.

Step 3

Next, insert the Shortcode in the editor and publish the page. That’s all; your fully functional HTML sitemap page is now ready for display.

You May Also Like: Phrasly Best AI Detection Remover 2025

HTML Sitemap Codes

Check out these five delightful designs and functions of HTML sitemap codes that you can use on your WordPress website!

HTML Sitemap with Pill shape Filter

<div class="filter-container">
    <button class="filter-button" onclick="filterByCategory('all')">All</button>
    <!-- Category buttons will be dynamically inserted here -->
</div>

<ul id="sitemap"></ul>

<script type="text/javascript">
    var allPosts = []; 
    var allCategories = {}; 
    var postCategoryCounts = {}; 

    function fetchPostsAndCategories() {
        var postsApi = '/wp-json/wp/v2/posts?per_page=100&_embed';
        var categoriesApi = '/wp-json/wp/v2/categories';

        fetch(postsApi)
            .then(response => response.json())
            .then(posts => {
                allPosts = posts;

                allPosts.forEach(post => {
                    if (post._embedded && post._embedded['wp:term']) {
                        var categories = post._embedded['wp:term'][0];
                        categories.forEach(category => {
                            if (!postCategoryCounts[category.id]) {
                                postCategoryCounts[category.id] = 1;
                            } else {
                                postCategoryCounts[category.id]++;
                            }
                        });
                    }
                });

                fetchCategories(); 
                displayPosts(allPosts); 
            });
    }

    function fetchCategories() {
        var categoriesApi = '/wp-json/wp/v2/categories';

        fetch(categoriesApi)
            .then(response => response.json())
            .then(categories => {
                categories.forEach(category => {
                    if (postCategoryCounts[category.id]) { 
                        allCategories[category.id] = category.name;
                        renderCategoryButton(category.name);
                    }
                });
            });
    }

    function renderCategoryButton(category) {
        var filterContainer = document.querySelector('.filter-container');
        var button = document.createElement("button");
        button.className = "filter-button";
        button.textContent = category;
        button.onclick = function() { filterByCategory(category); };
        filterContainer.appendChild(button);
    }

    function displayPosts(posts) {
        var sitemap = document.getElementById("sitemap");
        sitemap.innerHTML = ''; 

        posts.forEach(function(post) {
            var postTitle = post.title.rendered;
            var postUrl = post.link;
            var postCategories = '';

            if (post._embedded && post._embedded['wp:term']) {
                var categories = post._embedded['wp:term'][0];
                postCategories = categories.map(cat => {
                    var labelUrl = `/category/${cat.slug}/`;
                    return `<a href="${labelUrl}" class="label-button">${cat.name}</a>`;
                }).join(' ');
            } else {
                postCategories = '<span class="no-label">No Category</span>';
            }

            var listItem = document.createElement("li");
            listItem.innerHTML = `
                <div class="post-item">
                    <a href="${postUrl}" class="post-title">${postTitle}</a>
                    <div class="post-labels">${postCategories}</div>
                </div>`;
            sitemap.appendChild(listItem);
        });
    }

    function filterByCategory(category) {
        if (category === 'all') {
            displayPosts(allPosts);
        } else {
            var filteredPosts = allPosts.filter(function(post) {
                return post._embedded && post._embedded['wp:term'][0].some(cat => cat.name === category);
            });
            displayPosts(filteredPosts);
        }
    }

    fetchPostsAndCategories();
</script>

<style>
    .filter-container {
        text-align: center;
        margin: 20px 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .filter-button {
        background-color: #007bff;
        border: none;
        color: white;
        padding: 10px 20px;
        margin: 5px;
        border-radius: 50px;
        font-size: 16px;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    .filter-button:hover {
        background-color: #0056b3;
    }

    #sitemap {
        list-style-type: none;
        padding: 0;
        margin: 0;
        margin: auto;
        background-color: #f8f9fa;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
        width: 100%;
        max-width: 1200px;
    }

    #sitemap li {
        padding: 12px 15px;
        border-bottom: 1px solid #e0e0e0;
        transition: background 0.2s, transform 0.2s;
        border-left: 4px solid black;
        margin-bottom: 4px;
    }

    #sitemap li:hover {
        border-left: 4px solid blue;
        transform: translateY(-2px);
    }

    #sitemap li:last-child {
        border-bottom: none;
    }

    .post-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
    }

    .post-title {
        text-decoration: none;
        color: black;
        font-size: 19px;
        display: block;
        transition: color 0.2s;
        max-width: 70%;
    }

    .post-title:hover {
        color: blue;
    }

    .post-labels {
        display: flex;
        gap: 5px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .label-button {
        background-color: #48525c;
        color: white;
        padding: 5px 15px;
        border-radius: 50px;
        text-decoration: none;
        font-size: 14px;
        line-height: 25px;
        transition: background-color 0.2s ease;
    }

    .label-button:hover {
        background-color: #0056b3;
    }

    .no-label {
        color: #555;
        font-size: 14px;
    }

    @media (max-width: 768px) {
        .post-item {
            flex-direction: column;
            align-items: flex-start;
        }

        .post-title {
            max-width: 100%;
            font-size: 18px;
        }

        .post-labels {
            margin-top: 10px;
        }

        .filter-button {
            font-size: 14px;
            padding: 8px 15px;
        }

        .filter-container {
            justify-content: flex-start;
            overflow-x: auto;
            white-space: nowrap;
        }

        .label-button {
            padding: 5px 10px;
        }

        #sitemap {
            padding: 10px;
        }
    }

    @media (max-width: 480px) {
        .post-title {
            font-size: 16px;
        }

        .filter-button {
            font-size: 12px;
            padding: 7px 10px;
        }
    }
</style>

Card Style HTML Sitemap With Filter Option

<?php
$categories = get_categories(array(
    'orderby' => 'name',
    'hide_empty' => true,
));

$all_posts = new WP_Query(array(
    'posts_per_page' => -1,
));

echo '<div class="filter-container">';
echo '<button class="filter-button active" data-category="all">All</button>';
foreach ($categories as $category) {
    echo '<button class="filter-button" data-category="' . esc_attr($category->slug) . '">' . esc_html($category->name) . '</button>';
}
echo '</div>';

if ($all_posts->have_posts()) {
    echo '<ul id="sitemap">';
    while ($all_posts->have_posts()) {
        $all_posts->the_post();
        $post_categories = wp_get_post_categories(get_the_ID());
        $category_classes = '';
        $category_links = '';
        foreach ($post_categories as $category_id) {
            $category = get_category($category_id);
            $category_classes .= esc_attr($category->slug) . ' ';
            $category_links .= '<a href="' . esc_url(get_category_link($category_id)) . '" class="category-pill">' . esc_html($category->name) . '</a>';
        }
        echo '<li class="post-card" data-categories="' . esc_attr(trim($category_classes)) . '">';
        echo '<div class="post-item">';
        echo '<a href="' . esc_url(get_permalink()) . '" class="post-title">' . get_the_title() . '</a>';
        echo '<div class="post-labels">' . $category_links . '</div>';
        echo '</div>';
        echo '</li>';
    }
    echo '</ul>';
    wp_reset_postdata();
}
?>

<script>
document.addEventListener("DOMContentLoaded", function () {
    var filterButtons = document.querySelectorAll(".filter-button");
    var posts = document.querySelectorAll(".post-card");
    filterButtons.forEach(button => {
        button.addEventListener("click", function () {
            filterButtons.forEach(btn => btn.classList.remove("active"));
            this.classList.add("active");
            var selectedCategory = this.getAttribute("data-category");
            posts.forEach(post => {
                var postCategories = post.getAttribute("data-categories").split(" ");
                if (selectedCategory === "all" || postCategories.includes(selectedCategory)) {
                    post.style.display = "block";
                } else {
                    post.style.display = "none";
                }
            });
        });
    });
});
</script>

<style>
.filter-container {
    text-align: center;
    margin-bottom: 30px;
}
.filter-button {
    background-color: #007bff;
    border: none;
    color: white;
    padding: 10px 20px;
    margin: 5px;
    border-radius: 50px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.filter-button:hover {
    background-color: #0056b3;
}
.filter-button.active {
    background-color: #28a745;
}
#sitemap {
    list-style-type: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: flex-start;
}
.post-card {
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 1px 0px 0px 3px rgb(0 0 0 / 22%);
    width: calc(50% - 20px);
    transition: box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 160px;
    text-decoration: none;
}
.post-card:hover {
    box-shadow: 1px 1px 0px 3px rgb(0 0 0 / 68%);
}
.post-title {
    font-size: 22px;
    margin-bottom: 10px;
}
.post-item a {
    text-decoration: none;
}
.post-title a {
    text-decoration: none;
    color: #333;
    transition: color 0.3s ease;
}
.post-title a:hover {
    color: #007bff;
}
.post-labels {
    display: flex;
    gap: 10px;
}
.category-pill {
    background-color: #6c757d;
    color: white;
    padding: 5px 15px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 14px;
}
.category-pill:hover {
    background-color: #007bff;
}
@media (max-width: 768px) {
    .post-card {
        width: 100%;
    }
    .filter-button {
        font-size: 14px;
        padding: 8px 15px;
    }
}
</style>

HTML Sitemap With Drop-down Filter

<?php
$categories = get_categories(array(
    'orderby' => 'name',
    'hide_empty' => true,
));

$all_posts = new WP_Query(array(
    'posts_per_page' => -1,
));

if (!empty($categories)) {
    echo '<div class="filter-container">';
    echo '<select id="categoryFilter" class="category-dropdown">';
    echo '<option value="all" selected>All Categories</option>';
    foreach ($categories as $category) {
        echo '<option value="' . esc_attr($category->slug) . '">' . esc_html($category->name) . '</option>';
    }
    echo '</select>';
    echo '</div>';
}

if ($all_posts->have_posts()) {
    echo '<ul id="sitemap">';
    while ($all_posts->have_posts()) {
        $all_posts->the_post();
        $post_categories = wp_get_post_categories(get_the_ID());
        $category_classes = '';
        foreach ($post_categories as $category_id) {
            $category = get_category($category_id);
            $category_classes .= esc_attr($category->slug) . ' ';
        }
        echo '<li class="post-item" data-categories="' . esc_attr(trim($category_classes)) . '">';
        echo '<a href="' . esc_url(get_permalink()) . '">' . get_the_title() . '</a>';
        echo '</li>';
    }
    echo '</ul>';
    wp_reset_postdata();
}
?>

<script>
document.addEventListener("DOMContentLoaded", function () {
    var categoryFilter = document.getElementById("categoryFilter");
    var posts = document.querySelectorAll(".post-item");
    categoryFilter.addEventListener("change", function () {
        var selectedCategory = this.value;
        posts.forEach(post => {
            var postCategories = post.getAttribute("data-categories").split(" ");
            if (selectedCategory === "all" || postCategories.includes(selectedCategory)) {
                post.style.display = "list-item";
            } else {
                post.style.display = "none";
            }
        });
    });
});
</script>

<style>
.filter-container {
    text-align: center;
    margin: 20px 0;
}
.category-dropdown {
    padding: 10px;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid #ddd;
    width: 200px;
}
#sitemap {
    list-style-type: none;
    padding: 0;
    margin: 0 auto;
    max-width: 600px;
}
.post-item {
    padding: 10px;
    border-bottom: 1px solid #eee;
    transition: background 0.3s ease;
}
.post-item a {
    text-decoration: none;
    font-size: 18px;
    color: #333;
    display: block;
    transition: color 0.3s;
}
.post-item:hover {
    background-color: #f9f9f9;
}
.post-item a:hover {
    color: #007bff;
}
@media (max-width: 768px) {
    .category-dropdown {
        width: 100%;
        font-size: 14px;
    }
    #sitemap {
        max-width: 100%;
    }
    .post-item {
        padding: 8px;
    }
    .post-item a {
        font-size: 16px;
    }
}
</style>

HTML Sitemap with simple category filter

<?php
$categories = get_categories(array(
    'orderby' => 'name',
    'hide_empty' => true,
));

$all_posts = new WP_Query(array(
    'posts_per_page' => -1,
));

if (!empty($categories)) {
    echo '<div class="filter-container">';
    echo '<button class="filter-button active" data-category="all">All Categories</button>';
    foreach ($categories as $category) {
        echo '<button class="filter-button" data-category="' . esc_attr($category->slug) . '">' . esc_html($category->name) . '</button>';
    }
    echo '</div>';
}

if ($all_posts->have_posts()) {
    echo '<ul id="sitemap">';
    while ($all_posts->have_posts()) {
        $all_posts->the_post();
        $post_categories = wp_get_post_categories(get_the_ID());
        $category_classes = '';
        foreach ($post_categories as $category_id) {
            $category = get_category($category_id);
            $category_classes .= esc_attr($category->slug) . ' ';
        }
        echo '<li class="post-item" data-categories="' . esc_attr(trim($category_classes)) . '">';
        echo '<a href="' . esc_url(get_permalink()) . '">' . get_the_title() . '</a>';
        echo '</li>';
    }
    echo '</ul>';
    wp_reset_postdata();
}
?>

<script>
document.addEventListener("DOMContentLoaded", function () {
    var filterButtons = document.querySelectorAll(".filter-button");
    var posts = document.querySelectorAll(".post-item");
    filterButtons.forEach(button => {
        button.addEventListener("click", function () {
            var selectedCategory = this.getAttribute("data-category");
            filterButtons.forEach(btn => btn.classList.remove("active"));
            this.classList.add("active");
            posts.forEach(post => {
                var postCategories = post.getAttribute("data-categories").split(" ");
                post.style.display = selectedCategory === "all" || postCategories.includes(selectedCategory)
                    ? "list-item" : "none";
            });
        });
    });
});
</script>

<style>
.filter-container {
    text-align: center;
    margin-bottom: 20px;
}
.filter-button {
    padding: 10px 15px;
    margin: 5px;
    border: none;
    border-radius: 5px;
    background-color: #f1f1f1;
    color: #333;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s, color 0.3s;
}
.filter-button.active {
    background-color: #007bff;
    color: white;
}
.filter-button:hover {
    background-color: #0056b3;
    color: white;
}
#sitemap {
    list-style-type: none;
    padding: 0;
    margin: 0 auto;
    max-width: 600px;
}
.post-item {
    padding: 10px;
    border-bottom: 1px solid #eee;
    transition: background 0.3s ease;
}
.post-item a {
    text-decoration: none;
    font-size: 18px;
    color: #333;
    display: block;
    transition: color 0.3s;
}
.post-item:hover {
    background-color: #f9f9f9;
}
.post-item a:hover {
    color: #007bff;
}
@media (max-width: 768px) {
    .filter-container {
        flex-direction: column;
    }
    .filter-button {
        width: 100%;
        font-size: 14px;
    }
    #sitemap {
        max-width: 100%;
    }
    .post-item {
        padding: 8px;
    }
    .post-item a {
        font-size: 16px;
    }
}
</style>

HTML Sitemap With Category filter, along with images

<?php
$categories = get_categories(array(
    'orderby' => 'name',
    'hide_empty' => true,
));

$all_posts = new WP_Query(array(
    'posts_per_page' => -1,
));

if (!empty($categories)) {
    echo '<div class="filter-container">';
    echo '<button class="filter-button active" data-category="all">All Categories</button>';
    foreach ($categories as $category) {
        echo '<button class="filter-button" data-category="' . esc_attr($category->slug) . '">' . esc_html($category->name) . '</button>';
    }
    echo '</div>';
}

if ($all_posts->have_posts()) {
    echo '<ul id="sitemap">';
    while ($all_posts->have_posts()) {
        $all_posts->the_post();
        $post_categories = wp_get_post_categories(get_the_ID());
        $category_classes = '';
        foreach ($post_categories as $category_id) {
            $category = get_category($category_id);
            $category_classes .= esc_attr($category->slug) . ' ';
        }
        $featured_image = get_the_post_thumbnail_url(get_the_ID(), 'thumbnail');
        echo '<li class="post-item" data-categories="' . esc_attr(trim($category_classes)) . '">';
        if ($featured_image) {
            echo '<img src="' . esc_url($featured_image) . '" alt="' . get_the_title() . '" class="featured-image">';
        } else {
            echo '<div class="gradient-box"></div>';
        }
        echo '<a href="' . esc_url(get_permalink()) . '">' . get_the_title() . '</a>';
        echo '</li>';
    }
    echo '</ul>';
    wp_reset_postdata();
}
?>

<script>
document.addEventListener("DOMContentLoaded", function () {
    var filterButtons = document.querySelectorAll(".filter-button");
    var posts = document.querySelectorAll(".post-item");
    filterButtons.forEach(button => {
        button.addEventListener("click", function () {
            var selectedCategory = this.getAttribute("data-category");
            filterButtons.forEach(btn => btn.classList.remove("active"));
            this.classList.add("active");
            posts.forEach(post => {
                var postCategories = post.getAttribute("data-categories").split(" ");
                post.style.display = selectedCategory === "all" || postCategories.includes(selectedCategory)
                    ? "flex" : "none";
            });
        });
    });
});
</script>

<style>
.filter-container {
    text-align: center;
    margin-bottom: 20px;
}
.filter-button {
    padding: 10px 15px;
    margin: 5px;
    border: none;
    border-radius: 5px;
    background-color: #f1f1f1;
    color: #333;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s, color 0.3s;
}
.filter-button.active {
    background-color: #007bff;
    color: white;
}
.filter-button:hover {
    background-color: #0056b3;
    color: white;
}
#sitemap {
    list-style-type: none;
    padding: 0;
    margin: 0 auto;
    max-width: 600px;
}
.post-item {
    padding: 10px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    transition: background 0.3s ease;
}
.post-item img,
.gradient-box {
    width: 60px;
    height: 60px;
    margin-right: 10px;
    border-radius: 5px;
}
.gradient-box {
    background: linear-gradient(135deg, #3b82f6, #60a5fa);
}
.post-item a {
    text-decoration: none;
    font-size: 18px;
    color: #333;
    display: block;
    transition: color 0.3s;
}
.post-item:hover {
    background-color: #f9f9f9;
}
.post-item a:hover {
    color: #007bff;
}
@media (max-width: 768px) {
    .filter-container {
        flex-direction: column;
    }
    .filter-button {
        width: 100%;
        font-size: 14px;
    }
    #sitemap {
        max-width: 100%;
    }
    .post-item {
        padding: 8px;
    }
    .post-item img,
    .gradient-box {
        max-width: 40px;
        height: 40px;
    }
    .post-item a {
        font-size: 16px;
    }
}
</style>

Please let us know which one you like and want to use or using on your Website, write in the comment section below. Also, don’t forget to share this topic with your friends so they also get the benefits..