{"id":1104,"date":"2015-11-04T07:21:43","date_gmt":"2015-11-04T15:21:43","guid":{"rendered":"http:\/\/internetofhomethings.com\/homethings\/?p=1104"},"modified":"2015-11-04T07:25:24","modified_gmt":"2015-11-04T15:25:24","slug":"plugin-free-wordpress-bootstrap","status":"publish","type":"post","link":"https:\/\/internetofhomethings.com\/homethings\/?p=1104","title":{"rendered":"Plugin Free WordPress Bootstrap"},"content":{"rendered":"

\"glycon\"<\/a><\/p>\n

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.<\/p>\n

How could it happen?<\/p>\n

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\u00a03-bar button for smartphones and small user browser windows-and expanding for larger screens. But\u00a0then recently, it just stopped working.<\/p>\n

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.<\/p>\n

And fast!<\/p>\n

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.<\/p>\n

Perhaps this guide may be of use to someone who encounters a similar situation…<\/p>\n

Installing Bootstrap into a WordPress Site<\/strong><\/h4>\n

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\u00a0getbootstrap.com<\/a>\u00a0and click on the “Download Bootstrap” button to get the needed files. The second download button looks like this:<\/p>\n

\"download\"<\/a><\/p>\n

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\u00a0from this site<\/a>.<\/p>\n

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.<\/p>\n

[wptg_comparison_table id=”8″]<\/p>\n

The next thing to do is to modify \u00a0your 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\u00a0for each theme used.<\/p>\n

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():<\/p>\n

 function\u00a0<your theme name>_of_styles()\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0wp_register_style(\u00a0'bootstrap',\u00a0get_template_directory_uri()\u00a0.\u00a0'\/css\/bootstrap.min.css'\u00a0);\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0wp_register_style(\u00a0'bootstraptheme',\u00a0get_template_directory_uri()\u00a0.\u00a0'\/css\/bootstrap-theme.min.css'\u00a0);\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.\r\n       .\r\n       .\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0wp_enqueue_style(\u00a0'bootstrap'\u00a0);\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0wp_enqueue_style(\u00a0'bootstraptheme'\u00a0);\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.\r\n       .\r\n       .\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\r\n}<\/pre>\n
Similarly, the Jquery files need to be included when\u00a0WordPress 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.<\/p>\n
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:<\/p>\n
 function\u00a0ld_bootstrap_js()\u00a0{\r\n\u00a0\u00a0\u00a0echo\u00a0'<script\u00a0src=\"\/js\/jquery-2.1.4.min.js\"><\/script>';\r\n\u00a0\u00a0\u00a0echo\u00a0'<script\u00a0src=\"\/js\/bootstrap.min.js\"><\/script>';\r\n}<\/pre>\n
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:<\/p>\n
   .\r\n   .\r\n   <link rel=\"stylesheet\" type=\"text\/css\" media=\"all\" href=\"<?php echo get_stylesheet_uri(); ?>\" \/>\r\n\r\n   <?php\u00a0ld_bootstrap_js();\u00a0?>\r\n\u00a0\u00a0\u00a0.\u00a0\u00a0\u00a0\r\n   .\r\n<\/head><\/pre>\n
That’s it. Not really that difficult once you know how. With these changes, your WordPress website will support a responsive bootstrap navigation bar.<\/p>\n
In Closing<\/strong><\/h4>\n
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.<\/p>\n","protected":false},"excerpt":{"rendered":"
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 …<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,3],"tags":[86,87],"class_list":["post-1104","post","type-post","status-publish","format-standard","hentry","category-alltheposts","category-web-coding-tips","tag-bootstrap-for-wordpress","tag-wordpress-bootstrap-without-plugin"],"_links":{"self":[{"href":"https:\/\/internetofhomethings.com\/homethings\/index.php?rest_route=\/wp\/v2\/posts\/1104","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/internetofhomethings.com\/homethings\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/internetofhomethings.com\/homethings\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/internetofhomethings.com\/homethings\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/internetofhomethings.com\/homethings\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1104"}],"version-history":[{"count":13,"href":"https:\/\/internetofhomethings.com\/homethings\/index.php?rest_route=\/wp\/v2\/posts\/1104\/revisions"}],"predecessor-version":[{"id":1119,"href":"https:\/\/internetofhomethings.com\/homethings\/index.php?rest_route=\/wp\/v2\/posts\/1104\/revisions\/1119"}],"wp:attachment":[{"href":"https:\/\/internetofhomethings.com\/homethings\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1104"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/internetofhomethings.com\/homethings\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1104"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/internetofhomethings.com\/homethings\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1104"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}