How to enqueue scripts in WordPress from CDN?

How to Enqueue Scripts in WordPress from CDN: A Complete Guide

👋 Hey, WordPress enthusiasts! If you've ever found yourself wanting to load scripts from a CDN (Content Delivery Network) in your WordPress website, you've come to the right place. In this blog post, we'll walk you through the process of correctly enqueueing scripts from a CDN, so you can enhance your website's performance ⚡️ and make it load faster for your users. Let's get started! 🚀

Understanding the Problem

📚 The first step is to understand the problem. In this scenario, our fellow developer is trying to replicate a pen from CodePen, which requires loading three script files from a CDN and an additional one from the server. 🌐 However, they are unsure about the correct syntax to load the scripts from the CDN. Let's take a look at the script files they need to enqueue:

• jQuery: https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js

• Slick: https://cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js

• TweenMax: https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js

The Enqueuing Process

✅ To properly enqueue scripts from a CDN in WordPress, you need to follow these simple steps:

1. Open your theme's functions.php file

📝 Navigate to your WordPress theme's directory and locate the functions.php file. Open it in a text editor of your choice, such as Sublime Text or Visual Studio Code. This is where we'll be adding our code.

2. Use the wp_enqueue_script function

🖊️ In the functions.php file, you'll need to enqueue each script file using the wp_enqueue_script function. This function allows you to add a script to the list of registered scripts that will be loaded on your website.

Here's an example of how to enqueue the jQuery script from the CDN:

function enqueue_scripts_from_cdn() {
    wp_enqueue_script( 'jquery', 'https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js', array(), '2.1.3', true );
}
add_action( 'wp_enqueue_scripts', 'enqueue_scripts_from_cdn' );

In this example:

• The first parameter (jquery) is the handle for the script. You can choose any unique name to identify the script.

• The second parameter (https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js) is the URL of the script file on the CDN.

• The third parameter (array()) is an array of script dependencies. If your script relies on another script, you can specify it here.

• The fourth parameter (2.1.3) is the version number of the script. It's important to include a version number to prevent conflicts and ensure compatibility with other scripts or plugins.

• The fifth parameter (true) is a boolean value indicating whether the script should be loaded in the footer (true) or the header (false) of your website.

🔁 Repeat this process for each script you want to enqueue from the CDN.

Final Thoughts

🎉 Congratulations! You've successfully learned how to enqueue scripts in WordPress from a CDN. By properly enqueuing scripts, you ensure that they are loaded in the correct order and reduce the risk of conflicts with other scripts or plugins.

🚀 Remember, using a CDN for scripts can significantly improve your website's performance by serving them from servers located closer to your users. This means faster load times and a better user experience. 💪

📢 Now it's your turn! Have you ever used a CDN for scripts in WordPress? Share your experience in the comments below and let us know if you have any questions or additional tips. And don't forget to share this post with your fellow WordPress developers!

💌 Stay tuned for more exciting WordPress tips and tricks on our blog. Happy coding! 💻