How can I translate my navigation menu's LINKS with qtranslate on wordpress?

maha picture maha · Apr 11, 2012 · Viewed 19.7k times · Source

I have a bilingual (english/arabic) wordpress site. I was able to successfully translate the navigation menu items. However, the menu links on the arabic site, link to the default language which is English.

How can I tell wordpress that I need the menu links to change on the arabic site (I need the links on the arabic site to include /ar, for example: www.talalonline.com/ar instead of www.talalonline.com)

thanks

Answer

Eduardo Russo picture Eduardo Russo · Jan 30, 2013

@maha, I searched a lot about this and found the solution here, but the answer is a little fuzzy…

As you don't want to mess with your WP core files, all changes are in the theme. Your theme is located in wp-content/themes/your-theme-name/

Find your theme's function.php and add the code above in the end of the file, before the php end tag (?>):

class CustomLinkModifierWalker extends Walker_Nav_Menu {
    function __( $text ) {
        if ( preg_match_all('~(.*?)\|(\w{2,})\|~', $text, $matches) ) {
            $text = '';
            foreach ($matches[1] as $i => $match) {
                $text .= "[:{$matches[2][$i]}]$match";
            }
            $text = __( $text );
        }
        return $text;
    }
    function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
        global $wp_query;
        $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

        $class_names = $value = '';

        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
        $classes[] = 'menu-item-' . $item->ID;

        $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
        $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';

        $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
        $id = $id ? ' id="' . esc_attr( $id ) . '"' : '';

        $output .= $indent . '<li' . $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( $this->__( $item->url )  ) .'"' : '';

        $item_output = $args->before;
        $item_output .= '<a'. $attributes .'>';
        $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 );
    }
}

Then, you have to find where's your menu view inside your theme. The theme I'm using implement's it in the header.php. Maybe your's uses another file name, like header-fancy-theme.php.

My header view code was like this:

<?php
$nav_sec_menu_params = array(
    'depth' => 0,
    'theme_location' => 'sec-menu',
    'container_class' => 'menu-topmenu-container',
    'menu_class' => 'menus menu-topmenu',
    'fallback_cb' => 'block_sec_menu'
);
wp_nav_menu($nav_sec_menu_params);
?>

All you have to do is add the Walker implementation in the param array:

<?php
$nav_sec_menu_params = array(
    'walker' => new CustomLinkModifierWalker(),
    'depth' => 0,
    'theme_location' => 'sec-menu',
    'container_class' => 'menu-topmenu-container',
    'menu_class' => 'menus menu-topmenu',
    'fallback_cb' => 'block_sec_menu'
);
wp_nav_menu($nav_sec_menu_params);
?>

Then, in your menu, you'll use |lang| after the language URL ,like this:

enter image description here

I know it's not the exactly use you were hopping of automatic language links, but this may solve your problem.