What is wp_enqueue_style & wp_enqueue_scripts In WordPress ?
WordPress is very interesting platform. Specially if you are a developer, there are so many things to learn. wp_enqueue_style and wp_enqueue_scripts, these two are the most common WordPress functions. If you are familiar with WordPress then you may already have some idea about this. Today we are going to write about the same. This article will give you complete idea about these two function.
wp_enqueue_style –
Stylesheets are the most important part of the development. This thing is not limited to just WordPress. All the visual part of the web is to related stylesheet. The stylesheets that you make in the WordPress are loaded through wp_enqueue_style(); function.
If you are a beginner then you might feel overwhelmed after reading this. But don’t worry, wp_enqueue_style & wp_enqueue_scripts functions are not that complicated as it seems to be. At this point you might be wondering, why we are using this? Because in HTML we just have to give the path of the stylesheet to include styling.
This happens because WordPress doesn’t work this way. In WordPress we have to use functions like wp_enqueue_style & wp_enqueue_scripts to get the path, and tell WordPress to load it. This is not a complex function as I already said, but there some things that you should understand properly. This guide will cover all the important things about wp_enqueue_style function.
Why it needed to enque wp_enqueue_style & wp_enqueue_scripts-
You can add stylesheets and scripts by just using <scripts></scripts> tag. But this can many problems when we use other plugins and scripts. In simple words this way can conflict in between them.
Let me just show you how this function works.
<?php
//registring function to load scripts //
<?php function load_scripts() {
wp_enqueue_script('bootstrap-js', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js',array('jquery'),'4.6.1',true);
wp_enqueue_style('bootstrap-css', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css',array(),'4.6.1','all');
wp_enqueue_style('template', 'get_template_directory_uri'().'/css/template.css');
}
add_action('wp_enqueue_scripts','load_scripts');
In the above example you can clearly see that we first registered function to load scripts. You can give this function any name of your choice. All the paths for stylesheets and JavaScript files are written inside it.
1. Step 1-
<?php function load_scripts() {
}
2. Step 2-
Now we can enqueue the stylesheet. In this step we have to give WordPress the path of the file that we want to load. The get_template_directory_uri(); function brings the path of the file that we want to load.
wp_enqueue_style('template', 'get_template_directory_uri'().'/css/template.css');
Step 3 –
Now we have everything ready we can simply tell WordPress to load the file. The above mentioned function is used to tell WordPress to implement the load_scripts() function we created.
add_action('wp_enqueue_scripts','load_scripts');
wp_enqueue_scripts function :
If you understood the wp_enqueue_style function. Then you can understand this function easily. Because there is not much difference between the two. This function is as important as the wp_enqueue_style function. Because functionality is as important as visual part. Let’s understand this by example.
Unlike the wp_enqueue_style (); , wp_enqueue_scripts(); function this function is used to load javascript files.
Steps to use wp_enqueue_scripts function –
1. Step 1- At this moment we already know how to register the load_scripts();
<?php function load_scripts() { }
2. Step 2-
Now we can enqueue the JavaScript files. We need to give path to the JavaScript file as mentioned below.
wp_enqueue_script('bootstrap-js','https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js',array('jquery'),'4.6.1',true);
Step 3 –
The final step towards loading JavaScript is to tell the WordPress to load the function. This step is to implement all the work we have done.
add_action('wp_enqueue_scripts','load_scripts');
This is not all, this way you can add other things such as google fonts and plugins scripts files as well.
With all this we have shown you everything you need to know to use wp_enqueue_style & wp_enqueue_script functions. If you like this and learnt something new then don’t forget to read our other articles.
