In this tutorial, we walk you through how to load Bootstrap & Font Awesome‘s CSS files, as well as Bootstrap’s javascript plugins. We’ll be loading all resources from the Bootstrap CDN. All assets will be loaded from the functions.php file using the WordPress functions wp_enqueue_style & wp_enqueue_script.
This is part 1 in the How to Create a Bootstrap WordPress Theme series.
- Part 1 – Loading Bootstrap & Font Awesome CSS & javascript
- Part 2 – Using Bootstrap dropdowns for your WordPress navigation
- Part 3 – Using Bootstrap to create a sticky footer
- Part 4 – Bootstrapped Layout: Pages, posts & sidebar
- Part 5 – Bootstrap search form & search results pages
- Part 6 – Bootstrap comments section
If you’d prefer to get up & running quickly, check out our updated list of WordPress Bootstrap Themes.
Loading Bootstrap & Font Awesome Assets
We’re going to use the Bootstrap CDN to serve the CSS & Javascript files required for Bootstrap & Font Awesome. Theoretically, many visitors to your site will already have these resources cached on their machine. Even if they don’t, the CDN from NetDNA will (in most cases) serve them up faster than your web server.
- Visit the Bootstrap CDN. Grab the links for the latest versions of CSS & Javascript (they might differ from the code below when new updates are released) *
- Create a functions.php file in the root of your theme folder
- Add the following code
* You might want to customize Bootstrap to only include the components you need. If so, visit Bootstrap’s customizer, download the files to your computer, and host them on your own server. In most cases, we recommend using the CDN to include the full version of Bootstrap.
// Only on front-end pages, NOT in admin area
if (!is_admin()) {
// Load CSS
add_action('wp_enqueue_scripts', 'twbs_load_styles', 11);
function twbs_load_styles() {
// Bootstrap
wp_register_style('bootstrap-styles', '//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css', array(), null, 'all');
wp_enqueue_style('bootstrap-styles');
// Theme Styles
wp_register_style('theme-styles', get_stylesheet_uri(), array(), null, 'all');
wp_enqueue_style('theme-styles');
// Font Awesome
wp_register_style('font-awesome', '//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css', array(), null, 'all');
wp_enqueue_style('font-awesome');
}
// Load Javascript
add_action('wp_enqueue_scripts', 'twbs_load_scripts', 12);
function twbs_load_scripts() {
// jQuery
wp_deregister_script('jquery');
wp_register_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js', array(), null, false);
wp_enqueue_script('jquery');
// Bootstrap
wp_register_script('bootstrap-scripts', '//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js', array('jquery'), null, true);
wp_enqueue_script('bootstrap-scripts');
}
} // end if !is_adminWe wrap everything inside an if statement that only runs this code on the front-end of your site. You don’t need these scripts & styles when viewing your admin area, so it’s best to leave them out to avoid potential conflicts.
Load CSS
In the first function, twbs_load_styles(), we load 3 CSS files:
- Bootstrap CSS – We load this first so we can override these styles in our theme’s style.css file
- Theme CSS (
style.css) - Font Awesome CSS – This is loaded last because our layout & theme styles are more important than the icons. We want our most important elements loading first.
wp_register_style creates an instance of your CSS file. This is where you give it a handle (ex: ‘bootstrap-styles’) so that other plugins you might be using can check if it exists. That way you aren’t loading multiple instances of the same styles.
wp_enqueue_style actually places a link to the CSS file in the <head> section of your page.
[adrotate group=”8″]
Load Javascript
In the next function, twbs_load_scripts(), we load 2 javascript files:
- jQuery – This is required for all Bootstrap javascript plugins
- Bootstrap Javascript
A note about wp_deregister_script(‘jquery’);
WordPress comes packaged with a bunch of scripts in its core (listed here). Most of them can be found in your /wp-includes/ folder. You could just use wp_enqueue_script by itself to load any one of them. However, doing so would load them from your web server. We add this line for jQuery because we would rather load them from Google’s CDN. Essentially, we’re telling WordPress NOT to use the file that comes packaged with the WordPress Core (wp_deregister_script), but to use the one from Google’s CDN instead (wp_register_script). Why? Because it loads faster, and is most likely already cached on your visitors’ browser.
Check for the latest version of jQuery on Google’s Hosted Libraries, and use that instead of the version in the code above.
More Code Explanations
We add the numbers 11 and 12 to the add_action hooks when we load the styles & scripts, respectively. This dictates the order in which the actions are performed. Since we want our styles to load before our scripts, we assign a lower number to the styles. We start at 11 so that the WordPress core can use 1-10. You could start your numbers much lower if you want them to be the very first references in your <head> section.
For the links to our external styles & scripts, we start with 2 forward slashes (//), as opposed to http: or https:. This way, the resources will detect whether or not the page is served up securely. If not, they will stay http. If the page is being served over https, the resources will follow suit & also be served up securely. This prevents browsers from throwing warnings that the page is secure, but some resources on it are not secure.
Now, upload the functions.php file to your server, refresh your site, and you should see those styles & scripts in your <head> section in the order in which we listed them.
Learn more about wp_register_style & wp_register_script in the WordPress Codex.
Next up: Part 2 – Using Bootstrap dropdowns for your WordPress navigation
We Recommend
https://kinsta.com › wordpress-hosting
Fast and secure infrastructure, worldwide CDN, edge caching, 35 data centers, and enterprise-level features included in all plans. Free site migrations.
https://gravityforms.com › features
Create custom web forms to capture leads, collect payments, automate your workflows, and build your business online. All without ever leaving WordPress.
Leave a Comment