Create an HTML Sitemap Page in Wordpress (Without Plugins)

ByAbhishek padhi Updated on
HTML sitemap for Wordpress

In this Article, I am going to show you how you can create an HTML sitemap page on your Wordpress website without using any additional or dedicated plugins for this.

You just need a few lines of code snippet to create an HTML sitemap page for your website. You can either use any code manager plugin or directly use it in the theme code.

I prefer to use a Code Manager plugins like Wp code to manage all of my codes in wordpress website. In this way, I can easily turn on and off the code snippets according to my requirement’s and It also helps manage multiple codes more efficiently.

Now, Let’s see how you can Create an HTML sitemap Page on your Wordpress website.

First of all, You need to use any one of the code provided below in the code manager plugin and generate a shortcode for that. Then you need to go to the Pages section and create a new page called “HTML Sitemap“.

Now Paste the Shortcode and Publish the page and your HTML sitemap page is ready for use.

So, Here are the Five different styles of HTML sitemap that you can use on your WordPress website.

HTML Sitemap with Pill shape Filter

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

Card Style 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

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

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

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>

Let me know which one do you like and want to use on your Website in the comment section. Don’t forget to share this with your friends.

Read More — HTML Sitemap for Blogger

Hello there. I am Abhishek Padhi, an Indian digital entrepreneur. With a handful of years of practice and experiment, I’m here to help bloggers like you to create an outstanding blog and earn money from it.

Related Articles..

What Skill Do You Need to Be a Digital Marketer

What Skill Do You Need to Be a Digital Marketer in 2024?

ByAbhishek padhi

With more and more people switching to online mode, marketers are also making their shift to the digital world. Digital…

Leave a Reply

Your email address will not be published. Required fields are marked *