In order to use Bootstrap inside WordPress themes, it is recommended to add codes to functions.php.
First, the completed code is below.
Here, it is used in functions.php so that Bootstrap's CSS, theme's CSS, and original CSS can be used.
The point is that the order of CSS is specified using the function of WordPress.
wp_enqueue_style( $handle, $src, $deps, $ver, $media )
This is a function to apply a style sheet.
First wp_enqueue_style
This is the handle name bootstrap and describes the path to bootstrap.min.css.
And $ deps is set to the initial value by array ().
get_template_directory_uri()
get_template_directory_uri () gets the URI of the template directory that is activated.
In this case, it accesses to the theme /components/bootstrap/dist/css/bootstrap.min.css.
Also, the version and media are set to $ ver and $ media.
The second wp_enqueue_style sets the handle name "theme-style" and sets the style sheet of the theme.
get_stylesheet_uri()
get_stylesheet_uri () is a function that specifies the style sheet of the activated theme.
This time, it specifies the CSS order by the array ('bootstrap').
It means "bootstrap" handle name is linked first and this links next.
The third wp_enqueue_style has a handle name "original-style", and it uses get_template_directory_uri () to access /bootstrap/colorblock.css.
It assigns order by an array ('theme-style').
It links "theme-style" and this links next.
The order becomes 1. Bootstrap's CSS, 2. theme's CSS, and 3. original CSS.
In other words, the doubled selector of Bootstrap will be overwritten, and in the end, it will be adjusted with the original CSS created by yourself.
If you download Bootstrap with Sass, you can use it by including part of that Sass in the original CSS, so that you can adjust more finely.
add_action( 'wp_enqueue_scripts', 'colorblock_scripts' );
Use "add_action" to register a self-made function for the action hook.
wp_enqueue_scripts is the name of the hook and colorblock_scripts is the function that you've created.
This add_action links each CSS.
Codex reference for add_action.
get_template_directory_uri() Parent theme and Child theme
How is it different when using get_template_directory_uri () in the parent theme and when using it in a child theme?
Both parent and child themes return the same result.
What is get_stylesheet_directory_uri()
Besides get_template_directory_uri (), there is get_stylesheet_directory_uri ().
This is a function to get the URI of the theme or child theme style sheet directory.
What is the difference with get_template_directory_uri()
When used in the parent theme, it outputs the theme directory URL of the parent theme, and when it is used in the child theme, it outputs the theme directory URL of the child theme.
One thing you need to be careful is that get_stylesheet_directory_uri () is different from get_stylesheet_uri ().
This article title
How to use Bootstrap inside WordPress theme
