If you are a WordPress developer you heard about the words like wp_enqueue_script, wp_enqueue_style, and wp_enqueue_scripts. These are the methods we should use to include JavaScript and CSS in WordPress.

When it comes to WordPress, one should not use script and link tags to add JavaScript and CSS files.

Benefits Of Using Standard Methods

For a website, it is common to use different kinds of effects, and animations to improve the user experience. There are plenty of ready-made plugins available on the internet which allow us to add sliders, contact forms, carousels, etc to your website. When we use these external resources we need to use JS and CSS files provided by them. By using the WordPress provided methods we can control pages on which such plugins can use only. For instance, if we are displaying a slider on the home page then there is no need to include the slider’s JS and CSS files on another page. It is always a good practice to include JS and CSS only when needed. This is a good practice used to improve site performance and make our site load faster.

Actual Code To Include JavaScript And CSS

Let’s assume we have custom.js and custom.css files which need to add to our site. For this, we need to place the below code.

add_action('wp_enqueue_scripts', 'include_js_css');
function include_js_css() {
    wp_register_script('my-custom-script', get_stylesheet_directory_uri() . '/js/custom.js', array('jquery'), false, true);
    wp_enqueue_script('my-custom-script');
 
    wp_register_style( "my-custom-style", get_stylesheet_directory_uri() . "/css/custom.css", array(), false, "all" );
    wp_enqueue_style( "my-custom-style" );
}

Note: The 3rd parameter in the function wp_register_script. We passed array(‘jquery’) which means our custom.js is dependent on the jquery.js file. You can have an empty array here if your script does not have dependencies.

The last parameter is set to true which means including the custom.js file in a footer(before the end of the body tag).

Parameters explanation for wp_register_script() function

$handle (Required) : Name of the script. Should be unique.
$src (Required) : Full URL of the script, or path of the script relative to the WordPress root directory.
$deps (Optional) : An array of registered script handles this script depends on.
Default value: array()
$ver (Optional) : String specifying script version number, if it has one, which is added to the URL as a query string for cache-busting purposes. If the version is set to false, a version number is automatically added equal to the current installed WordPress version. If set to null, no version is added. The default value is false
$in_footer (Optional) : Whether to enqueue the script before the closing of the body tag instead of in the head. Default ‘false’.

Parameters explanation for wp_register_style() function

$handle (Required) : Name of the stylesheet. Should be unique.
$src (Required) : Full URL of the stylesheet, or path of the stylesheet relative to the WordPress root directory.
$deps (Optional) : An array of registered stylesheet handles this stylesheet depends on.
Default value: array()
$ver (Optional) : String specifying stylesheet version number, if it has one, which is added to the URL as a query string for cache-busting purposes. If the version is set to false, a version number is automatically added equal to the current installed WordPress version. If set to null, no version is added. Default value: false
$media (Optional) : The media for which this stylesheet has been defined. Accepts media types like ‘all’, ‘print’, and ‘screen’, or media queries like ‘(orientation: portrait)’ and ‘(max-width: 640px)’. Default value: ‘all’.

It’s all about how to include JavaScript and CSS in WordPress. If you have any questions or suggestions please leave comments below.

If you liked this article, then please subscribe to our YouTube Channel for video tutorials.