Integrate Bootstrap Navbar to Speed-up Wordpress Theme Development
Published on 20 May 15
Semaphore0
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
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>
<!-- 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
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;
?>
/* 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' );
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');
?>
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>
<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())
);
?>
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
This blog is listed under
Open Source
and Development & Implementations
Community
Related Posts:
Post a Comment
