How to Easily Transfers a Bootstrap Menu in WordPress Theme Part 2

Starting from visitor’s comment that asked about the wp_bootstrap_navwalker.php does not support with the latest jquery version, I will share new tutorial how to create a bootstrap menu on WordPress theme without navwalker library. For the last article please read how to create WordPress theme with bootstrap and underscores step by step. Okay, let’s begin the tutorial, hope fixes your problem

NOTE : After a few trials, this method resulted in a dropdown menu can’t work properly 🙁 . I suggest you keep using nav_walker_library pada tutorial Create WordPress Theme with Bootstrap And Underscores Step by Step.

I assume you have read my article about how to create a WordPress theme, if not please use this link. Because I am not going to discuss it in detail for making WordPress theme, but simply an alternative way to make navbar menu bootstrap on WordPress menu without using the wp_bootstrap_navwalker.php library.

Step by step transfers bootstrap menu in WordPress theme

1. Edit header.php and copy the navbar bootstrap menu code below

   <!-- navbar --> <div class="navbar-wrapper"> <div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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> <a class="navbar-brand" href="<?php echo esc_url( home_url( '/' ) ); ?>" title='<?php echo esc_attr( get_bloginfo( 'description', 'display' ) ); ?>' rel='home' > <img src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/logosmall.png" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"> </a> </div> <!-- navbar-header --> <?php wp_nav_menu( array( 'theme_location' => 'primary', 'container' =>'nav', 'container_class' => 'navbar-collapse collapse', 'menu_class' => 'nav navbar-nav navbar-right' ) ); ?> </div> <!-- container --> </div> <!-- navbar --> </div> <!-- navbar-wrapper -->

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52

   <!-- navbar -->       <div class="navbar-wrapper">       <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">       <div class="container">       <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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> <a class="navbar-brand" href="<?php echo esc_url( home_url( '/' ) ); ?>" title='<?php echo esc_attr( get_bloginfo( 'description', 'display' ) ); ?>' rel='home' >          <img src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/logosmall.png" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"> </a> </div>       <!-- navbar-header --> <?php wp_nav_menu( array( 'theme_location' => 'primary', 'container' =>'nav', 'container_class' => 'navbar-collapse collapse', 'menu_class' => 'nav navbar-nav navbar-right' ) ); ?> </div>       <!-- container --> </div>       <!-- navbar --> </div>       <!-- navbar-wrapper -->

2. Register new menu at function.php and copy the following code below

   // This theme uses wp_nav_menu() in one location. register_nav_menus( array( 'primary' => esc_html__( 'Primary', 'azoncastv2' ), ) );

   1 2 3 4

   // This theme uses wp_nav_menu() in one location. register_nav_menus( array( 'primary' => esc_html__( 'Primary', 'azoncastv2' ), ) );

3. Open footer.php and copy the following code below

   <!-- BOOTSTRAP CORE JAVASCRIPT --> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

   1 2 3 4 5

   <!-- BOOTSTRAP CORE JAVASCRIPT --> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

4. Create new WordPress menu and set theme location at “Primary”. Save the menu!.

   

5. Please see the results in your browser

   

   

For the complete Sourcecode please download at the following links

source code Bootstrap Menu in WordPress Theme

I am so waiting for your suggestions about this article, hopefully can be a new lesson for me. Please comment in the form below.So the tutorial how to easily transfers bootstrap navbar menu to wordpress theme, hope useful

The following two tabs change content below.

• Bio
• Latest Posts

Sigit Prasetya Nugroho

This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

Latest posts by Sigit Prasetya Nugroho (see all)

• Tutorial CRUD Client and API Server Using JQuery And Lumen Part 1 - January 4, 2019
• How To Solve Problems Illegal mix of collations (latin1_swedish_ci,IMPLICIT) In Laravel - December 15, 2018
• Tutorial Create Todolist App With Vue Js 2 For Beginners - September 29, 2018