0

One option could be to use menu descriptions (option found in Menus Screen Options, if not enabled yet) and a <a href=”https://codex.wordpress.org/Class_Reference/Walker” rel=”nofollow noreferrer”>custom menu walker</a> to display extra text before/after menu items in similar fashion as in the reference site you mentioned. This way you could add the translated string to the menu description field.

<a href=”https://www.wpbeginner.com/wp-themes/how-to-add-menu-descriptions-in-your-wordpress-themes/” rel=”nofollow noreferrer”>WPBeginner</a> has posted an example how to display menu description with a custom walker. For future reference here’s the code. I modified the example so that the description is before the menu item text.

&nbsp;

[source language=”css”]// This goes into your child theme functions.php
class Menu_With_Description extends Walker_Nav_Menu {
function start_el(&$output, $item, $depth, $args) {
global $wp_query;
$indent = ( $depth ) ? str_repeat( “\t”, $depth ) : ”;

$class_names = $value = ”;

$classes = empty( $item->classes ) ? array() : (array) $item->classes;

$class_names = join( ‘ ‘, apply_filters( ‘nav_menu_css_class’, array_filter( $classes ), $item ) );
$class_names = ‘ class=”‘ . esc_attr( $class_names ) . ‘”‘;

$output .= $indent . ‘<li id=”menu-item-‘. $item->ID . ‘”‘ . $value . $class_names .’>’;

$attributes = ! empty( $item->attr_title ) ? ‘ title=”‘ . esc_attr( $item->attr_title ) .'”‘ : ”;
$attributes .= ! empty( $item->target ) ? ‘ target=”‘ . esc_attr( $item->target ) .'”‘ : ”;
$attributes .= ! empty( $item->xfn ) ? ‘ rel=”‘ . esc_attr( $item->xfn ) .'”‘ : ”;
$attributes .= ! empty( $item->url ) ? ‘ href=”‘ . esc_attr( $item->url ) .'”‘ : ”;

$item_output = $args->before;
$item_output .= ‘<a’. $attributes .’>’;
$item_output .= ‘<span class=”sub”>’ . $item->description . ‘</span><br>’;
$item_output .= $args->link_before . apply_filters( ‘the_title’, $item->title, $item->ID ) . $args->link_after;
$item_output .= ‘</a>’;
$item_output .= $args->after;

$output .= apply_filters( ‘walker_nav_menu_start_el’, $item_output, $item, $depth, $args );
}
}
[/source]

&nbsp;

As you’re using Twenty Seventeen you need to copy <code>components/navigation/navigation-top.php</code> file to similar path in your child theme.

Then add the custom walker to the menu. Like so,

&nbsp;

[source language=”css”]<?php
/**
* Displays top navigation with custom walker
*/
?>
<nav id=”site-navigation” class=”main-navigation” role=”navigation” aria-label=”<?php _e( ‘Top Menu’, ‘twentyseventeen’ ); ?>”>
<button class=”menu-toggle” aria-controls=”top-menu” aria-expanded=”false”><?php echo twentyseventeen_get_svg( array( ‘icon’ => ‘bars’ ) ); echo twentyseventeen_get_svg( array( ‘icon’ => ‘close’ ) ); _e( ‘Menu’, ‘twentyseventeen’ ); ?></button>
<?php
$walker = new Menu_With_Description;
wp_nav_menu( array(
‘theme_location’ => ‘top’,
‘menu_id’ => ‘top-menu’,
‘walker’ => $walker, // Add custom walker to the menu
) ); ?>

<?php if ( twentyseventeen_is_frontpage() || ( is_home() && is_front_page() ) ) : ?>
<a href=”#content” class=”menu-scroll-down”><?php echo twentyseventeen_get_svg( array( ‘icon’ => ‘next’ ) ); ?><span class=”screen-reader-text”><?php _e( ‘Scroll Down’, ‘twentyseventeen’ ); ?></span></a>
<?php endif; ?>
</nav><!– #site-navigation –>
[/source]

&nbsp;

Then add the necessary styling to your child themes <code>styles.css</code>.

Changed status to publish