Include bootstrap by wp_enqueue_style in WordPress
Bootstrap framework always requires jquery, popper.js, and bootstrap js to make a bootstrap working correctly on a specific page.
In wordpress theme, wp_enqueue_style and wp_enqueue_script functions are responsible to add CSS and JS files to a page.
This happens when wp_enqueue_style and wp_enqueue_script are implemented in the wrong way.
However, you can fix this just by writing very few code lines in the functions.php file.
The function includes style and script function and add_action executes the function.
- Shortcode to enqueue bootstrap CDN
- Shortcode details CDN
- Shortcode to enqueue bootstrap locally
- Advantages of enqueueing bootstrap by CDN
- Advantage of self-hosting bootstrap
Here is code showing how to include bootstrap by wp_enqueue_style in WordPress
Shortcode to enqueue bootstrap CDN.
A bootstrap MaxCDN offers three links that can be loaded to a page.
In case, you don’t want to upload bootstrap files to a server you should enqueue these bootstrap CDN links
So, the function below is created in functions.php for adding the bootstrap
8. add_action("wp_enqueue_scripts", "addBootStrap");
These two WordPress functions can enqueue any js and CSS with additional parameters.
See this link on how to enqueue stylesheet in WordPress.
The Shortcode details
In order to enqueue a bootstrap cdn in WordPress, a functions.php file should icontains a function that calls wp_enqueue_style and wp_enqueue_script.
Line 2 shows addBootStrap function which adds the required functions to enqueue the bootstrap framework.
Create this function in the functions.php file and not otherwise.
Bootstrap CSS framework core classes are available in the bootstrap.min.css CSS file.
The CDN link that retrieves bootstrap.min.css is https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
This link should be loaded to a theme as well.
Hence, Line-2 calls wp_enqueue_style to enqueue a bootstrap.min.css stylesheet.
The function takes in two values as parameters.
- The stylesheet id
- A path of a stylesheet to be added.
The id passed in is
The bootstrap framework provides animation and gradients features.
The bootstrap file which includes classes for animation and gradient is
Line 5 uses the same function as line 2 to create a stylesheet link tag for
After writing wp_enqueue_style and wp_enqueue_script in a addBootStrap function,
the final action is to execute the function.
add_action executes all the functions and variables implemented addBootStrap.
So, Line 8 activates addBootStrap function implementation using add_action.
The function receives two parameters.
- Action hook name
- The function name to execute
Regarding the task, the action hook name is wp_enqueue_scripts and the function name is addBootStrap.
There is one important thing to know about its implementation.
That is how to enqueue the bootstrap hosted locally.
It is special if the page includes a bootstrap stylesheet that is not hosted in the CONTENT DELIVERY NETWORK.
Shortcode to enqueue bootstrap locally
Actually, the bootstrap website offers the link to download the framework.
The downloaded files and directory can be uploaded to a server so you won’t need to use CDN anymore.
However, using CDN is a best practice (I will cover this later).
Still, the locally hosted bootstrap can be loaded to a theme using wp_enqueue_style and wp_enqueue_script.
Although, there is a slight difference between loading bootstrap CDN and locally hosted bootstrap.
Check this shortcode.
2.wp_enqueue_style ("minCSSbOOTSTRAP", get_template_directory_uri() . '/' . 'bootstrap/css/bootstrap.min.css');
3.wp_enqueue_style ("minCSSbOOTSTRAPTHEME", get_template_directory_uri() . '/'. 5.'bootstrap/css/bootstrap.min.css');
6.wp_enqueue_style ("minCSSbOOTSTRAPTHEME", get_template_directory_uri() . '/'. 7.'bootstrap/css/bootstrap.min.css');
9.add_action("wp_enqueue_scripts", " includeBootStrap");
The explanation focuses on get_template_directory_uri() since other features already have been explained.
get_template_directory_uri retrieves the link of the website.
The function is appended with a quoted slash(‘/’) followed by a directory path of the file.
The subdirectory is separated by a forward slash.
Take a look at Line-2 on the second argument of wp_enqueue_style.
The parameter value is
get_template_directory_uri() . '/' . 'bootstrap/css/bootstrap.min.css'
This returns the path of bootstrap.min.css
get_template_directory_uri returns the address(domain) of where themes files reside like http://webappguides.com.
Appending slash makes the domain structure become http://webappguides.com/
bootstrap/css/bootstrap.min.css shows there are two folders to reach bootstrap.min.css
These directories are CSS and bootstrap.
Advantages of enqueueing bootstrap by CDN
MaxCDN hosts a bootstrap framework, the content delivery network is very fast.
This means a CDN improves page speed load time, which is good for SEO.
Assurance of regular maintenance of the bootstrap framework.
Bootstrap updates, removes, and deprecates some CSS classes.
The theme can benefit from newly added classes.
Advantage of self-hosting bootstrap
To host a bootstrap on your web server may secure a page from the removal of CSS classes.
The deleted classes can destroy the page design if some HTML elements use those classes.
It happens when bootstrap updates the version of the CSS classes if bootstrap is hosted on the content delivery network.
So, using CDN may cause theme design damage when the framework is updated.
Now, which one is the best?
Use bootstrap MaxCDN links to enqueue the bootstrap CSS and bootstrap JS.
The wp_enqueue_script and wp_enqueue_style can register both CDN bootstrap and locally hosted bootstrap.
For fast page loading speed, using CDN is the best solution.