Skip to main content
Wordpress Development

How to correctly add styles and javascript to your WordPress theme

August 21, 2023 October 18th, 2023

When developing or customizing a WordPress theme, ensuring the best practices in adding styles and JavaScript files is crucial. Directly embedding them in the header or footer might seem like the straightforward approach, but this can lead to various issues, including performance setbacks, conflicts, and non-compliance with WordPress standards. Instead, WordPress offers a powerful, built-in way to handle this: the wp_enqueue_script() and wp_enqueue_style() functions.

Let’s delve into how to use these functions correctly and efficiently:

1. Understanding the Importance of Enqueuing

Before we dive into the how-to, it’s essential to understand the why. By enqueuing scripts and styles:

  • Avoid Conflicts: Ensures no multiple versions of scripts or styles are loaded.
  • Optimize Load Times: Only load what’s necessary and when it’s necessary.
  • Dependencies Management: Guarantees the correct loading order based on dependencies.
  • Flexibility: Allows child themes to override or dequeue parent theme scripts/styles.

2. Using wp_enqueue_script() and wp_enqueue_style()

Both functions serve similar purposes but for different files. Here’s the basic syntax:

wp_enqueue_script($handle, $src, $deps, $ver, $in_footer); 
wp_enqueue_style($handle, $src, $deps, $ver, $media);

Let’s break down the arguments:

  • $handle: A unique name for your script or style.
  • $src: The path to your file.
  • $deps: An array of other handles this script/style depends on.
  • $ver: The version number. Helps in cache busting.
  • $in_footer (for scripts): Whether to load the script in the footer (true) or header (false).
  • $media (for styles): Specifies the media for which this stylesheet has been defined, like ‘all’, ‘print’, or ‘screen’.

3. Adding to Your Theme

To enqueue scripts and styles, you’ll typically hook into the wp_enqueue_scripts action. This is best placed in your theme’s functions.php file.

function my_theme_enqueue_styles_and_scripts() { 

// Enqueue styles 
wp_enqueue_style('my-style', get_template_directory_uri() . '/css/my-style.css', array(), '1.0.0', 'all'); 

// Enqueue scripts 
wp_enqueue_script('my-script', get_template_directory_uri() . '/js/my-script.js', array('jquery'), '1.0.0', true); 

} 
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles_and_scripts');

In the above example:

  • We’re loading a stylesheet named my-style.
  • We’re also loading a JavaScript file named my-script which is dependent on jQuery.

4. Conditional Loading

Sometimes, you might want to load scripts or styles only under certain conditions. For instance, a specific script might only be required for a particular template or post type:

if (is_page_template('template-contact.php')) {
wp_enqueue_script('google-maps', 'https://maps.googleapis.com/maps/api/js', array(), null, true);
}

5. Managing Third-Party Scripts

For scripts like Google Fonts or other CDN-hosted resources, enqueue them as you would with locally hosted resources:

wp_enqueue_style('google-fonts', 'https://fonts.googleapis.com/css?family=Roboto:400,700', array(), null);

Remember to always set a version number or use null to ensure WordPress doesn’t append its own.

Conclusion

Incorporating scripts and styles into your WordPress theme requires a structured approach to maintain flexibility, performance, and best practices. By enqueueing these resources, you align with the WordPress ecosystem, ensuring your theme is robust and future-proof. So next time you’re tempted to drop that link or script tag directly into your header or footer, pause and consider the powerful, built-in alternatives that WordPress provides.