WordPress Theme Development From Scratch Part 2 : Create a B...

WordPress Theme Development From Scratch Part 2 : Create a Bootstrap Dropdown Menu Using wp-bootstrap-navwalker

Category: WordPress   Updated by Ryan Dhungel



In this Wordpress theme development from scratch series part 2, We will be creating a bootstrap dropdown menu using wp bootstrap navwalker. To be able to use bootstrap specific navigation system in WordPress we need to download a class called wp-bootstrap-navwalker from github. Before we dive right into it, Let's recap what we learned in the Part 1.

We learned how to start creating a theme with just index page and a stylesheet. Then we started to break down the template and make things load dynamically and control from the WordPress admin. We did seperate header and footer from the main template too. Now let's implement a dynamic dropdown menu to our header section.

Requirement


Goals

  • Use bootstrap dropdown menu with WordPress
  • Create WordPress functions
  • Download and use php functions from github repository and use in your project
  • Be able to create / update menu from WordPress admin dashboard


Using wp-bootstrap-navwalker in WordPress

We will be using wp bootstrap navwalker function from github repository that will let us implement bootstrap dropdown navigation system in our WordPress theme. The first thing we need to do is head over to github and download wp-bootstrap-navwalker.

Extract the zip file that you just download. There you will find wp-bootstrap-navwalker.php file. Copy that file and paste inside your theme folder. Your directory structure should look something like this:

wp-contents/themes/wpbootstrap/wp-bootstrap-navwalker.php


Createing theme functions

It is time for us to create functions.php file inside our theme folder. We will be writting all the functions inside this file.

The first thing we need to do is require the wp-bootstrap-navwalker file. Make sure you have the opening <?php tag at the begining of the file.

See the code below:

<?php 
// Register Custom Navigation Walker
require_once('wp_bootstrap_navwalker.php');


Now we are going create a function to add theme support for our bootstrap navigation. You will also notice that we are using double underscore __ which is a WordPress function for localization that you can use to wrap your static text around.

// Add theme support to bootstrap navigation
function my_theme_setup()
{
    register_nav_menus(array(
        'primary' => __('Primary Menu')
        ));
}
add_action('after_setup_theme', 'my_theme_setup');


We have also added add_action function in order to make this theme_setup function work. What it does is hook into WordPress and tells WordPress when and where to fire up this function. There are a lot of hooks available to use, you can read more on WordPress codex. For this instance we used after_setup_theme, followed by our function name.

Using bootstrap navigation

Now let's head back to the wp-bootstrap-navwalker github page and copy the wp_nav_menu function. Feel free to read through the entire page to get a better understanding.

Here is the code to copy:

<?php
    wp_nav_menu( array(
        'menu'              => 'primary',
        'theme_location'    => 'primary',
        'depth'             => 2,
        'container'         => 'div',
        'container_class'   => 'collapse navbar-collapse',
        'container_id'      => 'bs-example-navbar-collapse-1',
        'menu_class'        => 'nav navbar-nav',
        'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
        'walker'            => new wp_bootstrap_navwalker())
    );
?>


Now go to header.php and replace all the blog-nav-item within nav tag such as <a class="blog-nav-item active" href="#">Home</a> with the code above.

Now if you reload your page, you will see a menu that says Add a menu. That is because we have not assigned any menu yet. You can click on Add a menu or simply go to the admin Appearance/Menus and create a new menu. Give it a name and add some custom links if you want to and choose Primary Menu from the Menu Settings and save.

Now if you go the front page and reload it again, you will see that you have your menu working. However we need to sytle our menu a bit, It is barely visable.


Styling the navbar

We have made the bootstrap navigation working, which is great. Lets change the font color to white and also add white background color on hover. We want to make it look good.

Add the following css to your style.css

.blog-nav a{
  color: #fff;
}

.blog-nav li a:hover{
  background-color: #fff;
  color: #428bca;
}


Now our menu looks good. Let's see if we can use dropdown menu or not.

Go to WordPress admin and create some pages just for testing. Once you created few pages, go to Appearance/Menus, select those new pages and click on add to menu. Now put them below any other menu title and slightly drag towards right and leave. Now they are within the parent page title.

Go and reload the front page to see your dropdown menu. Oopps! It's not working. But it is an easy fix.

Go to your footer.php and find the code below, which is pointing to bootstrap.js.

<script src="/js/bootstrap.min.js"></script>


That will no longer work. We need to let WordPress find it in the dynamically using the bloginfo template function instead. Use the code below instead.

<script src="<?php bloginfo('template_url'); ?>/js/bootstrap.js"></script>


Now you should have dropdown menu working great.

Conclusion

In this part, we successfully implemented a bootstrap navigation system to our theme. We also touched a bit on functions. We will learn more about the functions in future tutorials. In the next part, we will learn how to loop through blog posts, post meta such as published date, author name etc, excerpt and featured image.  I hope you are making good progress. Don't forget to leave your comments below.

If you encountered any issues along the way, you can also use our forum to get help.

Download source code from github



Back to articles