A lightweight WordPress shortcode that outputs a fully hierarchical list of all pages with clickable links, stylish badge labels, and automatic detection of Elementor-built pages. Ideal for sitemaps, admin overviews, documentation pages, or SEO-friendly internal linking.

page_tree_badged.css

.page-tree-badged {
    list-style: none;
    padding-left: 0;
    font-family: inherit;
}

.page-tree-badged ul {
    list-style: none;
    margin-left: 1.2rem;
    padding-left: 1rem;
    border-left: 2px solid #eee;
}

.page-tree-item {
    margin: 6px 0;
}

.page-tree-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
}

.page-title {
    font-weight: 500;
}

.page-badges {
    display: inline-flex;
    gap: 6px;
}

.badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    line-height: 1.4;
    white-space: nowrap;
}

/* Elementor badge */
.badge-elementor {
    background: #92003b;
    color: #fff;
}

/* Parent indicator badge */
.badge-parent {
    background: #e5e7eb;
    color: #374151;
}

/* Hover */
.page-tree-link:hover .page-title {
    text-decoration: underline;
}

page_tree_badged.php

<?php


/**
 * Shortcode: [page_tree_badged]
 * Hierarchical page list with badges + Elementor indicator
 */

function mira_render_page_tree_badged( $parent_id = 0 ) {

    $pages = get_pages( array(
        'parent'      => $parent_id,
        'sort_column' => 'menu_order, post_title',
        'post_status' => 'publish'
    ) );

    if ( empty( $pages ) ) {
        return '';
    }

    $output = '<ul class="page-tree-badged">';

    foreach ( $pages as $page ) {

        // Detect Elementor usage
        $is_elementor = get_post_meta( $page->ID, '_elementor_edit_mode', true );

        $output .= '<li class="page-tree-item">';

        $output .= '<a class="page-tree-link" href="' . esc_url( get_permalink( $page->ID ) ) . '">';
        $output .= '<span class="page-title">' . esc_html( $page->post_title ) . '</span>';

        // Badges container
        $output .= '<span class="page-badges">';

        // Elementor badge
        if ( $is_elementor ) {
            $output .= '<span class="badge badge-elementor">Elementor</span>';
        }

        // Child indicator badge
        $child_pages = get_pages( array(
            'parent' => $page->ID,
            'number' => 1
        ) );

        if ( ! empty( $child_pages ) ) {
            $output .= '<span class="badge badge-parent">Has children</span>';
        }

        $output .= '</span>'; // badges

        $output .= '</a>';

        // Recursive children
        $output .= mira_render_page_tree_badged( $page->ID );

        $output .= '</li>';
    }

    $output .= '</ul>';

    return $output;
}

function mira_page_tree_badged_shortcode() {
    return mira_render_page_tree_badged( 0 );
}

add_shortcode( 'page_tree_badged', 'mira_page_tree_badged_shortcode' );


?>