Part 2: Proper way of including CSS and JS files in WordPress Using Enqueue Method

Confused about how to properly include CSS and JS files in your WordPress without any conflict? Then you are at the right place, in this post, we will let you know how to properly include CSS and JS files. Many developers make a mistake of directly calling the scripts and styles for your plugins and themes in header.php or footer.php.

But this is not the right method since you have conflicts when your themes and plugins are complex. So in order to overcome this issue, there is a trending method called enqueueing.  Enqueueing method lets your styles and scripts in the proper method of inserting your CSS and JS files, which is the most recommended method update.

Earlier Method & Not Recommended: Inserting the files directly

Previously many developers and WordPress users will load their styles and scripts directly in WordPress. An example of such common

Echo‘<link rel=“stylesheet” href=“https://url-to-plugin-css-folder/style.css” type= “text/css”/>’;

Echo‘<script type=“text/javascript” src= “https://url-to-plugin-js-folder/flip.js”></script>’;

Problems by directly inserting the scripts and styles in WordPress

• If it is called directly, the CSS and JS files will be included in all the pages of your website even if it not required. For example, the CSS that design the admin page is added to WordPress directly, it means the CSS file will be present in all the pages of your website even if it’s not necessary. Though it is not required for each and every page, the browser will download/fetch the file.
• Assume that you load a jQuery manually, and another plugin installed in your WordPress website loads the same jQuery, then there is a consequence of existing multiple instances of the jQuery. This is redundant and make slow down your websites speed and result in poor performance.

In order to avoid these situations, there is a standard and proper way of inserting CSS and JS files in your WordPress.

Current & Most Recommended Method: Enqueueing

Enqueueing the most standard and recommended way of properly adding your CSS and JS files in WordPress. By using the enqueue function, your website will never face any conflict and even the performance of your website will increase. To know more about enqueueing please refer to what is wp_enqueue function in WordPress development? The below example shows, how to add CSS and JS files. It should be specified in your themes functions.php file.

Proper way of enqueueing scripts and styles

<?php

Function your_function_name() {

wp_enqueue_style(‘style_name’, get_stylesheet_uri());

wp_enqueue_script(‘script_name’, get_template_directory_uri(). ‘/js/example.js’, array(), ‘1.0.0’, true);

}

add_action(‘wp_enqueue_scripts’, ‘your_function_name’);

// scripts and styles load from a single action hook.

?>

Example

/* Custom child theme functions

* Inserting additional CSS and JS files in a functions.php file

*/

<?php

Function your_file_name() {

//Adding CSS file of the parent theme

wp_register_style(‘tinyframework-style’,get_template_directory_uri().‘/style.css’, array(), ‘2.0.4’, ‘all’);

//Adding CSS file of child theme. This stylesheet stands last so that it will override parent theme and other stylesheets

wp_register_style(‘tinyframeworkchild-style’, get_stylesheet_uri(), array(), ‘2.0.4’, ‘all’);

//Enqueueing

wp_enqueue_style(‘tinyframework-style’);

wp_enqueue_style(‘tinyframeworkchild-style’);

//enqueue the script

wp_enqueue_script(‘script-name’, get_stylesheet_directory_uri(). ‘/js/script-name.js’, array(), ‘2.0.4’, true);

}

add_action(‘wp_enqueue_scripts’, ‘your_function_name’);

?>

This is a normal example of adding CSS and JS files in your WordPress. Following the enqueue functions, you can properly load the scripts and styles and make a powerful website.

Conclusion

Enqueueing your scripts and styles in WordPress is the best way. Hope you got an idea about how to properly include CSS and JS files in WordPress. If you have any comments or doubts, please feel free to comment us. You can subscribe to us at Facebook and Twitter.