How can I add Bootstrap to the Wordpress TwentySixteen Theme without using a plugin? I've tried linking to the stylesheets and scripts within the header/footer, however the theme seems to override something, and I'm unable to get different Bootstrap elements to work on specific pages. For instance, I've tried to get the clickable tabs to work, but no luck.
I've tried using the following code: /
While adding the CSS to the header and JS to the footer file:
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
How can I add Bootstrap to the Wordpress TwentySixteen Theme without using a plugin? I've tried linking to the stylesheets and scripts within the header/footer, however the theme seems to override something, and I'm unable to get different Bootstrap elements to work on specific pages. For instance, I've tried to get the clickable tabs to work, but no luck.
I've tried using the following code: http://jsfiddle/xfw8t/12/
While adding the CSS to the header and JS to the footer file:
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
- Why would you want bootstrap on top of TwentySixteen? Bootstrap is best suited to build stuff based on it. Introducing it to existing codebase is most likely going to break it. Consider choosing a more suitable starting theme like github/roots/sage. – Z. Zlatev Commented Apr 19, 2016 at 20:56
- Zlatev is on the money. If it's just tabs you want, maybe look into something else rather than Bootstrap. Potentially jQuery UI tabs, but that will probably need a little bit of work to integrate it into TwentySixteen as well. Welcome to WPSE btw! – Tim Malone Commented Apr 19, 2016 at 21:11
2 Answers
Reset to default 1If you want to link stylesheets and scripts in wordpress,the correct way is to use wp_enqueue_style() and wp_enqueue_scripts() in your functions.php file
Try this in your functions.php file
wp_enqueue_style('bootstrap-css',get_template_directory_uri().'/bootstrap/css/bootstrap.min.css');
wp_enqueue_script('jquery',get_template_directory_uri().'/scripts/jquery.min.js');
wp_enqueue_script('bootstrap-js',get_template_directory_uri().'/bootstrap/js/bootstrap.min.js');
Swopnil Dangol is correct, However seeing that you are editing a standard wordpress theme in the first place with bootstrap i would not bother
the below answer is the for lazy man.
php echo get_template_directory_uri(); ?>
infront of the urls