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

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.

Written by the Team at Pixel Jar

We hope you got something useful out of that post. If you'd like to read more we have an active blog with topics across the spectrum of website development. If you're researching information for a project we'd love to talk to you about it.

Purposeful Partnering

Purposeful Partnering

Pixel Jar has been a partner with WP Engine since 2010. In that time we’ve grown to rely on their services more and more for our clients. Here are some of our favorites reasons why. Why WP Engine Rocks WP Engine provides service oriented, managed WordPress hosting, but it’s their focus on providing an amazing…
Read More
Beaver Builder responsive headers

Beaver Builder Responsive Headers

Creating custom responsive behaviors with Beaver Builder is a snap. In this post, we’re going to look at Beaver Builder responsive headers and a good method for managing content between breakpoints. Beaver Themer is the Key to a Responsive Header Beaver Builder is a powerful tool and you’re able to create a lot of flexible…
Read More

Learn how to understand your website's strengths and weaknesses, and how to make changes for the best possible chance at success.

Download Now

How Can We Help You?

We want to build your next project.

Connect with Pixel Jar

Our Community

Subscribe to learn more about the goings on at Pixel Jar.

  • Note: Your email will be added to our CRM and be used to receive emails from Pixel Jar. You can unsubscribe at any time.

  • This field is for validation purposes and should be left unchanged.