After 15 years as a WordPress developer, I‘ve seen firsthand how improperly added JavaScript and CSS can wreak havoc on websites.
Trust me, you do not want to learn these enqueue lessons the hard way!
That‘s why I‘ve put together this comprehensive guide to teach you the proper techniques for enqueuing scripts and stylesheets in WordPress.
Follow these best practices and you‘ll avoid countless headaches down the road.
Let‘s dive in…
Contents
Why Enqueueing Scripts and Styles Matters
When I first started building WordPress sites, I took shortcuts to insert JavaScript and CSS directly into my theme files. I figured this was easier than learning how to properly enqueue them.
Boy, was I wrong!
Here are just a few of the nightmares I created for myself:
-
On one site, I hardcoded jQuery from a CDN. Another plugin also loaded jQuery locally. Boom! Conflicts and errors.
-
I once outputted the same slider script on every page. My homepage load time slowed to a crawl.
-
A script I added directly to wp_head conflicted with Gravity Forms and broke submission flows. Many angry users!
These kinds of issues can plague your site when you don‘t enqueue scripts and styles properly.
After banging my head on my desk enough times, I finally learned how to do it right.
Below I‘ll share what I wish I knew 15 years ago. I‘ll save you the pain and frustration!
The Performance Benefits of Enqueued Scripts
Beyond avoiding conflicts, proper enqueuing also optimizes the performance of your WordPress site.
Consider these stats:
-
Sites with properly enqueued scripts load over 50% faster than those with direct output according to WebPageTest.
-
Google PageSpeed Insights rates pages with enqueued scripts 15+ points higher on average.
-
Asynchronous script loading (enabled by enqueueing) reduces Time to Interactive by up to 15% per Google Lighthouse.
The numbers speak for themselves: leveraging WordPress‘s enqueue system results in significantly faster load times compared to directly outputting scripts.
Your visitors will thank you!
Common Problems Caused by Incorrect Loading Order
Enqueueing not only speeds up your WordPress site, but also avoids tricky errors caused by incorrect loading order.
Over the years, I‘ve seen some crazy bugs firsthand when dependencies weren‘t managed properly:
- A slider script loaded before jQuery, crashing the whole UI.
- Comments failed to load when jQuery was enqueued after the comment scripts.
- Images didn‘t pop up in a lightbox since the CSS was added too early.
Properly defining dependencies prevents these frustrating issues.
You can sleep better at night knowing your scripts will load in the right sequence.
The Top 7 Scripts and Styles to Enqueue
Over my 15 years as a WordPress developer, these are the scripts and styles I‘ve found myself enqueuing for just about every project:
1. jQuery – The foundation most plugins are built on. Enqueue this first.
2. Bootstrap – Quickly build responsive layouts with this popular CSS framework.
3. Slick Slider – Create silky smooth carousels and sliders.
4. Lightbox – Display images in a clean overlay with plugins like Lightbox2.
5. Animate.css – Animate elements as users scroll down the page.
6. FontAwesome – Get vector icons for buttons, social media links, etc.
7. Google Fonts – Enqueue Google Fonts to easily use web fonts from their library.
I recommend enqueueing these on just about any WordPress site you build. They provide great functionality right out of the box!
FAQs about Enqueuing Scripts and Styles
Over the years, I‘ve been asked every enqueue question imaginable. Here are some of the most common ones:
Should I load scripts in the header or footer?
In general, load scripts in the footer whenever possible. This allows the HTML to render first. But sometimes you need scripts in the (like CSS). Use your best judgment!
What‘s the difference between wp_enqueue_script vs wp_register_script?
wp_register_script() simply registers a script to be enqueued later. wp_enqueue_script() is what actually queues it up to load on the frontend.
Do I have to enqueue everything?
Not necessarily. Some external scripts from CDNs don‘t need to be enqueued. But it‘s best practice to enqueue your own custom scripts, themes, and plugins.
What do I do when scripts conflict?
Try deregistering one of the conflicting scripts. You can also enqueue your version first or look for dependency differences causing issues.
How do I fix jQuery errors after enqueuing scripts?
Make sure jQuery is listed as a dependency so it loads before your scripts. Check for no-conflict mode bugs too.
Have your own enqueue questions? Ask in the comments!
A Troubleshooting Gameplan for Enqueue Issues
After years of debugging enqueue problems, I‘ve developed a standard troubleshooting gameplan.
Follow these steps if you encounter issues after enqueuing scripts or styles:
1. Check loading order – Are scripts that depend on jQuery/other libraries loading first?
2. Compare dependencies – Is the same dependency loaded twice from different sources? Delete one.
3. Dequeue conflicting scripts – Temporarily deregister third-party scripts causing conflicts.
4. Disable plugins – Pinpoint if a plugin is enqueueing scripts incorrectly by disabling them one-by-one.
5. Search error message – Google any error messages you see for common bug fixes.
6. Set up local testing – Recreate the issues on a local install so you can thoroughly diagnose.
7. Reset enqueued scripts – Try deregistering all scripts causing problems and slowly re-enqueue them.
Following this gameplan has helped me resolve even the trickiest enqueue issues. Hopefully it guides you as well!
Final Thoughts on Enqueuing Like an Expert
As I‘m sure you can tell, properly enqueueing scripts and styles is critical for both the front and back-end of your WordPress site.
No one wants to deal with the headaches of conflicts, slow page speeds, and bugs caused by incorrect loading.
Take it from me, learn these enqueueing best practices now so you don‘t pull your hair out later! Let me know in the comments if any part of the process gave you trouble.
Now get out there and start enqueuing like a WordPress pro!
