Adding Bootstrap to WordPress TwentySixteen Theme

admin管理员组

文章数量:1130349

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>

• theme-development
• themes
• twitter-bootstrap
• theme-twenty-sixteen

Share Improve this question edited Apr 20, 2016 at 6:07 prosti 4,32344 gold badges2626 silver badges4545 bronze badges asked Apr 19, 2016 at 20:41 sargeantosargeanto 911 silver badge22 bronze badges 2

• 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

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 1

If 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

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>

• theme-development
• themes
• twitter-bootstrap
• theme-twenty-sixteen

Share Improve this question edited Apr 20, 2016 at 6:07 prosti 4,32344 gold badges2626 silver badges4545 bronze badges asked Apr 19, 2016 at 20:41 sargeantosargeanto 911 silver badge22 bronze badges 2

• 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

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 1

If 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

本文标签： Adding Bootstrap to WordPress TwentySixteen Theme