Filter The Navigation Block in Gutenberg

This code enables you to filter the navigation block using block themes like Twenty Twenty four. In the 1st example, we add some custom content to the nav block for logged in admins.

add_filter( 'render_block_core/navigation', 'wpdocs_modify_nav_menu_for_admins', 10, 2 );
function wpdocs_modify_nav_menu_for_admins( $block_content, $block ) {

    if ( isset( $block['blockName'] ) && 'core/navigation' === $block['blockName'] ) {

        if ( is_user_logged_in() && current_user_can( 'administrator' ) ) {

            $custom_message = '<p class="admin-message">Welcome, Admin!</p>';
            
            $block_content = $custom_message . $block_content;
        }
    }

    return $block_content;
}

The code above only executes for users assigned the administrator role. No other users will see the content.

Target Specific Menu Item

In the 2nd example, we add a custom class to a specific menu item named Product.

add_filter( 'render_block_core/navigation', 'wpsites_modify_specific_menu_item_for_admins', 10, 2 );
function wpsites_modify_specific_menu_item_for_admins( $block_content, $block ) {

    if ( isset( $block['blockName'] ) && 'core/navigation' === $block['blockName'] ) {

        if ( is_user_logged_in() && current_user_can( 'administrator' ) ) {
    
            $dom = new DOMDocument();
          
            @$dom->loadHTML('<?xml encoding="utf-8" ?>' . $block_content, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
            
  
            $xpath = new DOMXPath($dom);
            

            $menu_items = $xpath->query('//a');

            foreach ($menu_items as $menu_item) {
              
                if ($menu_item->textContent === 'Product') {
                 
                   $menu_item->setAttribute('class', 'admin-custom-class');
                    
             
                    // $menu_item->setAttribute('href', 'https://example.com/admin-special');
                }
            }

         
            $block_content = $dom->saveHTML();
        }
    }


    return $block_content;
}

Swap out the name Product to match your menu item name.

Conditional Menu Item

This code adds a link the shop page for logged in admins only.

add_filter('render_block_core/navigation', 'wpsitesdotnet_shop_link_for_admins', 10, 2);
function wpsitesdotnet_shop_link_for_admins($block_content, $block) {

    if ('core/navigation' === $block['blockName']) {
    
        if (is_user_logged_in() && current_user_can('manage_options')) {
        
            $shop_page_url = wc_get_page_permalink( 'shop' );
            
            $shop_menu_item = '<li class="wp-block-navigation-item"><a href="' . esc_url($shop_page_url) . '">Shop</a></li>';
            
            $block_content = str_replace('</ul>', $shop_menu_item . '</ul>', $block_content);
            
        }
        
    }
    
    return $block_content;
    
}

Add either code snippet to your child themes functions file or custom code snippets plugin.

Need More Coding Help?

Book a Consultation

Was This Tutorial Helpful?

Free

$0

Access only to all free tutorials per month.



Monthly

$75

Access to 10 premium tutorials per month.


Tutorial Request


Includes code guarantee and coding support.

Yearly

$500

Access to 15 premium tutorials per month.


Monthly Tutorial Request


Includes code guarantee and priority coding support.