• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
seegatesite header

Seegatesite.com

Seegatesite.com - Programming Tutorial , Sharing , How and Learn Together

  • TOOLS
    • Bootstrap Navbar Online Generator
    • Customize Sidebar Menu Bootstrap 3
    • Bootstrap Demo
  • ADVERTISE
  • CATEGORIES
    • Android
    • Blogging Tips
    • Database
    • CSS
    • Info Gadget
    • Javascript
    • Linux
    • PHP
    • Various
    • WordPress
  • Q&A
  • PHP
  • JAVASCRIPT
  • JQUERY
  • ANGULAR
  • WORDPRESS
  • SEO
  • REACT
🏠 » Wordpress » How to Easily Transfers a Bootstrap Menu in Wordpress Theme Part 2

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

By Sigit Prasetya Nugroho ∙ July 9, 2016 ∙ Wordpress ∙ 4 Comments

Share : TwitterFacebookTelegramWhatsapp

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

    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

    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

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

    How To Easily Implement A Bootstrap Menu In WordPress Theme Part 2

  5. Please see the results in your browser

    Result Transfer Bootstrap Navbar Menu In WordPress Theme

    Responsive Navbar Menu Bootstrap Transfer To WordPress Menu

For the complete Sourcecode please download at the following links

Related Articles :

  • Upgrade Responsive Bootstrap Table Using Footable Plugin
  • [Resolved] SweetAlert Prompt Not Working On Modal Dialog Bootstrap In Firefox
  • Change Bootstrap Modal Dialog Effect With Animate.css

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

Another WordPress Related Post :

  • How To Create The Fastest Social Share Button WordPress Without Plugin
  • Create WordPress Slider Without Javascript
  • The Point Responsive WordPress Theme For Blogging
  • The Doctors Free WordPress Responsive Theme For Medical
  • Develop Your Site With Start Blogging The Responsive WordPress Theme
  • Zerius Theme The Free WordPress Responsive Theme

Avatar for Sigit Prasetya Nugroho

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

Reader Interactions

Comments

  1. Avatar for Janet FullerJanet Fuller says

    August 16, 2016 at 10:14 am

    Thank You, Sigit Prasetya for helping us by showing step by step tutorial with coding. This is very informative and important for the developers.

    Reply
  2. Avatar for Agent BlackhatAgent Blackhat says

    September 8, 2016 at 11:58 am

    Hi, your code helped me greatly. However I also stumbled onto a fix for your problem.

    I think you missed out a div.

    Here is the amended code, my navbar has a working dropdown and responsive button which drops down now.

    http://pastebin.com/AmdGcjGE

    Let me know if this works, I don;t think I missed anything out.

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      September 9, 2016 at 2:15 am

      I think the problem is we need wp_bootstrap_navwalker to create dropdown navbar 🙂

      Reply
  3. Avatar for Gregory LucyGregory Lucy says

    February 5, 2017 at 12:44 pm

    Hi Sigit Prasetya Nugroho,

    Many thanks for your step by step guidance of coding. It’s really helpful to the developers.

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Welcome to my Home,

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



Popular Articles

Checked checkbox AdminLTE Bootstrap in Jquery

November 4, 2014 By Sigit Prasetya Nugroho 7 Comments

Simple create date format validation with jqueryUI

December 21, 2014 By Sigit Prasetya Nugroho Leave a Comment

Create Simple Progress Bar for Fake Online Generator with Jquery

January 10, 2015 By Sigit Prasetya Nugroho Leave a Comment

22+ Coolest Free Jquery Plugin For Premium Theme

October 3, 2015 By Sigit Prasetya Nugroho Leave a Comment

Easy Build Your Anti Copy Paste Plugin

October 6, 2015 By Sigit Prasetya Nugroho Leave a Comment

Popular Tags

adminlte (15) adsense (13) adsense tips (4) affiliate amazon (13) amazon (12) Android (8) angular (16) angular 4 (12) angular 5 (4) asin grabber (3) Bootstrap (27) codeigniter (5) create wordpress theme (5) crud (8) css (6) free wordpress theme (7) google adsense (4) imacros (4) increase traffic (6) jquery (34) laravel (10) laravel 5 (5) learn android (5) lumen api (4) modal dialog (5) mysql (6) nodeJs (4) optimize seo (4) pdo (6) php (30) plugin (53) pos (8) Publisher Tips (5) react (6) Reactjs (9) SEO (37) theme (17) tutorial angular (5) tutorial angular 4 (6) tutorial javascript (10) tutorial javascript beginners (4) twitter (3) wordpress (18) wordpress plugin (13) XMLRPC (5)




  • About
  • Contact Us
  • Disclaimer
  • Privacy Policy
  • Terms and Conditions

©2022 Seegatesite.com