Filter: wpd_alpha_insights_menu_html

Modify the complete HTML output of the Alpha Insights custom navigation menu.

Description

This filter allows you to modify or replace the entire HTML structure of the Alpha Insights admin menu before it’s rendered. Use this for complete menu customization, adding branding elements, or integrating third-party UI components.

Location

File: includes/classes/WPD_Admin_Menu.php

Method: WPD_Admin_Menu::output_alpha_insights_menu()

Line: ~274

Parameters

Return

Type: string

Description: Modified menu HTML

Example Usage

Add Custom Branding Header

add_filter( 'wpd_alpha_insights_menu_html', 'add_custom_branding' );
function add_custom_branding( $menu_html )
{
    $branding = '
    <div class="custom-menu-header" style="padding: 20px; background: #f8f9fa; border-bottom: 2px solid #007cba; margin-bottom: 20px;">
        <img src="/wp-content/uploads/company-logo.png" alt="Company Logo" style="max-width: 200px;">
        <h1 style="margin: 10px 0 0 0; font-size: 24px;">Store Analytics Dashboard</h1>
    </div>
    ';
    // Prepend branding before menu
    return $branding . $menu_html;
}

Add Quick Stats Widget

add_filter( 'wpd_alpha_insights_menu_html', 'add_quick_stats' );
function add_quick_stats( $menu_html )
{
    // Get today's stats
    $today_orders = wpd_get_todays_order_count();
    $today_revenue = wpd_get_todays_revenue();
    
    $stats_widget = sprintf(
        '<
    div class="ai-quick-stats" style="padding: 15px; background: #fff; border: 1px solid #ddd; margin: 0 20px 20px; border-radius: 4px;">
    <
    h3>
    Today's Performance<
    /h3>
    <
    p>
    <
    strong>
    Orders:<
    /strong>
    %d<
    /p>
    <
    p>
    <
    strong>
    Revenue:<
    /strong>
    %s<
    /p>
    <
    /div>
    ',
        $today_orders,
        wc_price( $today_revenue )
    );
    
    // Insert after menu
    return $menu_html . $stats_widget;
}

Add Custom CSS Classes

add_filter( 'wpd_alpha_insights_menu_html', 'add_custom_classes' );
function add_custom_classes( $menu_html )
{
    // Add custom wrapper class for styling
    $menu_html = str_replace(
        'class="alpha-insights-menu"',
        'class="alpha-insights-menu custom-branded-menu"',
        $menu_html
    );
    return $menu_html;
}

Add Help Documentation Link

add_filter( 'wpd_alpha_insights_menu_html', 'add_help_link' );
function add_help_link( $menu_html )
{
    $help_link = '
    <div class="ai-help-section" style="padding: 20px; text-align: center; border-top: 1px solid #ddd; margin-top: 20px;">
        <a href="https://docs.example.com/alpha-insights" target="_blank" class="button button-secondary">
            📚 View Documentation
        </a>
        <a href="mailto:support@example.com" class="button button-secondary" style="margin-left: 10px;">
            ✉️ Contact Support
        </a>
    </div>
    ';
    return $menu_html . $help_link;
}

Inject Custom JavaScript

add_filter( 'wpd_alpha_insights_menu_html', 'inject_custom_js' );
function inject_custom_js( $menu_html )
{
    $custom_script = '
    <script>
    jQuery(document).ready(function($) {
        // Add custom menu interactions
        $('.alpha-insights-menu-item').hover(
            function() {
                $(this).addClass('menu-hover');
            },
            function() {
                $(this).removeClass('menu-hover');
            }
        );
        
        // Track menu clicks
        $('.alpha-insights-menu-item a').on('click', function() {
            var menuItem = $(this).text();
            console.log('Menu clicked:', menuItem);
            // Send to analytics
        });
    });
    </script>
    ';
    return $menu_html . $custom_script;
}

Add Notification Badge

add_filter( 'wpd_alpha_insights_menu_html', 'add_notification_badges' );
function add_notification_badges( $menu_html )
{
    // Count pending expense reports
    $pending_expenses = get_pending_expense_count();
    if ( $pending_expenses > 0 )
    {
        // Add badge to Expenses menu item
        $badge = '<span class="update-plugins count-' . $pending_expenses . '">
                    <span class="update-count">' . $pending_expenses . '</span>
                 </span>';
        $menu_html = str_replace(
            '>Manage Expenses</a>',
            '>Manage Expenses ' . $badge . '</a>',
            $menu_html
        );
    }
    return $menu_html;
}

Replace Menu with Custom Structure

add_filter( 'wpd_alpha_insights_menu_html', 'completely_custom_menu' );
function completely_custom_menu( $menu_html )
{
    // Replace with completely custom menu
    return '
    <div class="my-custom-analytics-menu">
        <nav>
            <ul>
                <li><a href="' . admin_url('admin.php?page=dashboard') . '">Dashboard</a></li>
                <li><a href="' . admin_url('admin.php?page=reports') . '">Reports</a></li>
                <li><a href="' . admin_url('admin.php?page=settings') . '">Settings</a></li>
            </ul>
        </nav>
    </div>
    ';
}

Best Practices

• Maintain accessibility standards (ARIA labels, keyboard navigation)
• Keep menu performance in mind (avoid heavy operations)
• Test responsive behavior on different screen sizes
• Use WordPress core CSS classes for consistency
• Escape user-generated content properly
• Preserve original menu structure if only making minor changes

Important Notes

• This filter receives the complete menu HTML as a string
• Modifying HTML directly requires careful string manipulation
• Consider using wpd_alpha_insights_menu_items filter for structural changes
• Changes affect all users who can see the Alpha Insights menu
• Custom HTML must be properly escaped for security

Menu Structure

The default menu HTML includes:

• Navigation wrapper container
• Menu item list (ul/li structure)
• Active state indicators
• Icon elements
• Submenu containers

CSS Customization

You can add custom CSS to style your menu modifications:

add_action( 'admin_head', 'custom_menu_styles' );
function custom_menu_styles()
{
    echo '<style>
        .custom-menu-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 30px;
        }
        .ai-quick-stats {
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
    </style>';
}

Debugging

add_filter( 'wpd_alpha_insights_menu_html', 'debug_menu_html', 999 );
function debug_menu_html( $menu_html )
{
    // Log menu HTML length
    error_log( 'Menu HTML size: ' . strlen( $menu_html ) . ' bytes' );
    // Add debug comment
    return '<!-- Alpha Insights Menu (Modified) -->' . $menu_html;
}

Related Filters

• wpd_alpha_insights_menu_items – Modify menu structure (recommended for adding/removing items)
• wpd_alpha_insights_active_parent_menu_item – Control active parent menu
• wpd_alpha_insights_active_submenu_item – Control active submenu

Related Classes

• WPD_Admin_Menu – Admin menu generation and rendering