How to enqueue css, js script in wordpress properly

Probably you added your js, css scripts directly in the header but there is a smart way to do this in WordPress. This method is called enqueueing. In this article, I will show how you can use wp_enqueue_style and wp_enqueue_script to enqueue assets.

How enqueueing works

There are two simple steps taken while doing it. First, register and then enqueue it.

Enqueue in a plugin

Let’s assume we are enqueueing a js and a css file in a plugin. Here is an example code


function adding_scripts_fn() {

wp_register_script('custom_script', plugins_url('my_script.js', __FILE__), array('jquery'), time(), true);
wp_register_style( 'custom-style', plugins_url( 'style.css' , __FILE__ ), array(), time() );
 
wp_enqueue_script('custom_script');
wp_enqueue_style('custom_style');
}

add_action( 'wp_enqueue_scripts', 'adding_scripts_fn' );  

With wp_register_script this function we have registered the my_script.js file to WordPress. Note that I added time() function for the version of the file, so every time we update code, it does not cached. Cached file shows old version of code, so we don’t see the updates instantly while we make a change. Using wp_register_style we registered our css file style.css

Later, using wp_enqueue_script function we enqueued our js file. Before adding this function WordPress can recognize that there is a script named my_script.js but it does not show in the header or footer and wp_enqueue_style adds our css file

Finally, we added our js and css files with an action hook in line number 10.

Enqueue in current theme

Everything is the same but the value of the source parameter should be changed. Here is an example


function adding_scripts_fn() {

wp_register_script('custom_script', get_template_directory_uri().'/js/my_script.js', array('jquery'), time(), true);
wp_register_style( 'custom-style', get_stylesheet_directory_uri(). '/css/style.css', array(), time() );
 
wp_enqueue_script('custom_script');
wp_enqueue_style('custom_style');
}

add_action( 'wp_enqueue_scripts', 'adding_scripts_fn' );  

Use of shortcode to enqueue scripts

The idea is the same but slightly in a different way. We will register scripts / styles in a function using wp_register_script or wp_register_style. Rather than enqueueing it in the same function, we will do it in our shortcode so that when we call the shortcode, the scripts will be only on that page/post or wherever we want.


function adding_scripts_fn() {

wp_register_script('custom_script', plugins_url('my_script.js', __FILE__), array('jquery'), time(), true);
wp_register_style( 'custom-style', plugins_url( 'style.css' , __FILE__ ), array(), time() );
 
}

add_action( 'wp_enqueue_scripts', 'adding_scripts_fn' );  

function my_shortcode_fn( $atts ){
   wp_enqueue_script('custom_script');
   wp_enqueue_style('custom_style');

   // other code here
}

add_shortcode( 'my_shortcode', 'my_shortcode_fn' );

I believe you understand how enqueueing works in WordPress and I also hope you can use it in your projects without any confusion.

Leave a Comment

Your email address will not be published.