Properly Enqueuing Styles, Scripts, Fonts & Conditional styles

It is always a good option to enqueue your stylesheets & scripts in the functions. Generally, we enqueue our styles & scripts in ‘functions.php’.

Enqueuing styles

The basic function for enqueuing a style is:

You can include these parameters:

• $handle is simply the name of the stylesheet.
• $src is where it is located. The rest of the parameters are optional.
• $deps refers to whether or not this stylesheet is dependent on another stylesheet. If this is set, this stylesheet will not be loaded unless its dependent stylesheet is loaded first.
• $ver sets the version number.
• $media can specify which type of media to load this stylesheet in, such as ‘all’, ‘screen’, ‘print’ or ‘handheld.’

Example:

So if you wanted to load a stylesheet named “carousel.css” in a folder named “CSS” in your theme’s root directory, you would use:

Enqueuing scripts

JavaScript files required by a theme should be loaded using wp_enqueue_script. This ensures proper loading and caching, and allows the use conditional tags to target specific pages. wp_enqueue_script uses a similar syntax to wp_enqueue_style.

Parameters:

• $handle is the name for the script.
• $src defines where the script is located.
• $deps is an array that can handle any script that your new script depends on, such as jQuery.
• $ver lets you list a version number.
• $in_footer is a boolean parameter (true/false) that allows you to place your scripts in the footer of your HTML document rather then in the header, so that it does not delay the loading of the DOM tree.

Example:

Your enqueue function may look like this:

Enqueuing multiple styles & scripts in a single hook ==

We can enqueue all the required style & script file via one single function & in one hook.

Example:

1. function add_theme_scripts() {
3. wp_enqueue_style( ‘style’, get_stylesheet_uri() );
5. wp_enqueue_style( ‘slider’, get_template_directory_uri() . ‘/css/slider.css’, array(), ‘1.1’, ‘all’);
7. wp_enqueue_script( ‘script’, get_template_directory_uri() . ‘/js/script.js’, array ( ‘jquery’ ), 1.1, true);
9. if ( is_singular() && comments_open() && get_option( ‘thread_comments’ ) ) {
11. wp_enqueue_script( ‘comment-reply’ );
13. }
15. }
17. add_action( ‘wp_enqueue_scripts’, ‘add_theme_scripts’ );

Enqueuing google fonts

functions.php doesn’t override the parent functions, it runs in addition to them. So any functions in your child theme will be run after all the functions in the parent theme have been run. So we enqueue fonts in function file instead hard-coding them in the header.php file.

1. function theme_slug_google_fonts() {
3. $query_args = array(
5. ‘family’ => ‘Source+Sans+Pro:400,300,700’,
7. ‘subset’ => ‘latin,latin-ext’,
9. );
11. wp_register_style( ‘google_fonts’, add_query_arg( $query_args, “//fonts.googleapis.com/css” ), array(), null );
13. }
15. add_action(‘wp_enqueue_scripts’, ‘theme_slug_google_fonts’);

Enqueuing conditional stylesheets for browser

Sometimes, we need our style files to come into effect according to the browser.

Example to enqueue style files for IE:

1. //enqueuing conditional styles
3. function theme_slug_ie_style_sheets () {
5. wp_register_style( ‘ie6’, get_stylesheet_directory_uri() . ‘/css/style.ie6.css’ );
7. $GLOBALS[‘wp_styles’]–>add_data( ‘ie6’, ‘conditional’, ‘lte IE 7’ );
9. wp_register_style( ‘ie7’, get_stylesheet_directory_uri() . ‘/css/style.ie7.css’ );
11. $GLOBALS[‘wp_styles’]–>add_data( ‘ie7’, ‘conditional’, ‘lt IE 8’ );
13. wp_enqueue_style( ‘ie6’ );
15. wp_enqueue_style( ‘ie7’ );
17. }

add_action (‘wp_enqueue_scripts’, ‘theme_slug_ie_style_sheets’);