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 to enqueue css, js script in WordPress properly.
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 the code, it does not cache. The cached file shows the old version of the code, so we don’t see the updates instantly when 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 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.
