Sunday, July 26, 2015

Convert WordPress Menu to Bootstrap Navigation Menu

WordPress is using for blogging and simple information website, Now every website required responsive for comparable all devices (Mobile, Tablet, Desktop) for that every website, create as responsive site. From that Bootstrap is most known as HTML, CSS and JavaScript platform for developing responsive website. So there are many WordPress free and paid theme available based on bootstrap platform.
When you create your own theme in WordPress using Bootstrap platform that most conman problems is converting WordPress menu to Bootstrap navigation menu. Here display solution for converting WordPress menu to Bootstrap navigation menu without using any extra script or function. Convert WordPress menu to Bootstrap using jQuery.
For download and use Bootstrap see main website http://getbootstrap.com/
Integrate Bootstrap into WordPress website add below script and CSS in header.php file.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Here enter CSS and script path according to Bootstrap path in your theme.
Now create any WordPress menu from admin panel Appearance->Menu.Save that menu with menu name.Now display menu anywhere in website using `wp_nav_menu` function as below.

wp_nav_menu(array('menu'=>'Main menu','menu_class'=>'nav navbar-nav','container'=>''));

Now convert menu to Bootstrap using jQuery.for that add latest jQuery script if not use in theme as below.(In WordPress already define jQuery in `wp_head()` function)
Now add below script for menu.

<script>
jQuery(document).ready(function(){
    jQuery("#menu-header-menu li").each(function(){
     if(jQuery(this).children('ul').length)
  {
   jQuery(this).addClass('dropdown');
   jQuery(this).children('a').addClass('dropdown-toggle');
   jQuery(this).children('a').attr('data-toggle','dropdown');
   jQuery(this).children('ul').addClass('dropdown-menu');
  }
    });
    //This jQuery use for a link redirection in Bootstrap navigation.
    jQuery('ul.nav > li a').click(function(e){
 window.location = jQuery(this).attr("href");
    });
});
</script>
 
Now check website in browser WordPress menu convert into Bootstrap navigation menu.This script use only first level of WordPress menu not use for WordPress M=multi level menu.

No comments :

Post a Comment