Standard Way To Include JavaScript And CSS In WordPress

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, animations to improve the user experience. There are plenty of ready-made plugins available on the internet which allows us to add sliders, contact forms, carousel etc in 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 slider on the home page then there is no need to include 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 which used to improve site performance and making 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 on our site. For this, we need to place 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 dependant on the jquery.js file. You can an emapy array here if your script does not have dependdncies.

Last parameter is set to true which means include custom.js file in a footer(before the end of 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 version is set to false, a version number is automatically added equal to current installed WordPress version. If set to null, no version is added. Default value is false
$in_footer (Optional) : Whether to enqueue the script before the closing of 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 version is set to false, a version number is automatically added equal to 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.

Leave a Reply

Your email address will not be published. Required fields are marked *