How to display dual language menus and headers?

Question

For reference: https://www.hpa.org.nz/about/our-role

Note the dual language menu - Te Reo Māori in smaller text above each English menu item and the English header.

All the multi-lang plugins I have looked at allow language switching but I just want two languages to be displayed on the menus and headers at once.

The current theme used is Twenty Seventeen and I can achieve this with some quick and dirty css (::before pseudo element)

e.g.

.menu-item::before {
  content: "Menu item";
}

h2::before {
  content: "Header item";
  font-family: "Libre Franklin";
  font-weight: normal;
  font-size: 0.65em;
  display: block;
}

But that requires me to add in relevant css for each and every menu item, header and anywhere else I want to use dual language.

So is there a way to have a multilanguage plugin plus a PHP (or javacript maybe?) code snippet that will pull in the other language as a ::before ?

Answer 1

One option could be to use menu descriptions (option found in Menus Screen Options, if not enabled yet) and a custom menu walker 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.

WPBeginner 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.

// 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 );
    }
}

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

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

<?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 -->

Then add the necessary styling to your child themes styles.css.