Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

WordPress

Frank Chang
Frank Chang
1,235 Points

[Solved] Incorrect usage of wp_nav_menu

I'm building a website based on the files from the course "From Bootstrap to WordPress", and I'm trying to add multi-language function using the "polylang" plugin.

When I click on the language switcher widget, the page will switch, but not the menu.

I have two menus; one is menu_en (for English) and one is menu_zh (for Chinese) and they are linked to different pages corresponding to their language.

Under appearance -> menus -> manage locations, I have assigned each theme a different menu.

According to polylang, this is a known issue, and they have provided a solution to fix it in the links below:

https://polylang.wordpress.com/documentation/frequently-asked-questions/navigation-menus/

https://polylang.wordpress.com/2014/04/10/incorrect-usage-of-wp_nav_menu/

But if I replace register_nav_menu() in the function.php file and wp_nav_menu() in the header.php file, I would break the nav. I probably did it incorrectly as I'm still new in php development.

Can anyone help me on how to fix the code, or suggest another plugin that works better?

Any help is appreciated.

6 Answers

Stanley Thijssen
Stanley Thijssen
22,831 Points

I think your not using the functions the right way.

Maybe it's a good idea for your to read : https://codex.wordpress.org/Function_Reference/wp_nav_menu and: https://codex.wordpress.org/Function_Reference/register_nav_menus to make sure you did everything as explained in these to articles.

Have you also created a menu in the menu tab? and selected one of your theme locations you created?

Frank Chang
Frank Chang
1,235 Points

Yes, I have created a menu in the menu tab. According to this screen shot, my 'theme_location' is either 'Header Menu ENGLISH' or 'menu_en'; judging by the examples I've seen it seems to be more like 'menu_en', so I should be adding 'theme_location' = 'menu_en' in wp_nav_menu();

And by doing this I will have:

        $args = array(
          'theme_location' => 'menu_en',
          'menu'        => 'header-menu',
          'menu_class'  => 'nav navbar-nav',
          'container'   => 'false'
        );
        wp_nav_menu( $args );

(Please tell me if I have made any mistake in this part.)

Then for register_nav_menus(), I see in example there's

register_nav_menus( array( 'pluginbuddy_mobile' => 'PluginBuddy Mobile Navigation Menu', 'footer_menu' => 'My Custom Footer Menu', ) );

So I assume I should have 'menu_en' => 'Menu Header ENGLISH' in register_nav_menus(), which leads to:

register_nav_menus(
    array(
        'menu_en' => 'Header Menu ENGLISH',
        'header-menu'   => __( 'Header Menu' )
    )
);

(Please tell me if I have made any mistake in this part too.)

UPDATE

I have fixed it by changing the function to:

        $args = array(
          'menu'        => 'header-menu',
          'container_class' => 'menu-header',
          'theme_location' => 'header-menu',
          'menu_class'  => 'nav navbar-nav',
          'container'   => 'false'
        );
        wp_nav_menu( $args );

Thank you for your help and I hope this can become a reference to anyone will encounter the same problem.

Stanley Thijssen
Stanley Thijssen
22,831 Points

What did you replace the register_nav_menu() and wp_nav_menu() with?

Did you use a theme_location parameter inside the wp_nav_menu() so the menu's you made in your menus panel can be linked?

Stanley Thijssen
Stanley Thijssen
22,831 Points

You can find the theme locations at your menus section in wordpress. Underneath your menu you will see your available theme locations. The name of these locations are valid parameters.

Also notice the paramater you use should be equal to the theme location you've selected for your menu.

Frank Chang
Frank Chang
1,235 Points

I replaced: register_nav_menus( array('header-menu' => _( 'Header Menu' )) ); with register_nav_menu( 'primary', _( 'Primary Menu', 'themename' ) );

and $args = array( 'menu' => 'header-menu', 'menu_class' => 'nav navbar-nav', 'container' => 'false' ); wp_nav_menu( $args );

with wp_nav_menu( array( 'themename' => 'primary', 'menu_class' => 'nav-menu' ) );

where 'themename' is the name of the theme I documented on the top of style.css (probably incorrect)

Can you tell me how to find the correct theme_location parameter?

I'm not sure what other parameters I should change to match with menu names either. (menu_en and menu_zh) or one of the following: http://imgur.com/a/m8YtB#0

Thank you for your reply.

Frank Chang
Frank Chang
1,235 Points

Thank you again. My theme location appears to be 'Header Menu ENGLISH' according to the third screen shot in my above link, so I tried changing my codes to:

register_nav_menus( array( 'theme_location' => 'Header Menu ENGLISH', 'header-menu' => __( 'Header Menu ENGLISH' ) ) );

$args = array( 'theme_location' => 'Header Menu ENGLISH', 'menu' => 'header-menu', 'menu_class' => 'nav navbar-nav', 'container' => 'false' ); wp_nav_menu( $args );

But it still doesn't work. Precisely, the "language switcher" in my menu disappeared and the css broke, and I'm not sure if there's anything else I should change. Maybe I don't have all the parameters for register_nav_menu()? Again, any help is appreciated.

Frank Chang
Frank Chang
1,235 Points

I switched 'theme_location => 'Header Menu ENGLISH' to 'menu_en' as well as the location of the input field and it still leads to breaking my menu's css style from bootstrap.min.css and makes the language switcher disappear. However, It did switch to the second menu.

I suspect the solution is very simple, but I just can't get this to work.

My function.php and header.php are exactly the same as the files from "From Bootstrap to WordPress" => project download: https://teamtreehouse.com/library/from-bootstrap-to-wordpress-theme/add-bootstrap-components-to-wordpress-theme/from-bootstrap-to-wordpress-outro

The plugin is called 'polylang' and my objective is to switch between two menus by using the language switcher the plugin provides.

If anyone can get this to work, please give me a hand.