Registering and using menu in custom theme with bootstrap 3

Question

I am creating my 2nd custom WordPress theme and having problems.

I used the same method in my 1st theme and it worked fine, but not this time of course.

I registered my menu in functions.php like this:

<?php  
//Register main menu
function register_theme_menu() {
    register_nav_menu( 'primary', 'Main Navigation Menu' );
}
add_action( 'init', 'register_theme_menu' );
?>

And called the menu in my header.php like this:

<!-- Menu -->   
                    <nav class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
                        <div class="navbar-header">
                          <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                          </button>
                        </div>
                        <nav class="navbar-collapse bs-navbar-collapse collapse" role="navigation">
                          <ul class="nav navbar-nav">
                            <?php wp_nav_menu( array( 
                                    'theme_location' => 'main-menu',
                                    'menu_class' => 'nav navbar-nav'
                            ) ); ?>
                          </ul>
                        </nav>
                <!-- End menu -->

I set mu menu in WP backend but its not responding, it just lists all my pages on the front end. Where am I going wrong?

Thanks

ham-sandwich · Accepted Answer · 2015-01-03 18:28:44Z

1

This is because you have passed primary in as the first parameter of the register_nav_menu() function and you are passing main-menu in the template.

<nav class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
    <div class="navbar-header">
        <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        </button>
     </div>
<nav class="navbar-collapse bs-navbar-collapse collapse" role="navigation">
    <ul class="nav navbar-nav">
    <?php wp_nav_menu( array( 
        'theme_location' => 'primary',
        'menu_class' => 'nav navbar-nav'
     ) ); ?>
     </ul>
</nav>

Pro Bono Advice

You are best using https://github.com/twittem/wp-bootstrap-navwalker for Wordpress / Bootstrap themes because the menu is difficult to implement. There is loads of tutorials online in how to implement it. This is because if you have any levels deeper than 2 the menu will break :-( bad times.

answered Jan 3, 2015 at 18:28

ham-sandwich

4,03810 gold badges38 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Damir Over a year ago

How many hours would I waste on such a stupid thing without stackoverflow... Thanks a lot ham-sandwich :)

Collectives™ on Stack Overflow

Registering and using menu in custom theme with bootstrap 3

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related