How do I enqueue scripts and styles in WordPress? Why it is needed?

[Christian J]

Hello everyone,
I am new to WordPress. can you tell me how can i enqueue styles and scripts in WordPress.
For that i need some help from you, thank you in advance

[Rachel S]

In WordPress, loading javascript files and external CSS to your website is called enqueue scripts and styles.


To enqueue scripts and styles properly, follow these steps:

1. Use wp_enqueue_scripts action hook:
Use the wp_enqueue_scripts action hook in your theme’s function.php file or a custom plugin to enqueue scripts and styles.

2. Register your scripts and styles.
Before enqueuing scripts and style, they must be registered using the “wp_register_script()” and “wp_register_style()” functions. Allows you to set version numbers and dependencies.

• wp_register_script(‘my-script’,‘http://example.com/path/to/ add-script,js’, array(‘jquery’), ‘1.0’, true);

The first argument is the handle for the script, which must be unique.

The second argument includes the URL of the script file. The third argument is an array of dependencies, or other scripts on which this script depends. The fourth argument is the version number for the script that may be used for cache busting. The script should either load in the header (true) or footer (false), which specifies the final argument.

Registering a script:



Registering a style:



3. Enqueue script or style:
Enqueue script and styles using “wp_enqueue_script()” and “wp_enqueue_style()” functions after registration.

script:



style:


4. Properly handle dependencies:
Make sure to include them as an array of handles in the wp_register_script() or wp_register_style() function if your script or style depends on another script or style. WordPress automatically loads the dependencies before your script or style.


5. Use the correct hook priority:
You can define a priority for the action hook to ensure your scripts and styles are enqueued at the proper moment if they depend on specific libraries or settings that other plugins or themes may enqueue.


Example with a custom priority(default is 10)



Why is it needed?

WordPress requires that scripts and styles be enqueued for the following reasons:

1. Dependency management: You can declare dependencies for your scripts and styles by enqueuing. To avoid conflicts and mistakes, this ensures that any necessary libraries or files are loaded before your scripts.
2. Avoiding Conflicts: Without employing the right enqueuing method, specific WordPress themes and plugins may attempt to load their scripts and styles directly. Conflicts may result if various scripts attempt to utilize the same variable names or load incompatible versions of libraries. You follow WordPress best practices and lessen the likelihood of these conflicts by using wp_enqueue_scripts.
3. Version control: Cache busting is made possible by establishing version numbers for scripts and styles while enqueuing. Users will automatically obtain the most recent version of your files when you update them rather than using cached older ones.
4. Performance optimization: Better site performance is the result of proper enqueuing. Only the pages that require them are loaded with scripts and styles, lowering the number of superfluous HTTP requests and speeding up load times.
5. Accessibility and Compatibility: Following WordPress standards, enqueuing makes sure that scripts are loaded in a way that is accessible and compatible with a variety of devices and browsers.
6. Security and code quality: Ensuring the security and stability of your WordPress website is made more accessible by adhering to the suggested procedures for enqueuing scripts and styles. It promotes clean, well-structured code that is simpler to maintain and debug.