Your cart is currently empty!
Filter The Navigation Block in Gutenberg
โ
by
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
Free
$0
Access only to all free tutorials per month.
Tutorial Request
Includes code guarantee and coding support.
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.
Was This Tutorial Helpful?