How to Load Stylesheet in WordPress

February 4, 2014 — 1 Comment

In this article, I’ll show you how we actually go into loading a stylesheet in WordPress which you might need to know if you are developing custom themes or plugins for WordPress.

However, if you are looking to load stylesheet in WordPress, you can simply use the following php code in your WordPress theme’s functions.php file:


function guideplease_loading_stylesheet(){

wp_enqueue_style('guideplease-styles', plugin_dir_url( __FILE__ ) . 'css/guideplease-styles.css');

}
add_action('wp_enqueue_scripts', ' guideplease_loading_stylesheet');

Well, let me explain it a little bit more for easy to understand.

So, first of all we created a function with the help of:

function some_name_of_function(){}

Make sure that your function name should be unique so it will not conflict with the WordPress and other plugins’ functions because while loading the site WordPress execute every single function of a website if it find one or more functions of the same name then one of the function will be loaded but the other one don’t. So, name your plugin functions clearly.

Now, we add/enqueue a CSS style file to the WordPress generated page with the help of wp_enqueue_style() function. It’s a safe way of loading CSS file in the <head> section of WordPress blog. wp_enqueue_style() takes two parameters the first one is the name of the CSS file that you give to your funcitons style.css file and the others being plugin_dir_url ( __FILE__ ) that will actually allow us to retrieve the URL or the file path from the current directory like so…

wp_enqueue_style('guideplease-styles', plugin_dir_url( __FILE__ ) . 'css/guideplease-styles.css');

Finally after doing all above we have an action hook that connect the function and make them work with WordPress. Here what I’m talking about:

add_action('wp_enqueue_scripts', ' guideplease_loading_stylesheet');

Where wp_enqueue_scripts is the proper hook to use when enqueuing items that are meant to appear on the front-end. Like we did right above. So, finally and I hope you understand.

One response to How to Load Stylesheet in WordPress

  1. I think this can help me for my new wordpress blog

Leave a Reply

*

Text formatting is available via select HTML. <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>