How to Create a SiteMap Page Template

<?php
/**
 * The template for displaying the sitemap page
 * Template Name: Sitemap
 *
 * @link https://codex.wordpress.org/Template_Hierarchy
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly.
}

get_header(); ?>

<div <?php generate_do_attr( 'content' ); ?>>
    <main <?php generate_do_attr( 'main' ); ?>>
        <style>
            .sitemap-container {
                font-family: Arial, sans-serif;
                line-height: 1.6;
                padding: 20px;
                background-color: #f9f9f9;
                border: 1px solid #ddd;
                border-radius: 8px;
            }
            .sitemap-container h2 {
                color: #333;
                border-bottom: 2px solid #007bff;
                padding-bottom: 5px;
                margin-bottom: 15px;
            }
            .accordion {
                margin-bottom: 20px;
                border: 1px solid #ddd;
                border-radius: 5px;
            }
            .accordion .accordion-item {
                border-bottom: 1px solid #ddd;
            }
            .accordion .accordion-item:last-child {
                border-bottom: none;
            }
            .accordion .accordion-header {
                padding: 10px;
                background-color: #007bff;
                color: #fff;
                cursor: pointer;
                border-radius: 5px 5px 0 0;
            }
            .accordion .accordion-body {
                padding: 10px;
                display: none;
                background-color: #f9f9f9;
            }
            .accordion .accordion-body.show {
                display: block;
            }
        </style>

        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const headers = document.querySelectorAll('.accordion .accordion-header');

                headers.forEach(header => {
                    header.addEventListener('click', function() {
                        const body = this.nextElementSibling;
                        body.classList.toggle('show');
                    });
                });
            });
        </script>

        <div class="sitemap-container">
            <h2>Sitemap</h2>

            <div class="accordion">
                <!-- Pages Section -->
                <div class="accordion-item">
                    <div class="accordion-header">Pages</div>
                    <div class="accordion-body">
                        <ul>
                            <?php
                            wp_list_pages( array(
                                'exclude'   => '1387', // Exclude specific pages by ID.
                                'title_li'  => '',     // Remove default title.
                            ) );
                            ?>
                        </ul>
                    </div>
                </div>

                <!-- Posts Section -->
                <div class="accordion-item">
                    <div class="accordion-header">Posts</div>
                    <div class="accordion-body">
                        <ul>
                            <?php
                            $posts_args = array(
                                'post_type'      => 'post',
                                'posts_per_page' => -1, // Retrieve all posts.
                            );

                            $posts_loop = new WP_Query( $posts_args );

                            if ( $posts_loop->have_posts() ) {
                                while ( $posts_loop->have_posts() ) {
                                    $posts_loop->the_post();
                                    ?>
                                    <li <?php post_class(); ?>>
                                        <a href="<?php echo esc_url( get_permalink() ); ?>"><?php the_title(); ?></a>
                                    </li>
                                    <?php
                                }
                            } else {
                                echo '<li>No posts found.</li>';
                            }

                            wp_reset_postdata();
                            ?>
                        </ul>
                    </div>
                </div>

                <!-- Post Categories Section -->
                <div class="accordion-item">
                    <div class="accordion-header">Post Categories</div>
                    <div class="accordion-body">
                        <ul>
                            <?php
                            wp_list_categories( array(
                                'title_li'    => '',   // Remove default title.
                                'show_count'  => false,
                            ) );
                            ?>
                        </ul>
                    </div>
                </div>

                <!-- Post Tags Section -->
                <div class="accordion-item">
                    <div class="accordion-header">Post Tags</div>
                    <div class="accordion-body">
                        <?php
                        $tags = get_tags();

                        if ( $tags ) {
                            echo '<ul>';
                            foreach ( $tags as $tag ) {
                                ?>
                                <li class="tag-id-<?php echo esc_attr( $tag->term_id ); ?>">
                                    <a href="<?php echo esc_url( get_tag_link( $tag->term_id ) ); ?>"><?php echo esc_html( $tag->name ); ?></a>
                                </li>
                                <?php
                            }
                            echo '</ul>';
                        } else {
                            echo '<p>No tags found.</p>';
                        }
                        ?>
                    </div>
                </div>

                <!-- Custom Post Type: Our Work Section -->
                <div class="accordion-item">
                    <div class="accordion-header">Our Work</div>
                    <div class="accordion-body">
                        <ul>
                            <?php
                            $work_args = array(
                                'post_type'      => 'our-work',
                                'posts_per_page' => -1, // Retrieve all "our-work" posts.
                            );

                            $work_loop = new WP_Query( $work_args );

                            if ( $work_loop->have_posts() ) {
                                while ( $work_loop->have_posts() ) {
                                    $work_loop->the_post();
                                    ?>
                                    <li <?php post_class(); ?>>
                                        <a href="<?php echo esc_url( get_permalink() ); ?>"><?php the_title(); ?></a>
                                    </li>
                                    <?php
                                }
                            } else {
                                echo '<li>No work items found.</li>';
                            }

                            wp_reset_postdata();
                            ?>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </main>
</div>

<?php
/**
 * Hook after the primary content area.
 *
 * @since 2.0
 */
do_action( 'generate_after_primary_content_area' );

generate_construct_sidebars();

get_footer();
?>


<!-- Tags: sitemap template, wordpress sitemap, page template, website navigation, structured sitemap, user-friendly sitemap, categories and tags, sitemap posts, custom post types, wordpress theme template, page hierarchy, organized sitemap, wordpress design, seo sitemap, website links -->

How to Use the Template

1. Save the Template:
   • Copy the above code and save it as sitemap-template.php in your active theme’s folder: /wp-content/themes/your-theme/.
2. Create a New Page:
   • Go to your WordPress admin dashboard.
   • Navigate to Pages > Add New.
   • Create a new page and name it “Sitemap.”
   • Assign the “Sitemap” template from the Template dropdown on the right-hand side.
3. Publish the Page:
   • Click Publish to make your sitemap live.
4. View the Page:
   • Visit the URL of your newly created sitemap page to ensure it displays correctly.

The sitemap page template now includes a descriptive introduction, enhanced CSS for styling, and tags for better SEO and discoverability. Let me know if you need additional adjustments! 😊