Include bootstrap by wp_enqueue_style in WordPress

webapps Lab
February 13, 2021
ThemeFunctions

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.

But the two enqueue functions may fail to include bootstrap CSS and bootstrap javascript which results in a poor page layout.

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.

Contents

1. Shortcode to enqueue bootstrap CDN
2. Shortcode details CDN
   1. Function Execution
3. Shortcode to enqueue bootstrap locally
   1. Code Explanation
4. Advantages of enqueueing bootstrap by CDN
5. Advantage of self-hosting bootstrap
6. Wrap-up

Here is code showing how to include bootstrap by wp_enqueue_style in WordPress

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

1. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css 
2. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css
3. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js

So, the function below is created in functions.php for adding the bootstrap

1.function addBootStrap(){

2.wp_enqueue_style("bootstrapMinJs",

3.”href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");

4.wp_enqueue_style("bootstrapMinJsTheme",

5."href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css");

6.wp_enqueue_script(“bootstrapJS”,"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js");

7.}

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.

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.

Remember,

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  bootstrapMinJsTheme.

The bootstrap framework provides animation and gradients features.

The bootstrap file which includes classes for animation and gradient is bootstrap-theme.min.css.

Line 5 uses the same function as line 2 to create a stylesheet link tag for bootstrap-theme.min.css.

Line 6 calls wp_enqueue_script to add a bootstrap javascript file for handling page events.

After writing wp_enqueue_style and wp_enqueue_script in a addBootStrap function,

the final action is to execute the function.

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.

1. Action hook name
2. 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.

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.

1.function includeBootStrap(){

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');

8.}

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/

The structure bootstrap/css/bootstrap.min.css shows there are two folders to reach bootstrap.min.css

These directories are CSS and bootstrap.

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.

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.

Any CSS or Javascript file is registered using the function created in functions.php

The same route is adopted by bootstrap to enqueue its three files that contain CSS core classes, gradient, animation, and javascript.

But,

Bootstrap requires a JQUERY library, here you can find the step by step guide on how to add javascript to  WordPress in functions.php