Today’s WordPress developers need to understand a variety of JavaScript methods and frameworks. This article covers the most common methods you’ll see in the wild in both older and more forward-looking WordPress code. Some examples include AJAX with jQuery, ES6, the Heartbeat API, REACT, and Gutenberg blocks.

My goal is to help you feel more comfortable opening up any JS file you come across in the WordPress world.

A Wild JavaScript Appears


Matt Mullenweg - Learn JavaScript Deeply
Jason Coleman - Which JavaScript should you learn?

A few years ago, Matt Mullenweg asked us to learn JavaScript deeply.

I think Matt meant for PHP developers to learn JavaScript and for us to learn vanilla JavaScript in particular so we could program with it regardless of framework. Learning JavaScript deeply was important, because over the next few years, framework development continued quickly. Every year a different library, framework, or flavor of JS would become popular.

Vanilla JavaScript developed quickly as well with the base language itself gaining new features. Different browsers adopted the new features at different rates, requiring polyfill solutions, requiring compilers and package managers. I honestly don’t know how new developers pick this stuff up. The JavaScript landscape seems very confusing right now. Maybe it’s more confusing for folks like me who have been using JavaScript since the 1995.

The following sections go through 10 or so examples of JavaScript you will see in the wild with the intent of helping you to detect what kind of JavaScript, libraries, frameworks, and tools are being used.


Commonly Found Examples of JavaScript in WordPress

  1. Vanilla JavaScript Example

    Vanilla JavaScript


  2. Minimized JavaScript Example

    Minimized


  3. Minimized JavaScript Example with Malware

    Minimized (Malware)


  4. jQuery JavaScript Example

    jQuery


  5. AJAX JavaScript Example

    AJAX

    • Photo Credit: https://www.pokemon.com/us/pokedex/Claydol
    • Code Example: https://github.com/bwawwp/bwawwp/blob/master/chapter-09/example-08.js
    • Used For: Asynchronous JavaScript and XML. Asynchronous = making many calls back and forth with the web server once a page is loaded. Usually sending small amounts of data rather than the full page. Originally used XML as the primary data format. Now use JSON a lot.
    • Identifying Features: ajaxurl, data, error, success, complete jQuery really made it easier to do AJAX requests. Before that you would use the XMLHttpRequest and use a bit more complicated code to manage the state of the requests. Modern JavaScript has the fetch command, which is more similar to how jQuery and other libraries use AJAX without requiring a library. (I’m looking for a good fetch example to add if you have one in some real WordPress code.)
    • Learn More: https://codex.wordpress.org/AJAX_in_Plugins

  6. JSON JavaScript Example

    JSON


  7. Inline vs JS File JavaScript Example

    Inline vs JS files

    • Photo Credit: https://www.pokemon.com/us/pokedex/Rotom
    • Code is From: https://github.com/strangerstudios/paid-memberships-pro/blob/master/includes/profile.php (Same example as the jQuery slide.)
    • Used For: If you have a single use script meant to be used exactly on one page/template/etc, I still think it’s okay to put JavaScript into a <script> tag in your PHP code. In general tholugh, you should put JavaScript in a .js file and get data into your scripts through wp_localize_script and AJAX.
    • Identifying Features: script tags. found in .php files. If one piece of inline JavaScript breaks, it will halt the execution of all inline JavaScript. One of the many reasons putting JS in its own file is better.
    • Learn More: https://codex.wordpress.org/Using_Javascript

  8. NPM JavaScript Example

    NPM


  9. ES5 / ES6 / ESNext JavaScript Example

    ES5 vs ES6 vs ESNext


  10. Babel JavaScript Example

    Babel


  11. Webpack JavaScript Example

    Webpack


  12. REACT JavaScript Example

    REACT


  13. Gutenberg Block JavaScript Example

    Gutenberg Block


Watch the talk here


This entry was posted by Jason Coleman in FAQ and tagged . Bookmark the permalink. Last updated: May 15, 2019. Titled A Wild JavaScript Appears: Understanding The Many Ways JS is Used with WordPress

Leave a Reply

For faster support related to issues on your specific site please open a ticket in our members support area.

Your email address will not be published. Required fields are marked *