Enqueueing Scripts and Styles in WordPress: A Step-by-Step Tutorial

Enqueueing scripts and styles is an essential aspect of WordPress theme development. It ensures that the necessary scripts and styles are properly registered and loaded in your WordPress website to enhance performance and ensure proper functioning. This process involves creating a function, enqueueing scripts and styles, and adding the function to the wp_enqueue_scripts action hook.

In this tutorial, we will explore the steps involved in enqueueing scripts and styles in WordPress, including creating a function, enqueueing styles and scripts, and adding the function to the wp_enqueue_scripts action hook. By the end of this tutorial, you will have the knowledge and tools to properly enqueue scripts and styles in your WordPress themes.

To start, we need to create a function that will contain all the code for enqueueing our scripts and styles. This function should be placed within your theme’s functions.php file.

function enqueue_scripts_styles() {
  // code for enqueueing scripts and styles goes here
}
Code language: PHP (php)

Enqueueing Styles

Next, we can enqueue our stylesheets using the wp_enqueue_style function. This function takes several parameters, including the name of the stylesheet (a unique identifier), its source URL, any dependencies it may have, a version number, and a media type.

wp_enqueue_style( 'style-name', get_template_directory_uri() . '/style.css', array(), '1.0.0', 'all' );
Code language: PHP (php)

• 'style-name' is the unique identifier for the stylesheet.
• get_template_directory_uri() . '/style.css' is the source URL of the stylesheet. The get_template_directory_uri() function returns the URL of the current theme directory.
• array() specifies any dependencies the stylesheet may have, such as other stylesheets that need to be loaded first. If there are no dependencies, an empty array should be passed.
• '1.0.0' is the version number of the stylesheet.
• 'all' specifies the media type for which the stylesheet should be loaded, such as ‘all’, ‘print’, ‘screen’, etc.

Enqueueing Scripts

Similarly, we can enqueue our scripts using the wp_enqueue_script function. This function takes several parameters, including the name of the script (a unique identifier), its source URL, any dependencies it may have, a version number, and whether it should be loaded in the header or footer.

wp_enqueue_script( 'script-name', get_template_directory_uri() . '/script.js', array(), '1.0.0', true );
Code language: PHP (php)

• 'script-name' is the unique identifier for the script.
• get_template_directory_uri() . '/script.js' is the source URL of the script. The get_template_directory_uri() function returns the URL of the current theme directory.
• array() specifies any dependencies the script may have, such as other scripts that need to be loaded first. If there are no dependencies, an empty array should be passed.
• '1.0.0' is the version number of the script.
• true specifies whether the script should be loaded in the header (true) or footer (false) of the page.

Adding the Function to the WordPress Action Hook

The final step is to add the function to the wp_enqueue_scripts action hook. This hook is called when WordPress is preparing to load the scripts and styles for a page, and it allows you to add your own scripts and styles to be loaded as well.

add_action( 'wp_enqueue_scripts', 'enqueue_scripts_styles' );
Code language: PHP (php)

Final Code

Here is the final code for enqueueing scripts and styles in WordPress:

function enqueue_scripts_styles() {
  // Enqueue stylesheet
  wp_enqueue_style( 'style-name', get_template_directory_uri() . '/style.css', array(), '1.0.0', 'all' );
  
  // Enqueue script
  wp_enqueue_script( 'script-name', get_template_directory_uri() . '/script.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'enqueue_scripts_styles' );
Code language: PHP (php)

Note: Make sure to replace 'style-name' and 'script-name' with unique names for your stylesheet and script, and replace /style.css and /script.js with the actual URLs of your stylesheet and script.

That’s it! With these steps, you should now be able to properly enqueue scripts and styles in WordPress. This is a crucial step in ensuring that your website is optimized for performance, as well as making sure that your scripts and styles are loaded in the correct order and at the right time.