How to Enqueue and Dequeue Scripts and Stylesheets in WordPress

Using stylesheet and script to make your website beautiful and attractive. Also, it is important to how to add these script and stylesheet to WordPress. Most of the time we all are added it in header and footer but we can also use WordPress enqueue functionality to add scripts and stylesheets in WordPress.

What is Enqueueing?

Enqueueing is a CMS-friendly way of adding scripts and styles to WordPress websites. Using enqueueing functionality, WordPress can be linking this stylesheet and script in the header and footer. You can even specify the dependencies of your scripts and stylesheets and WordPress will add them in the correct order.

You can add this enqueueing or Dequeueing code in your theme’s functions.php file of your active child theme (or theme) or plugin file.

This is Enqueueing syntax:

<pre>

wp_enqueue_script( $handle, $source, $dependencies, $version, $in_footer );

wp_enqueue_style( $handle, $source, $dependencies, $version, $media );

</pre>

  • handle: This is the name of your script or style. It is best to use only lowercase letters and dashes here, and make sure to use a unique name.
  • source: The URL of your script or style. Make sure to use functions like get_template_directory_uri() or plugins_uri().
  • dependencies: An array of handles to assets which your script or style depends on. These will be loaded before your enqueued script.
  • version: A version number that will be appended to the query. This ensures that the user receives the correct version, regardless of caching.
  • in_footer: This parameter is only available for scripts. If set to true the script is loaded through wp_footer() at the bottom of your page.
  • media: This parameter is for styles, it allows you to specify the type of media the style should be displayed for. For example screen, print, handheld, etc.

Example for enqueueing style and scripts:

<pre>

function ls_add_myscripts(){

wp_enqueue_script( 'script-name', get_template_directory_uri() . '/script.js');

wp_enqueue_style( 'style-name', get_template_directory_uri() . '/custom.css');

}

add_action('wp_enqueue_scripts', ' ls_add_myscripts');

</pre>

Registration for Stylesheet and Scripts

Technically scripts and styles are first registered and then enqueued. The difference between registration and enqueuing is,  registration lets WordPress know about your scripts or stylesheet, while enqueuing actually adds them to the page.

<pre>

function ls_add_myscripts() {

wp_register_script( 'script-name', get_stylesheet_directory_uri() . '/script.js', array( 'jquery' ) );

wp_enqueue_script('script-name'); }

add_action( 'wp_enqueue_scripts', ' ls_add_myscripts' );

</pre>

Removing Scripts And Stylesheet

WordPress provides dequeueing and deregistering functions for both scripts and styles.

  • wp_deregister_script()
  • wp_deregister_style()
  • wp_dequeue_script()
  • wp_dequeue_style()

Example for style:

<pre>

function  dequeue_unnecessary_styles() {

wp_dequeue_style( 'bootstrap-map' );

wp_deregister_style( 'bootstrap-map' );

}

</pre>

Example for Scripts:

<pre>

function dequeue_unnecessary_scripts() {

wp_dequeue_script('bootstrap-js' );

wp_deregister_script('bootstrap-js' );

}

</pre>

I hope this post is useful for you. If you have any query than connect our experience wordpress developer at Lathiya Solutions, Surat.