Bootstrap Plugins for WordPress are great for extending functionality and style without much coding. That is, until something breaks. There is nothing more frustrating than dealing with a website that is broken when you have not changed anything.
How could it happen?
I really don’t know. And while there are many great Bootstrap plugins for WordPress, I was depending on one of the most popular plugins (not mentioning names here) to support my responsive navigation menu. Worked great for almost a year, collapsing to the well-known 3-bar button for smartphones and small user browser windows-and expanding for larger screens. But then recently, it just stopped working.
It did not make sense. All I had done over the past few weeks was add a few posts to the site. That should have no effect on the navigation menu. Deactivating and reinstalling the plugin did not help. Yet the site needed to be fixed.
And fast!
After taking the “insanity” route for hours…trying the same things over and over with no improvement, I decided to delete the plugin and add Twitter Bootstrap manually to my WordPress site. While everything did not go smoothly at first, I did manage to restore my site’s bootstrap features. This time, without the non-transparent layer of a plugin.
Perhaps this guide may be of use to someone who encounters a similar situation…
Installing Bootstrap into a WordPress Site
First thing to do is to get the bootstrap files. I was unsuccessful in pointing to the CDN files so the actual files were downloaded and installed on the site. Go to getbootstrap.com and click on the “Download Bootstrap” button to get the needed files. The second download button looks like this:
You will also need the Jquery file, even if it is already installed as a WordPress plugin. As of this writing, Jquery is at version 2.1.4 and can be downloaded from this site.
It is important to copy the files to your WordPress theme folder as shown in the following table. It will not work if copied to a different directory.
| File Name | WordPress Folder | ||
|---|---|---|---|
| bootstrap.min.css | |||
| bootstrap-theme.min.css | |||
| bootstrap.min.js | |||
| jquery-2.1.4.min.js |
The next thing to do is to modify your themes functions.php file. This will make bootstrap functional within your WordPress theme. unfortunately, since functions.php is unique for each theme, the modifications must be made separately for each theme used.
Let’s first include the bootstrap style sheets when WordPress starts up. That is simply a matter of adding the following two “wp_register_style” and “wp”enqueue_style” lines to the function <your theme name>_of_styles():
- function <your theme name>_of_styles() {
- wp_register_style( 'bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css' );
- wp_register_style( 'bootstraptheme', get_template_directory_uri() . '/css/bootstrap-theme.min.css' );
- .
- .
- .
- wp_enqueue_style( 'bootstrap' );
- wp_enqueue_style( 'bootstraptheme' );
- .
- .
- .
- }
Similarly, the Jquery files need to be included when WordPress starts up. This, however needs to be handled differently. That is because these files need to be introduced just before the bootstrap navigation bar html code is added, not when WordPress starts up.
This requires the addition of a new function to the functions.php file. Since the code is php, it simply echos the html script tags used to include the files. It is important for the jquery file to be listed before bootstrap:
- function ld_bootstrap_js() {
- echo '<script src="/js/jquery-2.1.4.min.js"></script>';
- echo '<script src="/js/bootstrap.min.js"></script>';
- }
As noted, this function needs to be called just before the navigation bar menu is introduced. This requires a change to one more theme file, “header.php”. Add the call just after the stylesheet in this file:
- .
- .
- <link rel="stylesheet" type="text/css" media="all" href="<?php echo get_stylesheet_uri(); ?>" />
- <?php ld_bootstrap_js(); ?>
- .
- .
- </head>
That’s it. Not really that difficult once you know how. With these changes, your WordPress website will support a responsive bootstrap navigation bar.
In Closing
While you may never have any problems using a bootstrap plugin, you might want to keep this information handy, just in case it fails you. This will bring your site back on line quickly. Independent of a third-party plug-in.
Share This:
