Chat with us, powered by LiveChat

This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

WordPress Best Practice: How To Import Bootstrap CSS Stylesheets

December 3, 2014

2 Min Read
WordPress Bootstrap Css
Reading Time: 2 minutes

Previously, I taught how to create a fully responsive WordPress theme based on Bootstrap 3.x. However, what we did last time was insert entire bootstrap.min.css in the style.css. I confess that it isn’t a good practice to use a stylesheet that way, as you will run into trouble if you want to call in additional CSS files.

The easy way to call additional CSS files is to call style.css in the head section and through style.css import other stylesheets. But this isn’t the recommended method to call in external stylesheets in WordPress.

WordPress has a very useful function called the wp_enqueue_style() that can be effectively used in functions.php to call in the external stylesheets and JavaScripts.

Advantages of Using wp_enqueue_style()

  • Eliminates calling same Stylesheets and Javascripts multiple times on single page.
  • Removes conflicts of Stylesheets and Javascripts amongst other plugins.
  • In some cases increases page load time as it reduces number of requests generated by a page.

How to Use wp_enqueue_style()

First thing first you need to insert <?php wp_head(); ?> so your theme can use filters and hooks that use the wp_head() hook. So that any theme additions can be easily called.

Make sure you have wp_head(); between the head section of your theme, in the header.php file.

Then create a new file functions.php in the theme directory where index.php also exists. In functions.php we are going to create a new function and then register styles using the wp_register_script function and then we call our styles using the wp_enqueue_style function.

This is the code we are going to use to call in Bootstrap stylesheets.

<?php
function add_stylesheet() {
wp_register_style('bootstrap.min',get_template_directory_uri() . '/css/bootstrap.min.css');
wp_enqueue_style( 'bootstrap.min' );
}
add_action( 'wp_enqueue_scripts', 'add_stylesheet' ); ?>

So what does the above code do?

The add_stylesheet() is the name of our created function, you can name it anything you may wish.

Then, we registered our stylesheet through the WordPress function wp_register_style. It accepts 5 different parameters, $handle, $src, $deps, $ver, and $in_footer.

After registering our style is done, we can call it using the WordPress function wp_enqueue_style. That is it, this method might seem complicated at first but this is the preferred method of calling in stylesheets in WordPress.

Cloudways: The Best Way To Host WordPress

So, here’s the thing. There are many great web hosting mediums for WordPress out there but Cloudways managed web hosting for WordPress is the best. Why? We have a special optimization recipe that makes WordPress websites 100% faster than others. Not convinced? Try us out for free. Start your free trial now.

Share your opinion in the comment section. COMMENT NOW

Share This Article

Start Growing with Cloudways Today!

We never compromise on performance, security, and support.

Ahsan Parwez

Ahsan is the Community Team Manager at Cloudways - A Managed Cloud Hosting Platform. He loves to solve problems and help Cloudways' clients in any aspect he can. In his free time, you can find him playing RTS PC games.

Get Our Newsletter
Be the first to get the latest updates and tutorials.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

BFCM 2019