The Coding Languages of WordPress – JavaScript

By admin, 1 April, 2023

JavaScript

Illustration of man walking with code balloon in the background.

Contents

  • What is JavaScript?
  • JavaScript Cons
  • JavaScript & WP
  • React JS
  • JS Resources
  • This is the fourth in a series of posts looking at the coding languages that form a WordPress site. It features a quick overview of how JavaScript works on your site.


    In general, when coding a site for WordPress, you should prioritize languages in this order. First, accomplish anything you can with HTML, the subject of the first article in the series. Then with CSS, the subject of the second article, then PHP, the subject of the third article, then JavaScript, the subject of this article. Doing so will minimize the size of your webpages, speed up loading, and help your SEO and user experience.

    PHP and JavaScript code is more likely to be updated by developers once a site is live compared to HTML and CSS, which end users may also edit.

    While HTML provides your site’s meaning and structure and CSS provides its aesthetics, PHP, along with JavaScript, provides interactivity and functionality. They are the frontend languages used in WordPress. In other words, they control what users see in the browser.

    What is JavaScript?

    Brendan Eich created JavaScript in 1995. According to the Mozilla Developer Network, "JavaScript (JS) is a lightweight, interpreted, or just-in-time compiled programming language with first-class functions. While it is most well-known as the scripting language for Web pages, many non-browser environments also use it, such as Node.js, Apache, CouchDB, and Adobe Acrobat.

    JavaScript is a prototype-based, multi-paradigm, single-threaded, dynamic language, supporting object-oriented, imperative, and declarative (e.g. functional programming) styles."

    As you can see from this headache-inducing definition, JavaScript is a complicated, versatile, and expansive scripting language.

    Like PHP, JavaScript can control the dynamic parts of your webpages. That includes non-static content and functionality that some WordPress plugins provide.

    JavaScript

    JavaScript is often deployed as client-side programming. This deployment means the JavaScript script is run from the user’s browser as they view your site. After HTML and CSS load and create the structure and look of your pages, JavaScript can run on top of them to achieve some dynamic goal. 

    Like other scripting languages, JS has variables, data types, operators, values, parameters, expressions, if…elseif...else statements, switch statements, loops, functions, arrays, scopes, and superglobals. JavaScript received a significant update in 2015, and its current version is known as ES2020.

    You can use JS for:

    • Form validation, where you need to store values inside variables
    • Third-party APIs that can be placed on pages or posts
    • Executing events
    • Tracking code
    • and more

    JavaScript can also be run on the backend of websites and web applications via Node.js.

    JavaScript Downsides

    Performance

    While JavaScript's client-side scripting capabilities can make your site more dynamic, it also introduces the possibility of inefficiencies by relying on your end user's browser and device.

    In other words, it has the potential to bog your site down with performance issues, mostly due to 3rd party scripts as compared to your core site JS. So keep your use of WordPress plugins to a minimum.

    Hence, JavaScript should only be used when absolutely needed. See my note at the top of this page.

    Decoupling your WordPress frontend and backend with a headless CMS option is one way to deal with this and other problems, including those inherent to WordPress itself. You can use something like React JS (see below) for your frontend and WordPress for your backend.

    At this point, you will need to have a developer involved with your website (including content management) due to added complexity. It also costs much more and requires separate hosting for the front and back ends. However, that is the subject of another article.

    Fortunately, this approach is not necessary for most small business sites.

    Browser Compatibility

    Different browsers can interpret your JavaScript in different ways. So, be sure to test your code in all the major browsers. The "Can I Use?" link at the bottom of this article is a good tool to check browser compatibility.

    Cross-site Scripting

    JavaScript is vulnerable to cross-site scripting (XSS).

    According to Wikipedia, "Cross-site scripting attacks use known vulnerabilities in web-based applications, their servers, or the plug-in systems on which they rely. Exploiting one of these, attackers fold malicious content into the content being delivered from the compromised site.

    When the resulting combined content arrives at the client-side web browser, it has all been delivered from the trusted source, and thus operates under the permissions granted to that system.

    By finding ways of injecting malicious scripts into web pages, an attacker can gain elevated access privileges to sensitive page content, to session cookies, and to a variety of other information maintained by the browser on behalf of the user. Cross-site scripting attacks are a case of code injection."

    Since most JS in your site comes from 3rd party themes and plugins, it is not as secure as the core WordPress code, and you must be careful with it. By comparison, PHP is server-side code and if done correctly more secure.

    Javascript and WordPress

    In WordPress, as just mentioned, JavaScript code is used in parts of your theme and some plugins. There are also plugins that let you add it to your site. And you can add JS scripts to your header and footer.

    Illustration of woman sitting on React logo.

    React JS

    React JS is a code library for building user interfaces. It lets you compose sophisticated UIs from small and isolated pieces of code called components. You can build entire website frontends with it (as mentioned above).

    React is important because it is used to build WordPress's new content blocks. In effect, the blocks are React components.

    Dev.to explains the technical truth, "Gutenberg uses a modern, React-based front end stack. The foundation is wp.element which is a thin abstraction layer atop React. Gutenberg uses it to create the Blocks and static HTML for persisting the content. The editor-view uses the React component which saves static, serialized HTML. The visitor receives the saved static HTML instead of the React component."

    Soon WordPress headers, footers, rails, and widgets can be React JS-based. And eventually, theme layouts will be built with it. WordPress is moving away from PHP to React for much of its frontend functionality.

    This change is fortunate because the new blocks included with WordPress are replacing 3rd party plugin functionality with its inherent risk. It will also help with the optional decoupling of WordPress's front and backends, and the use of headless mentioned earlier in this article.

    React can also render on the server using Node.js and power mobile apps using React Native.

    It was created by Jordan Walke, a software engineer at Facebook in 2011. Despite coming from the embodiment of evil, :( React is a useful development. ;) Plus, you shouldn't hold someone's parents against them.

    Wrapping Up

    As you can see, a lot of things are going on with JavaScript, and this article only looked at the tip of the iceberg. Since JavaScript is the most complicated and extensive coding language used in WordPress, here are some reference resources for future use. Be sure to explore all the external links in the article above as well.

    JavaScript Resources

    Author

    Reuben Walker, Jr.

    Ringmaster 
    Mobile Atom Code