WordPress has enqueuing system which provides programmable way of loading styles. It has a built-in support for dependency management.
Example:
function custom_styles() {
wp_register_style(
'my_stylesheet',
plugins_url('my-stylesheet.css', __FILE__),
array('bootstrap-main'),
'1.0',
'screen');
wp_enqueue_style('my_stylesheet');
}
add_action( 'wp_enqueue_scripts', 'custom_styles' );
We need to register a stylesheet to be enqueued by using a wp_register_style function. This function accepts 5 parameters:
- $handle – Handle is the unique name of your stylesheet.
- $src – The location of your stylesheet.
- $deps – An array of registered stylesheet handles this style depends on.
- $ver – This is the version number of your stylesheet. This parameter is optional.
- $media – The media for which this stylesheet has been purposed. Accepts media types- like ‘all’, ‘print’, ‘screen’ and ‘speech’ or media queries – like ‘(orientation: portrait)’ and ‘(min-width: 480px)’. This parameter is optional and its default value is ‘all’.
In the example above, we register a stylesheet with my_stylesheet name, which is located into the plugins folder and has a my_stylesheet.css filename. It is dependant on Bootstrap. The stylesheet has a version number of 1.0 and is used for computer screens, tablets, smart-phones etc.
After providing all the parameters in wp_register_style, we just call the script in wp_enqueue_style() which enqueues it.
The last step is to use the wp_enqueue_scripts action hook to actually load the style. Despite its name, it is used for enqueuing both scripts and styles in the front-end.
Leave A Comment