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.

menu usability with CSS

Improving Menu Usability with CSS

Menus are a fundamental component of a website. Users expect to be able to use a menu to navigate through your website. Menus come in many different shapes and sizes, but most follow similar patterns. There are several CSS features that can improve menu usability. Take the following menu: This is a pretty standard pattern…
Read More
Web Design for The Ethical Society

Web Design for The Ethical Society

We recently had the opportunity to work on a web design and development project with The Ethical Society of St. Louis. An Ethical Society is organized similarly to a religious organization. Instead of being focused on the worship of a specific deity the society focuses on the betterment of people and upholding ethical practices in…
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.