Today, I’m here to address a question from a fellow WordPress user, oshka, who was facing a challenge when trying to display descriptions for menu items with children in the Navigation block.
As they pointed out, it seems there’s no built-in logic for rendering descriptions in the Navigation submenu in WordPress.
So, how can we tackle this issue and make your Navigation Submenu shine with descriptive content? ????
Descriptions to Navigation Submenu Items in WordPress
Well, Oshka found a clever solution using WordPress Filter hooks, and I’m going to break it down for you step by step.
Step 1: Create a Custom Function
To kickstart the process, you’ll need to create a custom function using the render_block
filter hook. This function will let you alter the HTML output for your Navigation Submenu block.
Step 2: Define Conditions
Inside your custom function, set up conditions to ensure that your modifications are only applied where necessary:
- Target the specific block type, in this case, ‘core/navigation-submenu.’
- Ensure that the modifications are only rendered on the front-end.
- Don’t alter the HTML in wp-json requests.
Step 3: Check for Descriptions
Within your custom function, check if title or description attributes are available for the Navigation Submenu. If they are, you’ll create a new list item element to accommodate these details.
Step 4: Insert Your Content
Identify the position to insert your additional HTML content. You want to add your descriptions right after the opening <ul>
tag of your Navigation Submenu.
Step 5: Implement Your Filter
Finally, add your filter using the add_filter
function. This will ensure that your custom rendering function is applied when necessary.
Now, let’s take a look at a simplified example of what your custom function might look like:
function custom_render_block_core_navigation_submenu(string $block_content, array $block): string
{
if (
isset($block['blockName']) &&
'core/navigation-submenu' === $block['blockName'] &&
!is_admin() &&
!wp_is_json_request()
) {
$additional_html = '';
if (!empty($block['attrs']['title']) || !empty($block['attrs']['description'])) {
$additional_html .= '<li class="wp-block-navigation-item">';
if (!empty($block['attrs']['title'])) {
$additional_html .= '<span class="wp-block-navigation-item__label">';
$additional_html .= wp_kses_post($block['attrs']['title']);
$additional_html .= '</span>';
}
if (!empty($block['attrs']['description'])) {
$additional_html .= '<span class="wp-block-navigation-item__description">';
$additional_html .= wp_kses_post($block['attrs']['description']);
$additional_html .= '</span>';
}
$additional_html .= '</li>';
}
$position = strpos($block_content, '<ul class="wp-block-navigation__submenu-container wp-block-navigation-submenu">');
if ($position !== false) {
$position += strlen('<ul class="wp-block-navigation__submenu-container wp-block-navigation-submenu">');
$block_content = substr_replace($block_content, $additional_html, $position, 0);
}
}
return $block_content;
}
add_filter('render_block', 'custom_render_block_core_navigation_submenu', null, 2);
And there you have it!
By following these steps, you can now render descriptions for submenu items in your Navigation block. This enhanced functionality can provide your website visitors with more information and improve the user experience. ????
If you’re eager to take your WordPress skills to the next level and learn more about customizing your website, feel free to explore the WordPress documentation and community forums for further guidance.
Have you encountered a similar challenge in WordPress or have other questions related to web development? Let’s keep the conversation going! Share your thoughts and questions below. ????????