MyPage is a personalized page based on your interests.The page is customized to help you to find content that matters you the most.


I'm not curious

Integrate Bootstrap Navbar to Speed-up Wordpress Theme Development

Published on 20 May 15
958
0
2
Integrate Bootstrap Navbar to Speed-up Wordpress Theme Development - Image 1

There are many instances when you want to speed-up the theme development process, and look out for ways to do it. One of the easiest methods to speed-up theme development is including bootstrap components to your wordpress theme. Here you will learn how to integrate bootstrap navbar in your Wordpress theme to speed-up the overall theme development process.

Code with Bootstrap Framework
First you will need to introduce the code for bootstrap framework before you integrate navbar. You will need to initiate the code into the navigation bar

<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>

Let's try and understand major portions of the code that will help towards integration.

<nav role="navigation">â¦</nav>

In this code, the tag âa<nav> with the class <navbar> wraps the content meant for navigation bar

<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-ex1-collapse">â¦</button>

This button helps collapse content on the screen. This is an important button, and you can easily change the content within the button

<ul class="nav navbar-nav">â¦</ul>

This code represents the site navigation, which is the main component in here.

Integrate the Navbar to the Template
The assumption made while writing this code is that you have installed the Wordpress theme and have activated it too

Start with registering your navigation bar to the functions.php file

<?php
/* Theme setup */
add_action( 'after_setup_theme', 'wpt_setup' );
if ( ! function_exists( 'wpt_setup' ) ):
function wpt_setup() {
register_nav_menu( 'primary', __( 'Primary navigation', 'wptuts' ) );
} endif;
?>

Next, register the different bootstrap files as well as the jQuery file to this path

function wpt_register_js() {
wp_register_script('jquery.bootstrap.min', get_template_directory_uri() . '/js/bootstrap.min.js', 'jquery');
wp_enqueue_script('jquery.bootstrap.min');
}
add_action( 'init', 'wpt_register_js' );
function wpt_register_css() {
wp_register_style( 'bootstrap.min', get_template_directory_uri() . '/css/bootstrap.min.css' );
wp_enqueue_style( 'bootstrap.min' );
}
add_action( 'wp_enqueue_scripts', 'wpt_register_css' );

Download the wp-bootstrap-navwalker and store it in the theme's root folder. Now paste the code below in the functions.php file

<?php // Register custom navigation walker
require_once('wp_bootstrap_navwalker.php');
?>

Now that your frontend work is done, let's move to the backend. You will need to create a menu in the backend as well.

Go to Appearance>Menu>Create New Menu>Manage Locations. Assign primary location to the new menu created and save it.

Finally you will need to integrate the navigation bar into your template

Go to header.php and replace

<a class="navbar-brand" href="#">Brand</a>

With

<a class="navbar-brand" href="<?php bloginfo('url')?>"><?php bloginfo('name')?></a>

Replace mock-up menu with output menu in the backend

Replace the following

<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>

With

<?php /* Primary navigation */
wp_nav_menu( array(
'menu' => 'top_menu',
'depth' => 2,
'container' => false,
'menu_class' => 'nav',
//Process nav menu using our custom nav walker
'walker' => new wp_bootstrap_navwalker())
);
?>
With these steps followed judiciously, you have integrated the bootstrap navbar to your Wordpress theme. Now, you can get started with integrating other components, as per your need.



Conclusion
Bootstrap components help in speeding up the process of theme development, which is highly important for your Wordpress website. Installing a theme and activating it while ensuring a good user interface is a job well done when you have the right bootstrap components. Here you learnt how to integrate the bootstrap navbar for intuitive navigation.

Note: Backing up your data before customizing is a must






































































































































Integrate Bootstrap Navbar to Speed-up Wordpress Theme Development - Image 1

There are many instances when you want to speed-up the theme development process, and look out for ways to do it. One of the easiest methods to speed-up theme development is including bootstrap components to your wordpress theme. Here you will learn how to integrate bootstrap navbar in your Wordpress theme to speed-up the overall theme development process.

Code with Bootstrap Framework
First you will need to introduce the code for bootstrap framework before you integrate navbar. You will need to initiate the code into the navigation bar

Toggle navigation

Brand



Let's try and understand major portions of the code that will help towards integration.

â¦

In this code, the tag âa with the class wraps the content meant for navigation bar

â¦

This button helps collapse content on the screen. This is an important button, and you can easily change the content within the button



This code represents the site navigation, which is the main component in here.

Integrate the Navbar to the Template
The assumption made while writing this code is that you have installed the Wordpress theme and have activated it too

Start with registering your navigation bar to the functions.php file

This blog is listed under Open Source and Development & Implementations Community

Related Posts:
Post a Comment

Please notify me the replies via email.

Important:
  • We hope the conversations that take place on MyTechLogy.com will be constructive and thought-provoking.
  • To ensure the quality of the discussion, our moderators may review/edit the comments for clarity and relevance.
  • Comments that are promotional, mean-spirited, or off-topic may be deleted per the moderators' judgment.
You may also be interested in
Awards & Accolades for MyTechLogy
Winner of
REDHERRING
Top 100 Asia
Finalist at SiTF Awards 2014 under the category Best Social & Community Product
Finalist at HR Vendor of the Year 2015 Awards under the category Best Learning Management System
Finalist at HR Vendor of the Year 2015 Awards under the category Best Talent Management Software
Hidden Image Url

Back to Top