Generate an HTML Sitemap With Code Snippets

HTML sitemaps significantly enhance user experience by providing a clear, organized overview of a website’s content. It serves as a roadmap, making it easy for visitors to find specific pages or sections they’re looking for. This is especially beneficial for large or complex websites, where navigation menus might not be sufficient. By improving navigation and reducing the number of clicks required to reach desired content, HTML sitemaps keep users engaged and reduce frustration.

From an SEO perspective, HTML sitemaps contribute to improved search engine optimization by facilitating the discovery and indexing of web pages. While primarily designed for users, they also help search engine crawlers efficiently explore and understand the website’s structure. The internal links within the sitemap lead crawlers to all corners of the website, ensuring that even deep or recently added pages get indexed. This, in turn, can lead to better visibility in search engine results pages (SERPs) and potentially increased organic traffic.

This code snippet creates a function in WordPress to generate an HTML sitemap and provides a shortcode to display it. Here’s a breakdown of what each part does:

Post and Page Sitemap in 2 Columns

// Function to generate HTML sitemap
function generate_html_sitemap() {
    // Get categories and posts
    $categories = get_categories(array(
        'orderby' => 'name',
        'order'   => 'ASC'
    ));

    // Get pages
    $pages = get_pages(array(
        'sort_column' => 'post_title',
        'sort_order'  => 'ASC'
    ));

    if (empty($categories) && empty($pages)) {
        return '<p>No content found.</p>';
    }

    $html = '<style>
        .html-sitemap {
            display: flex;
            justify-content: space-between;
        }
        .sitemap-column {
            width: 48%;
        }
        .sitemap-column h2 {
            margin-top: 0;
        }
    </style>';

    $html .= '<div class="html-sitemap">';
    $html .= '<div class="sitemap-column sitemap-posts"><h2>Posts</h2>';

    foreach ($categories as $category) {
        $html .= '<h3>' . esc_html($category->name) . '</h3>';
        $html .= '<ul>';
        $posts = get_posts(array(
            'category' => $category->term_id,
            'orderby'  => 'title',
            'order'    => 'ASC',
            'numberposts' => -1
        ));
        if (empty($posts)) {
            $html .= '<li>No posts found in this category.</li>';
        } else {
            foreach ($posts as $post) {
                $html .= '<li><a href="' . get_permalink($post->ID) . '">' . esc_html($post->post_title) . '</a></li>';
            }
        }
        $html .= '</ul>';
    }

    $html .= '</div>'; // End of sitemap-posts column

    // Add pages column
    $html .= '<div class="sitemap-column sitemap-pages"><h2>Pages</h2>';
    $html .= '<ul>';
    foreach ($pages as $page) {
        $html .= '<li><a href="' . get_permalink($page->ID) . '">' . esc_html($page->post_title) . '</a></li>';
    }
    $html .= '</ul></div>'; // End of sitemap-pages column

    $html .= '</div>'; // End of html-sitemap
    return $html;
}

// Shortcode to display HTML sitemap
function html_sitemap_shortcode() {
    return generate_html_sitemap();
}
add_shortcode('html_sitemap', 'html_sitemap_shortcode');

Warning: All code found on this site is use at your own risk vibe. It worked for me when I wrote it, but if it breaks your stuff don’t come shout at me. Happy to help if I can, but there are no guarantees expressed and implied. This is merely an example for developers most of the code examples on this site are scripts that are used in Code Snippets functions.

Post Only Sitemap

// Function to generate HTML sitemap
function generate_html_sitemap() {
    $categories = get_categories(array(
        'orderby' => 'name',
        'order'   => 'ASC'
    ));
    if (empty($categories)) {
        return '<p>No categories found.</p>';
    }
    $html = '<div class="html-sitemap">';
    foreach ($categories as $category) {
        $html .= '<h2>' . esc_html($category->name) . '</h2>';
        $html .= '<ul>';
        $posts = get_posts(array(
            'category' => $category->term_id,
            'orderby'  => 'title',
            'order'    => 'ASC',
            'numberposts' => -1
        ));
        if (empty($posts)) {
            $html .= '<li>No posts found in this category.</li>';
        } else {
            foreach ($posts as $post) {
                $html .= '<li><a href="' . get_permalink($post->ID) . '">' . esc_html($post->post_title) . '</a></li>';
            }
        }
        $html .= '</ul>';
    }
    $html .= '</div>';
    return $html;
}
// Shortcode to display HTML sitemap
function html_sitemap_shortcode() {
    return generate_html_sitemap();
}
add_shortcode('html_sitemap', 'html_sitemap_shortcode');

Warning: All code found on this site is use at your own risk vibe. It worked for me when I wrote it, but if it breaks your stuff don’t come shout at me. Happy to help if I can, but there are no guarantees expressed and implied. This is merely an example for developers most of the code examples on this site are scripts that are used in Code Snippets functions.

Page Only Sitemap

// Function to generate HTML sitemap for pages only
function generate_html_sitemap() {
    // Get pages
    $pages = get_pages(array(
        'sort_column' => 'post_title',
        'sort_order'  => 'ASC'
    ));
    if (empty($pages)) {
        return '<p>No pages found.</p>';
    }
    $html = '<style>
        .html-sitemap {
            display: flex;
            justify-content: center;
            padding: 40px 0;
            width: 100vw;
            position: relative;
            left: calc(-50vw + 50%);
            overflow: hidden;
        }
        .sitemap-column {
            width: 60%;
            max-width: 1200px;
            padding: 0 20px;
        }
        .sitemap-column h2 {
            margin-top: 0;
        }
    </style>';
    $html .= '<div class="html-sitemap">';
    $html .= '<div class="sitemap-column sitemap-pages"><h2>Pages</h2>';
    $html .= '<ul>';
    foreach ($pages as $page) {
        $html .= '<li><a href="' . get_permalink($page->ID) . '">' . esc_html($page->post_title) . '</a></li>';
    }
    $html .= '</ul></div>'; // End of sitemap-pages column
    $html .= '</div>'; // End of html-sitemap
    return $html;
}
function html_sitemap_shortcode() {
    return generate_html_sitemap();
}
add_shortcode('html_sitemap', 'html_sitemap_shortcode');

Warning: All code found on this site is use at your own risk vibe. It worked for me when I wrote it, but if it breaks your stuff don’t come shout at me. Happy to help if I can, but there are no guarantees expressed and implied. This is merely an example for developers most of the code examples on this site are scripts that are used in Code Snippets functions.

Only run on site front end…..

Function: generate_html_sitemap

  1. Get Categories:
    • get_categories(array('orderby' => 'name', 'order' => 'ASC'));
    • Retrieves all categories sorted alphabetically by their name in ascending order.
  2. Check for Empty Categories:
    • if (empty($categories)) { return '<p>No categories found.</p>'; }
    • If no categories are found, it returns a message indicating no categories were found.
  3. Initialize HTML:
    • $html = '<div class="html-sitemap">';
    • Initializes a string to hold the HTML output for the sitemap.
  4. Loop Through Each Category:
    • foreach ($categories as $category) { ... }
    • Loops through each category to generate the sitemap structure.
  5. Add Category Title:
    • $html .= '<h2>' . esc_html($category->name) . '</h2>';
    • Adds the category name as a heading to the HTML.
  6. Get Posts in Category:
    • $posts = get_posts(array('category' => $category->term_id, 'orderby' => 'title', 'order' => 'ASC', 'numberposts' => -1));
    • Retrieves all posts within the current category, sorted by title in ascending order.
  7. Check for Empty Posts:
    • if (empty($posts)) { $html .= '<li>No posts found in this category.</li>'; }
    • If no posts are found in the current category, it adds a list item indicating no posts were found.
  8. Add Posts to HTML:
    • foreach ($posts as $post) { $html .= '<li><a href="' . get_permalink($post->ID) . '">' . esc_html($post->post_title) . '</a></li>'; }
    • Loops through each post and adds a list item with a link to the post.
  9. Close HTML Tags:
    • $html .= '</ul>'; and html .= '</div>';
    • Closes the unordered list and the main div for the HTML sitemap.
  10. Return the HTML:
    • return $html;
    • Returns the complete HTML sitemap.

Shortcode: html_sitemap_shortcode

  1. Define Shortcode Function:
    • function html_sitemap_shortcode() { return generate_html_sitemap(); }
    • Defines a function that calls generate_html_sitemap() and returns its output.
  2. Add Shortcode:
    • add_shortcode('html_sitemap', 'html_sitemap_shortcode');
    • Registers the shortcode [html_sitemap] which calls the html_sitemap_shortcode function.

Usage

  • To display the HTML sitemap on any page or post, you can use the shortcode [html_sitemap].
  • This shortcode will generate and display a hierarchical list of categories and their posts in an HTML format.

"Talk is cheap. Show me the code."

Linus Torvalds

Share on Facebook Share on X Share on LinkedIn

Leave a Reply

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


Scroll to top