WordCamp Las Vegas 2013: Weaving Javascript in and out of WordPress

JavaScript is a programming language that enables you to create dynamically updating content, control multimedia, or animate images. It can update and change HTML and CSS. The language can also calculate, manipulate, and validate data. Understanding JavaScript (deeply) is key to a powerful WordPress site. 

This post covers four major topics:

• Loading JavaScripts
• Available Libraries
• Using CDNs
• Localize Script

To make the best use of the post you’ll want to understand JavaScript itself, functions, and actions.

Loading JavaScript

Loading JavaScripts is all about making them available to themes, plugins, and code. For example, let’s say you had a custom.js file that you want to make available for your theme to call. 

You wouldn’t want to just add a script tag into a template or header file. You also don’t want to just echo out a script that’s being called in. These methods don’t follow the best practices and if you do you’ll potentially create conflict issues with other scripts being called.

Instead, you want to rely on a few functions that are provided for adding and removing scripts the WordPress way. These are:

• wp_register_script() – get ready to use a script (but don’t load it up yet)
• wp_deregister_script() – remove a registered script
• wp_enqueue_script() – load that script into my theme/plugin so I can use it now
• wp_dequeue_script() – remove an enqueued script

The Process

Typically this is going to happen in functions.php or in a custom plugin but may occur in other places as well.

1. Use the wp_enqueue_scripts action to load in your selected JavaScripts.
2. Stage a script by calling the wp_register_script function.
3. Load the script from #2 using the wp_enqueue_script function.

There are some arguments for the wp_register_script() function:

• $handle – gives the script a unique nickname (required string).
• $src – where is the file (string).
• $deps – what other scripts have to be loaded first. (array).
• $ver – the script’s version number (string).
• $in_footer – should WordPress try and load this in the footer? This can be a boost to the load time for the page and so is often encouraged (boolean).

Note that there are a couple of similar actions (admin_enqueue_scripts and login_enqueue_scripts) that are used for the admin area and login screen respectively. They behave the same as the wp_enqueue action but affect their respective locations. It’s important to note that wp_enqueue_scripts fires on all requests.

There are a few handy implementation practices that can help you leverage scripts in a smarter way. The register and enqueue functions don’t need to happen in the same action they can be separated so you’re only enqueuing when you need to. Also, if you have a page or page type where the scripts don’t need to be enqueued you can use conditional statements to limit loading unless necessary. Finally, you can choose to skip the register function if you prefer, but it may be useful to keep it in place.

Styles Too

On a related note, you can use similar functions to register and enqueue stylesheets for your site:

• wp_register_style()
• wp_deregister_style()
• wp_enqueue_style()
• wp_dequeue_style()

Available JavaScript Libraries

WordPress has some default JavaScript libraries that are already available to be used in every install. You can find a complete listing of these scripts in the WordPress code reference. 

Note that these JavaScript libraries (and the URL for the current list) have been updated since the presentation in 2013 so be sure to look at the current list.

Using CDNs

When you’re faced with a high traffic site pulling in scripts from an external source can make a lot of sense. Offloading these calls can reduce your traffic (and hosting costs). This can also be a factor to help you optimize your site for better search results.

Setting this up can require you to deregister some scripts (if they’re among the scripts that are already available in WordPress) and enqueue the same script from the external source. Then you can call the external scripts with your register and enqueue functions. Use caution when doing this because it will be up to you to ensure that you’re using the appropriate library versions and that your customization doesn’t accidentally break anything in WordPress.

Localize Script

If you need access to data from WordPress in JavaScript it might be tempting to write your JavaScript in PHP. Try to avoid taking this approach as it’s prone to a number of issues. Instead, there is a WordPress core function, wp_localize_script(), that will allow you to create a JavaScript data object populated by PHP that you can access in your JavaScript code.

If you have any questions about JavaScript feel free to reach out. We’re always happy to schedule a quick consultation to walk you through any development issues.