Proper way of including CSS or JavaScript file in WordPress

Using WordPress functions `enqueue` and `dequeue` allows developers to properly include or exclude from loading a CSS or JavaScript file on webpages. May it be on backend or frontend pages, there’s a specific function for that.

We know that we can add a CSS or JavaScript files using HTML `<style>` and `<link>` tags directly but that is not the proper way of doing it. With WordPress `enqueue` functions, we are actually allowing other developers to stop the loading of a particular assets using the `dequeue` function for different reasons. One example is for page speed optimization that sometimes require to remove loading of a particular asset, probably because it was not being used at all on a specific page, and other different reasons.

Now that you know the point of using `enqueue` and `dequeue`. Let’s have a look at different functions and how to use them.

1.) wp_enqueue_style — used to include a stylesheet or CSS file.
2.) wp_enqueue_script — used to include a script or JavaScript file.
3.) wp_dequeue_style — used to remove a stylesheet or CSS file from loading.
4.) wp_dequeue_script — used to remove a script or JavaScript file from loading.

1.) wp_enqueue_style( $handle, $src, $deps, $ver, $media );

Parameters:

$handle is simply the name of the stylesheet that should be unique.
- (required)
- (string)

$src is where it is located. The rest of the parameters are optional.
- (optional)
- (string)

$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.
- (optional)
- (array of strings)

$ver is the version of the file. Can be used to force loading of the changes on the file specially on the cases where they are cached. Default was set to the current version of the WordPress installed.
- (optional)
- (string or boolean)

$media is used to specify the media type like print, screen and media. Default value is set to ‘all’.
- (optional)
- (string or boolean)

Example Usage:

wp_enqueue_style( ‘your-prefix-stylesheet’, get_template_directory_uri() . ‘/assets/css/stylesheet.css’, array(), ‘1.0.0’, ‘all’ );

2.) wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

Parameters from the `wp_enqueue_style` function are the same except for the 5th parameter which is $in_footer.

$in_footer is used to whether load the file on <head> or <body> tag. Default value is false and load the file on <head> tag, set to true to load it inside <body> tag.
- (optional)
- (boolean)

Example Usage:

wp_enqueue_script( ‘your-prefix-script’, get_template_directory_uri() . ‘/assets/js/script.js’, array(), ‘1.0.0’, true );

3.) wp_dequeue_style( $handle );

Parameters:

$handle is the unique handle of the enqueued stylesheet or CSS file.
- (required)
- (string)

Example Usage:

wp_dequeue_style( ‘your-prefix-stylesheet’ );

4.) wp_dequeue_script( $handle );

Parameters:

$handle is the unique handle of the enqueued script or JavaScript file.
- (required)
- (string)

Example Usage:

wp_dequeue_script( ‘your-prefix-script’ );

That’s it! Hope you learn something from this. I’m looking forward on creating more content like this in the future. Cheers!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store