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)

    • Photo Credit: https://www.pokemon.com/us/pokedex/Tangela
    • Code Example: Actual Malware.
    • Used For: Breaking into your admin dashboard. Inserting spam links into your posts.
    • Identifying Features: Code that is inserted inline into PHP and HTML files are usually not minimized. If you see an eval() like this in a .php file, especially if it is out of place or the same code in multiple files, it is usually malware. Use scanners.
    • Learn More: https://sucuri.net/
  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

Was this article helpful?
YesNo
Posted in . Bookmark the . Last updated: .