There can be multiple reasons why it may not be working.
Possibility-1: You are adding the CSS file in a child theme. In that case, use the following CODE instead:
function theme_styles_and_scripts() {
wp_enqueue_style( 'bootstrap', get_stylesheet_directory_uri() . '/css/bootstrap.min.css', array(), '3.3.6', 'all' );
}
add_action( 'wp_enqueue_scripts', 'theme_styles_and_scripts' );
get_stylesheet_directory_uri()
returns the URL of your current theme (whether it is a child theme or not). On the other hand, get_template_directory_uri()
returns the parent theme URL if you are using a child theme & the current theme URL only if the active theme is not a child theme of another theme.
Possibility-2: You are not calling wp_head()
anywhere in your theme’s template files (usually header.php
). However, if you are modifying any standard theme, then this is not the likely case, as any standard theme will not make this mistake.
Other Possibilities:
However, if you view HTML source & see that you are finding bootstrap
in it, then perhaps another call to wp_enqueue_style
with the same name is overriding it (as suggested by this answer) or perhaps your CSS is being added, but some other CSS is overriding your CSS rules.
How to Debug:
An easy way to debug this issue is to create a simple CSS file with the following CSS CODE:
body {
background-color: red !important;
}
Then save the CSS file in your theme’s css
folder with the name wpse256672-style.css
.
Then use the following CODE in your theme’s functions.php
file:
function wpse256672_css_enqueue() {
wp_enqueue_style( 'wpse256672_css', get_stylesheet_directory_uri() . '/css/wpse256672-style.css', array(), '1.0.0', 'all' );
}
add_action( 'wp_enqueue_scripts', 'wpse256672_css_enqueue' );
Now if you reload the page after saving the above, you should see red background in your page. That means you don’t have Possibility-2
above, but perhaps Possibility-1
or something else. Change CSS file name, $handle
from bootstrap
to something else, change version number, check if the file exists etc.
Note: If you have cache plugin activated, clear cache first & then clear browser cache before doing the above tests.