How to Convert Bootstrap Navigation bar to Dynamic WordPress Menu
In this Blog Post , i will show you the steps of converting Bootstrap Navigation bar to dynamic WordPress Menu
This post is for WordPress Theme Developer , Web Developer , Webmaster etc.
Step 1
Prior to this you need to make sure the below is being done
(1) local server with WordPress installed on your Computer
if not done check out here
(2) WordPress Theme Development Environment
if not done check out here
Step 2
Download a free COO / MIT license Bootstrap Navbar example Sample Code
You can either go to Bootstrap main site here
or
I found some nice design Bootstrap Navbar sample code here
Step 3
Navigate to
root:\………\wordpress\wp-content\themes\Your Starter Theme Folder \header.php
Look for the header.php File
Original header.php is like as below
<?php /** * The header for our theme * * This is the template that displays all of the <head> section and everything up until <div id="content"> * * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials * * @package minimalsmple */ ?> <!doctype html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="profile" href="https://gmpg.org/xfn/11"> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <div id="page" class="site"> <a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'minimalsmple' ); ?></a> <header id="masthead" class="site-header"> <div class="site-branding"> <?php the_custom_logo(); if ( is_front_page() && is_home() ) : ?> <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1> <?php else : ?> <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a> <?php endif; $minimalsmple_description = get_bloginfo( 'description', 'display' ); if ( $minimalsmple_description || is_customize_preview() ) : ?> <?php echo $minimalsmple_description; /* WPCS: xss ok. */ ?> <?php endif; ?> </div> <!-- .site-branding --> <nav id="site-navigation" class="main-navigation"> <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', 'minimalsmple' ); ?></button> <?php wp_nav_menu( array( 'theme_location' => 'menu-1', 'menu_id' => 'primary-menu', ) ); ?> </nav> <!-- #site-navigation --> </header> <!-- #masthead --> <div id="content" class="site-content">
At step 2 i have downloaded the bootstrap Sample code as below
HTML
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav pull-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<div class="container">
JQuery
$(window).scroll(function() {
if ($(document).scrollTop() > 50) {
$('nav').addClass('shrink');
} else {
$('nav').removeClass('shrink');
}
});
CSS
nav {
.navbar-brand {font-size: 30px;}
.navbar-toggle {margin: 13px 15px 13px 0;}
a {
font-size: 18px;
padding-bottom: 20px !important;
padding-top: 20px !important;
transition: all 0.3s ease;
}
}
nav.navbar.shrink {
min-height: 35px;
.navbar-brand {font-size: 25px;}
a {
font-size: 15px;
padding-bottom: 10px !important;
padding-top: 10px !important;
}
.navbar-toggle {
margin: 8px 15px 8px 0;
padding: 4px 5px;
}
}
Step 4
Now you have identify all the files you need to use for Conversion , lets get started .
Delete everything between <header id=”masthead” class=”site-header”> </header>
After Delete the code looks as below.
<?php
/**
* The header for our theme
*
* This is the template that displays all of the <head> section and everything up until
<div id="content">
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @package minimalsmple
*/
?>
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="https://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page" class="site">
<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'minimalsmple' ); ?></a>
<header id="masthead" class="site-header">
<!-- #site-navigation -->
</header>
<!-- #masthead -->
<div id="content" class="site-content">
Step 5
At the downloaded HTML File copy the Code from <nav class="navbar navbar-inverse navbar-fixed-top"> to </nav >
and paste it between <header id=”masthead” class=”site-header”> to </header > in the header.php file
The code looks as below after the above action.
<?php
/**
* The header for our theme
*
* This is the template that displays all of the <head> section and everything up until
<div id="content">
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @package minimalsmple
*/
?>
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="https://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page" class="site">
<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'minimalsmple' ); ?></a>
<header id="masthead" class="site-header">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav pull-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page</a></li>
<li><a href="#">Link</a></li>
</ul>
</div> <!--/.nav-collapse -->
</div>
</nav>
<!-- #site-navigation -->
</header>
<!-- #masthead -->
<div id="content" class="site-content">
Step 6
Clean up the Header.php code.
Delete the default menu code from the header.php file.
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav pull-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
Step 7
Link the bootstrap.min.css file
Copy the code below:
<link href=”<?php bloginfo(‘stylesheet_directory’); ?>/css/bootstrap.min.css” rel=”stylesheet”>
and paste it any where between <head> </head>
My file located at root:\………\wordpress\wp-content\themes\Your Starter Theme Folder\css\bootstrap.min.css
Note : Your file Location might be different
The code looks as below after the above action. (Step 6 , Step 7)
<?php
/**
* The header for our theme
*
* This is the template that displays all of the <head> section and everything up until
<div id="content">
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @package minimalsmple
*/
?>
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="https://gmpg.org/xfn/11">
<!-- Link BootStrap CSS -->
<link href="<?php bloginfo('stylesheet_directory'); ?>/css/bootstrap.min.css" rel="stylesheet">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page" class="site">
<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'minimalsmple' ); ?></a>
<header id="masthead" class="site-header">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<!-- #site-navigation -->
</header>
<!-- #masthead -->
<div id="content" class="site-content">
Step 8
Delete the existing <a class="navbar-brand" href="#">Logo</a> and replace by the code below
<a class=”navbar-brand” href=”<?php echo esc_url( home_url( ‘/’ ) ); ?>”><img src=”<?php bloginfo(‘stylesheet_directory’); ?>/img/” alt=””></a>
You can add an image file of your brand name at /img” ,
I don’t have any, so i didn’t add.
Step 9
Add the wp_nav _menu() Function
to point wordpress menu to the Specific Class and function
Note: Bootstrap Navbar needs WP_Bootstrap_Navwalker() to function properly
later down the steps i will show you how to set up Navwalker , for now just paste the below code before the Conatainer Div Tag
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'container' => 'nav', 'container_class' => 'navbar-collapse collapse', 'menu_class' => 'nav navbar-nav navbar-right', 'walker' => new WP_Bootstrap_Navwalker(), ) ); ?>
After completing Step 8 and Step 9 the code look as below , remember to save your code
<?php
/**
* The header for our theme
*
* This is the template that displays all of the <head> section and everything up until
<div id="content">
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @package minimalsmple
*/
?>
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="https://gmpg.org/xfn/11">
<!-- Link BootStrap CSS -->
<link href="<?php bloginfo('stylesheet_directory'); ?>/css/bootstrap.min.css" rel="stylesheet">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page" class="site">
<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'minimalsmple' ); ?></a>
<header id="masthead" class="site-header">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<!--/.nav-collapse -->
<?php wp_nav_menu( array( 'theme_location' => 'primary',
'container' => 'nav',
'container_class' => 'navbar-collapse collapse',
'menu_class' => 'nav navbar-nav navbar-right',
'walker' => new WP_Bootstrap_Navwalker(),
) );
?>
</div>
</nav>
<!-- #site-navigation -->
</header>
<!-- #masthead -->
<div id="content" class="site-content">
Step 10
Wao , give yourself an applause , i am glad you made this far. you have completed the header.php file modification
At this Step , download Nav Walker Here
and move the file into your theme root directory
root:\………\wordpress\wp-content\themes\Your Starter Theme Folder \
Step 11
Copy the CSS Style code ,
go to your theme root folder , look for the style.css file and paste the code inside
root:\………\wordpress\wp-content\themes\Your Starter Theme Folder \style.css
Step 12
Make sure your nav menu is registered in the function.php file
root:\………\wordpress\wp-content\themes\Your Starter Theme Folder \function.php
if not paste the code below into the Function PHP file
Note : Your theme name might be different ( My theme name is” minimalsmple”)
register_nav_menus( array( 'primary' => __( 'Primary Menu', 'minimalsmple' ), 'footer' => __( 'Footer Menu', 'minimalsmple' ), ) );
Step 13
(1) Enque Bootstrap.min.js
(2) Copy the Jquery Code you downloaded save as navigation .js and Enque it in function.php file
Enque (1) and (2) in function.php file
Note : Your file location might be different and your theme name might be different ( My theme name is” minimalsmple”)
function minimalsmple_scripts() {
wp_enqueue_style( 'minimalsmple-style', get_stylesheet_uri() );
wp_enqueue_script( 'minimalsmple-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20151215', true );
wp_enqueue_script ('bootstrap_js', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), 1.1, true );
wp_enqueue_script( 'minimalsmple-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20151215', true );
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
}
add_action( 'wp_enqueue_scripts', 'minimalsmple_scripts' );
Step 14
(1) Congratulation you have complete all steps Login into Word Press and test it out.
Step 15
(1) Finally study the code line by line ,to understand how it works. Frankly speaking i can’t explain everything in one blog. The main purpose of this blog is to learn “How to Convert Bootstrap Navigation bar to Dynamic WordPress Menu “not how PHP works in contrary
(2) You might need to further study on that.
(3) I attached the link Here . For your further reference
Leave a Reply