WordPress Theme Development with Bootstrap Navigation

Let’s continue on our journey of developing our custom WordPress theme

In the video above I demonstrate how to incorporate the bootstrap navigation and drop-down effect with the underscores started theme. This can be a tricky feature to implement since the way bootstrap handles navigation doesn’t typically work well with the way WordPress handles navigation by default. But there is always a work around.

Another thing is that by default the bootstrap navigation drop-down is activated when clicked not hovered over. So I also show you how, with a little bit of JavaScript and CSS, we can achieve a hover effect for your navigation.

In the video I also show you how to add a scroll to top feature which enhances the user experience when a person is on your website. While there are plenty of plugins that can add this functionality for you, it’s so easy to do with a little bit of JavaScript and CSS, that installing and maintaining another plugin is not necessary.

You will also notice that I’m using a different code editor in the video demonstration from what I’ve used in the past. For years I’ve been using the Atom text editor which provides the functionality and productivity enhancements most developers would need.
But recently, I started using the Visual Studio code editor which has a lot of great features built into it. While I’m still you new to using the Visual Studio code editor, it’s very easy to use once installed and there’s a lot of documentation that can guide you along the way. Once I get more familiar with the text editor I will do a demonstration comparing the Atom text editor versus Visual Studio code.

Watch the video above so you can see how to effectively utilize the bootstrap navigation with the underscores started theme. If you want to get the files and folders that I’m working with, you can find them right here at DevWP

Hopefully you find the video helpful.