functions.php file using the WordPress functions
This is part 1 in the How to Create a Bootstrap WordPress Theme series.
- 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
- 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.
We 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.
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 (
- 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.
In the next function,
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
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.
Next up: Part 2 – Using Bootstrap dropdowns for your WordPress navigation