{"id":4434,"date":"2015-07-10T05:39:34","date_gmt":"2015-07-10T05:39:34","guid":{"rendered":"http:\/\/a1webdesignteam.com\/blog\/?p=4434"},"modified":"2015-07-10T05:39:34","modified_gmt":"2015-07-10T05:39:34","slug":"how-to-integrate-bootstrap-navbar-in-wordpress","status":"publish","type":"post","link":"https:\/\/a1webdesignteam.com\/blog\/how-to-integrate-bootstrap-navbar-in-wordpress\/","title":{"rendered":"How to Integrate Bootstrap Navbar In WordPress"},"content":{"rendered":"

Code Your Navigation Bar With the Bootstrap Framework<\/h2>\n

Here is source code from Bootstrap documentation page:<\/p>\n

\n
\n\n\n\n
\n
01<\/div>\n
02<\/div>\n
03<\/div>\n
04<\/div>\n
05<\/div>\n
06<\/div>\n
07<\/div>\n
08<\/div>\n
09<\/div>\n
10<\/div>\n
11<\/div>\n
12<\/div>\n
13<\/div>\n
14<\/div>\n
15<\/div>\n
16<\/div>\n
17<\/div>\n
18<\/div>\n
19<\/div>\n
20<\/div>\n
21<\/div>\n
22<\/div>\n
23<\/div>\n
24<\/div>\n
25<\/div>\n
26<\/div>\n
27<\/div>\n
28<\/div>\n<\/td>\n
\n
\n
<nav <\/code>class<\/code>=<\/code>\"navbar navbar-default\"<\/code> role=<\/code>\"navigation\"<\/code>> <\/code><\/div>\n
<!-- Brand <\/code>and<\/code> toggle get grouped <\/code>for<\/code> better mobile display --> <\/code><\/div>\n
\u00a0\u00a0<\/code><div <\/code>class<\/code>=<\/code>\"navbar-header\"<\/code>> <\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code><button type=<\/code>\"button\"<\/code> class<\/code>=<\/code>\"navbar-toggle\"<\/code> data-toggle=<\/code>\"collapse\"<\/code> data-target=<\/code>\".navbar-ex1-collapse\"<\/code>> <\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><span <\/code>class<\/code>=<\/code>\"sr-only\"<\/code>>Toggle navigation<\/span> <\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><span <\/code>class<\/code>=<\/code>\"icon-bar\"<\/code>><\/span> <\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><span <\/code>class<\/code>=<\/code>\"icon-bar\"<\/code>><\/span> <\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><span <\/code>class<\/code>=<\/code>\"icon-bar\"<\/code>><\/span> <\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code><\/button> <\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code><a <\/code>class<\/code>=<\/code>\"navbar-brand\"<\/code> href=<\/code>\"#\"<\/code>>Brand<\/a> <\/code><\/div>\n
\u00a0\u00a0<\/code><\/div> <\/code><\/div>\n
\u00a0\u00a0<\/code><!-- Collect the nav links, forms, <\/code>and<\/code> other content <\/code>for<\/code> toggling --> <\/code><\/div>\n
\u00a0\u00a0<\/code><div <\/code>class<\/code>=<\/code>\"collapse navbar-collapse navbar-ex1-collapse\"<\/code>> <\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code><ul <\/code>class<\/code>=<\/code>\"nav navbar-nav\"<\/code>> <\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><li <\/code>class<\/code>=<\/code>\"active\"<\/code>><a href=<\/code>\"#\"<\/code>>Link<\/a><\/li> <\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><li><a href=<\/code>\"#\"<\/code>>Link<\/a><\/li> <\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><li <\/code>class<\/code>=<\/code>\"dropdown\"<\/code>> <a href=<\/code>\"#\"<\/code> class<\/code>=<\/code>\"dropdown-toggle\"<\/code> data-toggle=<\/code>\"dropdown\"<\/code>>Dropdown <b <\/code>class<\/code>=<\/code>\"caret\"<\/code>><\/b><\/a> <\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><ul <\/code>class<\/code>=<\/code>\"dropdown-menu\"<\/code>> <\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><li><a href=<\/code>\"#\"<\/code>>Action<\/a><\/li> <\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><li><a href=<\/code>\"#\"<\/code>>Another action<\/a><\/li> <\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><li><a href=<\/code>\"#\"<\/code>>Something <\/code>else<\/code> here<\/a><\/li> <\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><li><a href=<\/code>\"#\"<\/code>>Separated link<\/a><\/li> <\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><li><a href=<\/code>\"#\"<\/code>>One more separated link<\/a><\/li> <\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/ul> <\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/li> <\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code><\/ul><\/code><\/div>\n
\u00a0\u00a0<\/code><\/div><\/code><\/div>\n
<\/nav><\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

Let’s have a closer look at the code and clarify things for a better understanding of the next part of the tutorial.<\/p>\n

\n
\n\n\n\n
\n
1<\/div>\n<\/td>\n
\n
\n
<nav role=<\/code>\"navigation\"<\/code>>\u2026<\/nav><\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

Wrapper<\/em> – a <nav><\/code> tag with class “navbar” and role “navigation” wraps the whole content of the navigation bar.<\/p>\n

\n
\n\n\n\n
\n
1<\/div>\n<\/td>\n
\n
\n
<div <\/code>class<\/code>=<\/code>\"navbar-header\"<\/code>>\u2026<\/div><\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

Header<\/em> \u2013 a <div><\/code> with class “navbar-header” which is visible on any size screens.<\/p>\n

\n
\n\n\n\n
\n
1<\/div>\n<\/td>\n
\n
\n
<button <\/code>class<\/code>=<\/code>\"navbar-toggle\"<\/code> type=<\/code>\"button\"<\/code> data-toggle=<\/code>\"collapse\"<\/code> data-target=<\/code>\".navbar-ex1-collapse\"<\/code>>\u2026<\/button><\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

Toggle button<\/em> – a <button><\/code> which represents collapsed content on small screens; this button is a must but you can change content inside it.<\/p>\n

\n
\n\n\n\n
\n
1<\/div>\n<\/td>\n
\n
\n
<a <\/code>class<\/code>=<\/code>\"navbar-brand\"<\/code> href=<\/code>\"#\"<\/code>>Brand<\/a><\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

Brand<\/em> \u2013 a link with the logo; it is optional, you can omit it here and include it elsewhere.<\/p>\n

\n
\n\n\n\n
\n
1<\/div>\n<\/td>\n
\n
\n
<div <\/code>class<\/code>=<\/code>\"collapse navbar-collapse navbar-ex1-collapse\"<\/code>>\u2026<\/div><\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

Collapsible content<\/em> – a <div><\/code> with class “collapse” and “navbar-collapse”; it contains all content which should be collapsed on small screens.<\/p>\n

\n
\n\n\n\n
\n
1<\/div>\n<\/td>\n
\n
\n
<ul <\/code>class<\/code>=<\/code>\"nav navbar-nav\"<\/code>>\u2026<\/ul><\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

Menu<\/em> \u2013 a <ul><\/code> with class “nav navbar-nav” which represents site navigation.<\/p>\n

2.<\/span> Integrate the Mock-Up Into a Template<\/h2>\n

This step assumes that you already have WordPress installed and the theme you’re developing has been activated.<\/p>\n

2.1. Prepare Your Theme for the Menu<\/h3>\n

Open your functions.php<\/span><\/strong> file and register your navigation if you haven’t yet.<\/p>\n

\n
\n\n\n\n
\n
1<\/div>\n
2<\/div>\n
3<\/div>\n
4<\/div>\n
5<\/div>\n
6<\/div>\n
7<\/div>\n
8<\/div>\n<\/td>\n
\n
\n
<?php<\/code><\/div>\n
\/* Theme setup *\/<\/code><\/div>\n
add_action( <\/code>'after_setup_theme'<\/code>, <\/code>'wpt_setup'<\/code> );<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>if<\/code> ( ! function_exists( <\/code>'wpt_setup'<\/code> ) ):<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>function<\/code> wpt_setup() {\u00a0 <\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>register_nav_menu( <\/code>'primary'<\/code>, __( <\/code>'Primary navigation'<\/code>, <\/code>'wptuts'<\/code> ) );<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>} <\/code>endif<\/code>;<\/code><\/div>\n
?><\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

Register bootstrap files and jQuery:<\/p>\n

\n
\n\n\n\n
\n
01<\/div>\n
02<\/div>\n
03<\/div>\n
04<\/div>\n
05<\/div>\n
06<\/div>\n
07<\/div>\n
08<\/div>\n
09<\/div>\n
10<\/div>\n<\/td>\n
\n
\n
function<\/code> wpt_register_js() {<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>wp_register_script(<\/code>'jquery.bootstrap.min'<\/code>, get_template_directory_uri() . <\/code>'\/js\/bootstrap.min.js'<\/code>, <\/code>'jquery'<\/code>);<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>wp_enqueue_script(<\/code>'jquery.bootstrap.min'<\/code>);<\/code><\/div>\n
}<\/code><\/div>\n
add_action( <\/code>'init'<\/code>, <\/code>'wpt_register_js'<\/code> );<\/code><\/div>\n
function<\/code> wpt_register_css() {<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>wp_register_style( <\/code>'bootstrap.min'<\/code>, get_template_directory_uri() . <\/code>'\/css\/bootstrap.min.css'<\/code> );<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>wp_enqueue_style( <\/code>'bootstrap.min'<\/code> );<\/code><\/div>\n
}<\/code><\/div>\n
add_action( <\/code>'wp_enqueue_scripts'<\/code>, <\/code>'wpt_register_css'<\/code> );<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

<\/code> Place the file into theme root folder. Go back to your functions.php<\/span><\/strong> and paste the following code:<\/p>\n

\n
\n\n\n\n
\n
1<\/div>\n
2<\/div>\n
3<\/div>\n<\/td>\n
\n
\n
<?php <\/code>\/\/ Register custom navigation walker<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>require_once<\/code>(<\/code>'wp_bootstrap_navwalker.php'<\/code>);<\/code><\/div>\n
?><\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

2.2. Create a Menu in the Back-End<\/h3>\n

Navigate to your WordPress site back-end Appearance->Menu<\/strong>. Create a new menu called “Primary” and add items to it. Go to tab Manage Locations<\/strong> and for theme location called “Primary” assign the menu “Primary”. Save changes.<\/p>\n

\"Wordpress
WordPress Menu Management Page<\/figcaption><\/figure>\n

2.3. Integrate Navigation Bar Mock-Up Into a Template<\/h3>\n

Open your header.php<\/span><\/strong> and copy & paste the navigation bar mock-up into the place where you want it to appear. Now we replace parts of the mock-up with WordPress’ template functions. Firstly place the correct link for the logo. Change this line:<\/p>\n

\n
\n\n\n\n
\n
1<\/div>\n<\/td>\n
\n
\n
<a <\/code>class<\/code>=<\/code>\"navbar-brand\"<\/code> href=<\/code>\"#\"<\/code>>Brand<\/a><\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

to:<\/p>\n

\n
\n\n\n\n
\n
1<\/div>\n<\/td>\n
\n
\n
<a <\/code>class<\/code>=<\/code>\"navbar-brand\"<\/code> href=<\/code>\"<?php bloginfo('url')?>\"<\/code>><?php bloginfo(<\/code>'name'<\/code>)?><\/a><\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

The next step is to output the menu from the back-end intead of the mock-up Menu. For these lines:<\/p>\n

\n
\n\n\n\n
\n
01<\/div>\n
02<\/div>\n
03<\/div>\n
04<\/div>\n
05<\/div>\n
06<\/div>\n
07<\/div>\n
08<\/div>\n
09<\/div>\n
10<\/div>\n
11<\/div>\n
12<\/div>\n
13<\/div>\n<\/td>\n
\n
\n
<ul <\/code>class<\/code>=<\/code>\"nav navbar-nav\"<\/code>><\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code><li <\/code>class<\/code>=<\/code>\"active\"<\/code>><a href=<\/code>\"#\"<\/code>>Link<\/a><\/li><\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code><li><a href=<\/code>\"#\"<\/code>>Link<\/a><\/li><\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code><li <\/code>class<\/code>=<\/code>\"dropdown\"<\/code>> <a href=<\/code>\"#\"<\/code> class<\/code>=<\/code>\"dropdown-toggle\"<\/code> data-toggle=<\/code>\"dropdown\"<\/code>>Dropdown <b <\/code>class<\/code>=<\/code>\"caret\"<\/code>><\/b><\/a><\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><ul <\/code>class<\/code>=<\/code>\"dropdown-menu\"<\/code>><\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><li><a href=<\/code>\"#\"<\/code>>Action<\/a><\/li><\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><li><a href=<\/code>\"#\"<\/code>>Another action<\/a><\/li><\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><li><a href=<\/code>\"#\"<\/code>>Something <\/code>else<\/code> here<\/a><\/li><\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><li><a href=<\/code>\"#\"<\/code>>Separated link<\/a><\/li><\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><li><a href=<\/code>\"#\"<\/code>>One more separated link<\/a><\/li><\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/ul><\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code><\/li><\/code><\/div>\n
<\/ul><\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

With:<\/p>\n

\n
\n\n\n\n
\n
01<\/div>\n
02<\/div>\n
03<\/div>\n
04<\/div>\n
05<\/div>\n
06<\/div>\n
07<\/div>\n
08<\/div>\n
09<\/div>\n
10<\/div>\n<\/td>\n
\n
\n
<?php <\/code>\/* Primary navigation *\/<\/code><\/div>\n
wp_nav_menu( <\/code>array<\/code>(<\/code><\/div>\n
\u00a0\u00a0<\/code>'menu'<\/code> => <\/code>'top_menu'<\/code>,<\/code><\/div>\n
\u00a0\u00a0<\/code>'depth'<\/code> => 2,<\/code><\/div>\n
\u00a0\u00a0<\/code>'container'<\/code> => false,<\/code><\/div>\n
\u00a0\u00a0<\/code>'menu_class'<\/code> => <\/code>'nav'<\/code>,<\/code><\/div>\n
\u00a0\u00a0<\/code>\/\/Process nav menu using our custom nav walker<\/code><\/div>\n
\u00a0\u00a0<\/code>'walker'<\/code> => <\/code>new<\/code> wp_bootstrap_navwalker())<\/code><\/div>\n
);<\/code><\/div>\n
?><\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

Now you have bootstrap Navbar component integrated into your theme.<\/p>\n","protected":false},"excerpt":{"rendered":"

Code Your Navigation Bar With the Bootstrap Framework Here is source code from Bootstrap documentation page: 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <nav class=”navbar navbar-default” role=”navigation”> <!– Brand and toggle get grouped for […]<\/p>\n","protected":false},"author":34,"featured_media":4435,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0},"categories":[4],"tags":[],"_links":{"self":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts\/4434"}],"collection":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/users\/34"}],"replies":[{"embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/comments?post=4434"}],"version-history":[{"count":0,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts\/4434\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/media\/4435"}],"wp:attachment":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/media?parent=4434"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/categories?post=4434"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/tags?post=4434"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}