Using Bootstrap, Font Awesome, jQuery, Popper.js in WordPress

Bootstrap is an HTML, CSS, and JavaScript framework for developing responsive websites. Font Awesome is an icon set and toolkit. jQuery is a JavaScript Library that simplifies JavaScript programming. Popper.js is a library used to manage poppers in web applications.

In this tutorial you will learn to use Bootstrap, Font Awesome, jQuery and Popper.js in your WordPress-built website.

Self-Hosted

You can use Bootstrap, Font Awesome, jQuery and Popper.js in your WordPress website by downloading the required files and uploading them to your web host. Here are the links:

Check out the directory paths below and create the necessary folders in your theme folder. The file style.css is for your CSS code and the file scripts.js is for your theme-specific JavaScript code.

Open the functions.php file of your WordPress theme and add the following code in it.

// Add website styling
function enqueue_styles() {
    wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/vendors/bootstrap/css/bootstrap.min.css' );
    wp_enqueue_style( 'fontawesome-free', get_template_directory_uri() . '/vendors/fontawesome-free/css/all.min.css' );
    wp_enqueue_style( 'core', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_styles');
function enqueue_scripts() {
    wp_enqueue_script( 'jqslim', get_template_directory_uri() . '/vendors/jquery/jquery.min.js' );
    wp_enqueue_script( 'popper', get_template_directory_uri() . '/vendors/popper/popper.min.js' );
    wp_enqueue_script( 'bootstrap', get_template_directory_uri() . '/vendors/bootstrap/js/bootstrap.min.js' );    
    wp_enqueue_script( 'scripts', get_template_directory_uri() . '/inc/scripts.js' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_scripts');

Through CDNs

If you do not want to host the Bootstrap, Font Awesome, jQuery and Popper.js files on your web host, you can pull the required files from websites that host them.

Open the functions.php file of your WordPress theme and add the following code in it.

// Add website styling
function enqueue_styles() {
	wp_enqueue_style( 'bootstrap-css', 'https://ajax.aspnetcdn.com/ajax/bootstrap/4.3.1/css/bootstrap.min.css', false, NULL, 'all' );
	wp_enqueue_style( 'bootstrap-css', 'https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css', false, NULL, 'all' );
	wp_enqueue_style( 'fontawesome-free', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css' );
	wp_enqueue_style( 'fontawesome-free', 'https://use.fontawesome.com/releases/v5.11.2/css/all.css' );
    wp_enqueue_style( 'core', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_styles');
function enqueue_scripts() {
    wp_enqueue_script( 'jquery-cdn', 'https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js', array(), '1.9.1', true);
	wp_enqueue_script( 'jquery-cdn', 'https://code.jquery.com/jquery-3.4.1.min.js', array(), '1.9.1', true);
    wp_enqueue_script( 'popper-cdn', 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js' ); 
    wp_enqueue_script( 'bootstrap-js', 'https://ajax.aspnetcdn.com/ajax/bootstrap/4.3.1/bootstrap.min.js', array('jquery-cdn' ), true);
    wp_enqueue_script( 'bootstrap-js', 'https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js', array('jquery-cdn' ), true);  
    wp_enqueue_script( 'scripts', get_template_directory_uri() . '/inc/scripts.js' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_scripts');