Title: JavaScript
Published: 2 February 2024
Last modified: 31 July 2024

---

[Home](https://learn.wordpress.org)[Courses](https://learn.wordpress.org/courses/)
[Beginner WordPress Developer](https://learn.wordpress.org/course/beginner-wordpress-developer/)
JavaScript

 [ Exit Course ](https://learn.wordpress.org/course/beginner-wordpress-developer/)

 1.   a.  [   WordPress and web servers  ](https://learn.wordpress.org/lesson/wordpress-and-web-servers/)
         [Preview](https://learn.wordpress.org/lesson/wordpress-and-web-servers/)
      b.  [   The WordPress file structure  ](https://learn.wordpress.org/lesson/the-wordpress-file-structure/)
         [Preview](https://learn.wordpress.org/lesson/the-wordpress-file-structure/)
      c.  [   The WordPress database  ](https://learn.wordpress.org/lesson/the-wordpress-database/)
         [Preview](https://learn.wordpress.org/lesson/the-wordpress-database/)
      d.  [   Permalinks, rewriting urls on Apache and Nginx  ](https://learn.wordpress.org/lesson/permalinks-rewriting-urls-on-apache-and-nginx/)
         [Preview](https://learn.wordpress.org/lesson/permalinks-rewriting-urls-on-apache-and-nginx/)
      e.  [   Front-end page request  ](https://learn.wordpress.org/lesson/front-end-page-request/)
         [Preview](https://learn.wordpress.org/lesson/front-end-page-request/)
      f.  [   Admin page request  ](https://learn.wordpress.org/lesson/admin-page-request/)
         [Preview](https://learn.wordpress.org/lesson/admin-page-request/)
 2.   6 lessons
 3.   a.  [   Local development environment  ](https://learn.wordpress.org/lesson/local-development-environment/)
         [Preview](https://learn.wordpress.org/lesson/local-development-environment/)
      b.  [   WordPress Installation  ](https://learn.wordpress.org/lesson/wordpress-installation/)
         [Preview](https://learn.wordpress.org/lesson/wordpress-installation/)
      c.  [   Code editor  ](https://learn.wordpress.org/lesson/code-editor/) [Preview](https://learn.wordpress.org/lesson/code-editor/)
      d.  [   Other useful development tools  ](https://learn.wordpress.org/lesson/other-useful-development-tools/)
         [Preview](https://learn.wordpress.org/lesson/other-useful-development-tools/)
 4.   4 lessons
 5.   a.  [   HTML  ](https://learn.wordpress.org/lesson/html/) [Preview](https://learn.wordpress.org/lesson/html/)
      b.  [   CSS  ](https://learn.wordpress.org/lesson/css/) [Preview](https://learn.wordpress.org/lesson/css/)
      c.  [   JavaScript  ](https://learn.wordpress.org/lesson/javascript/) [Preview](https://learn.wordpress.org/lesson/javascript/)
      d.  [   PHP  ](https://learn.wordpress.org/lesson/php/) [Preview](https://learn.wordpress.org/lesson/php/)
      e.  [   MySQL  ](https://learn.wordpress.org/lesson/mysql/) [Preview](https://learn.wordpress.org/lesson/mysql/)
 6.   5 lessons
 7.   a.  [   WordPress Hooks  ](https://learn.wordpress.org/lesson/wordpress-hooks/) 
         [Preview](https://learn.wordpress.org/lesson/wordpress-hooks/)
      b.  [   Action Hooks  ](https://learn.wordpress.org/lesson/action-hooks/) [Preview](https://learn.wordpress.org/lesson/action-hooks/)
      c.  [   Filter Hooks  ](https://learn.wordpress.org/lesson/filter-hooks/) [Preview](https://learn.wordpress.org/lesson/filter-hooks/)
      d.  [   Working with hooks  ](https://learn.wordpress.org/lesson/working-with-hooks/)
         [Preview](https://learn.wordpress.org/lesson/working-with-hooks/)
 8.   4 lessons
 9.   a.  [   Introduction to themes for developers  ](https://learn.wordpress.org/lesson/what-is-a-theme/)
         [Preview](https://learn.wordpress.org/lesson/what-is-a-theme/)
      b.  [   Theme structure  ](https://learn.wordpress.org/lesson/theme-structure/) 
         [Preview](https://learn.wordpress.org/lesson/theme-structure/)
      c.  [   Main stylesheet  ](https://learn.wordpress.org/lesson/main-stylesheet/) 
         [Preview](https://learn.wordpress.org/lesson/main-stylesheet/)
      d.  [   Templates  ](https://learn.wordpress.org/lesson/templates-3/) [Preview](https://learn.wordpress.org/lesson/templates-3/)
      e.  [   Global settings and styles  ](https://learn.wordpress.org/lesson/global-settings-and-styles/)
         [Preview](https://learn.wordpress.org/lesson/global-settings-and-styles/)
      f.  [   Create Block Theme plugin  ](https://learn.wordpress.org/lesson/create-block-theme-plugin/)
         [Preview](https://learn.wordpress.org/lesson/create-block-theme-plugin/)
 10.  6 lessons
 11.  a.  [   What is a plugin?  ](https://learn.wordpress.org/lesson/what-is-a-plugin/)
         [Preview](https://learn.wordpress.org/lesson/what-is-a-plugin/)
      b.  [   Plugin requirements  ](https://learn.wordpress.org/lesson/plugin-requirements/)
         [Preview](https://learn.wordpress.org/lesson/plugin-requirements/)
      c.  [   Custom post types  ](https://learn.wordpress.org/lesson/custom-post-types/)
         [Preview](https://learn.wordpress.org/lesson/custom-post-types/)
      d.  [   Custom taxonomies  ](https://learn.wordpress.org/lesson/custom-taxonomies/)
         [Preview](https://learn.wordpress.org/lesson/custom-taxonomies/)
      e.  [   Custom post type data  ](https://learn.wordpress.org/lesson/custom-post-type-data/)
         [Preview](https://learn.wordpress.org/lesson/custom-post-type-data/)
      f.  [   Enqueuing CSS or JavaScript  ](https://learn.wordpress.org/lesson/enqueuing-css-or-javascript/)
         [Preview](https://learn.wordpress.org/lesson/enqueuing-css-or-javascript/)
 12.  6 lessons
 13.  a.  [   Setting up your block development environment  ](https://learn.wordpress.org/lesson/setting-up-your-block-development-environment/)
         [Preview](https://learn.wordpress.org/lesson/setting-up-your-block-development-environment/)
      b.  [   Scaffolding a new block  ](https://learn.wordpress.org/lesson/scaffolding-a-new-block/)
         [Preview](https://learn.wordpress.org/lesson/scaffolding-a-new-block/)
      c.  [   Building your first block  ](https://learn.wordpress.org/lesson/building-your-first-block/)
         [Preview](https://learn.wordpress.org/lesson/building-your-first-block/)
      d.  [   Block functionality  ](https://learn.wordpress.org/lesson/block-functionality/)
         [Preview](https://learn.wordpress.org/lesson/block-functionality/)
      e.  [   Block attributes  ](https://learn.wordpress.org/lesson/block-attributes-2/)
         [Preview](https://learn.wordpress.org/lesson/block-attributes-2/)
      f.  [   Block supports and styles  ](https://learn.wordpress.org/lesson/block-supports-and-styles/)
         [Preview](https://learn.wordpress.org/lesson/block-supports-and-styles/)
      g.  [   Static vs dynamic blocks  ](https://learn.wordpress.org/lesson/static-vs-dynamic-blocks/)
         [Preview](https://learn.wordpress.org/lesson/static-vs-dynamic-blocks/)
 14.  7 lessons
 15.  a.  [   The WordPress REST API  ](https://learn.wordpress.org/lesson/the-wordpress-rest-api/)
         [Preview](https://learn.wordpress.org/lesson/the-wordpress-rest-api/)
      b.  [   Using the WordPress REST API  ](https://learn.wordpress.org/lesson/using-the-wordpress-rest-api/)
         [Preview](https://learn.wordpress.org/lesson/using-the-wordpress-rest-api/)
      c.  [   Interacting with the WordPress REST API  ](https://learn.wordpress.org/lesson/interacting-with-the-wordpress-rest-api/)
         [Preview](https://learn.wordpress.org/lesson/interacting-with-the-wordpress-rest-api/)
      d.  [   Extending the WordPress REST API  ](https://learn.wordpress.org/lesson/extending-the-wordpress-rest-api/)
         [Preview](https://learn.wordpress.org/lesson/extending-the-wordpress-rest-api/)
 16.  4 lessons
 17.  a.  [   Securely developing plugins and themes  ](https://learn.wordpress.org/lesson/securely-developing-plugins-and-themes/)
         [Preview](https://learn.wordpress.org/lesson/securely-developing-plugins-and-themes/)
      b.  [   Fixing common security vulnerabilities  ](https://learn.wordpress.org/lesson/fixing-common-security-vulnerabilities/)
         [Preview](https://learn.wordpress.org/lesson/fixing-common-security-vulnerabilities/)
      c.  [   Tools to detect security vulnerabilities  ](https://learn.wordpress.org/lesson/tools-to-detect-security-vulnerabilities/)
         [Preview](https://learn.wordpress.org/lesson/tools-to-detect-security-vulnerabilities/)
 18.  3 lessons
 19.  a.  [   What is Internationalization?  ](https://learn.wordpress.org/lesson/what-is-internationalization/)
         [Preview](https://learn.wordpress.org/lesson/what-is-internationalization/)
      b.  [   The commonly used Internationalization functions  ](https://learn.wordpress.org/lesson/the-commonly-used-internationalization-functions/)
         [Preview](https://learn.wordpress.org/lesson/the-commonly-used-internationalization-functions/)
 20.  2 lessons
 21.  a.  [   Setting up a WordPress multisite network  ](https://learn.wordpress.org/lesson/setting-up-a-wordpress-multisite-network/)
         [Preview](https://learn.wordpress.org/lesson/setting-up-a-wordpress-multisite-network/)
      b.  [   Managing a WordPress multisite network  ](https://learn.wordpress.org/lesson/managing-a-wordpress-multisite-network/)
         [Preview](https://learn.wordpress.org/lesson/managing-a-wordpress-multisite-network/)
      c.  [   Advanced multisite management  ](https://learn.wordpress.org/lesson/advanced-multisite-management/)
         [Preview](https://learn.wordpress.org/lesson/advanced-multisite-management/)
      d.  [   Developing for a multisite network  ](https://learn.wordpress.org/lesson/developing-for-a-multisite-network/)
         [Preview](https://learn.wordpress.org/lesson/developing-for-a-multisite-network/)
      e.  [   Building plugins and themes that support multisite  ](https://learn.wordpress.org/lesson/building-plugins-and-themes-that-support-multisite/)
         [Preview](https://learn.wordpress.org/lesson/building-plugins-and-themes-that-support-multisite/)
 22.  5 lessons
 23.  a.  [   The built-in WordPress debugging options  ](https://learn.wordpress.org/lesson/the-built-in-wordpress-debugging-options/)
         [Preview](https://learn.wordpress.org/lesson/the-built-in-wordpress-debugging-options/)
      b.  [   Examining the state of your PHP code  ](https://learn.wordpress.org/lesson/examining-the-state-of-your-php-code/)
         [Preview](https://learn.wordpress.org/lesson/examining-the-state-of-your-php-code/)
      c.  [   Examining the state of your JavaScript code  ](https://learn.wordpress.org/lesson/examining-the-state-of-your-javascript-code/)
         [Preview](https://learn.wordpress.org/lesson/examining-the-state-of-your-javascript-code/)
      d.  [   Useful debugging plugins  ](https://learn.wordpress.org/lesson/useful-debugging-plugins/)
         [Preview](https://learn.wordpress.org/lesson/useful-debugging-plugins/)
 24.  4 lessons
 25.  a.  [   Quiz time  ](https://learn.wordpress.org/lesson/quiz-time/)
 26.  1 lesson, 1 quiz
 27.  a.  [   Time to test your skills  ](https://learn.wordpress.org/lesson/time-to-test-your-skills/)
 28.  1 lesson, 1 quiz
 29.  a.  [   Test your knowledge  ](https://learn.wordpress.org/lesson/test-your-knowledge/)
 30.  1 lesson, 1 quiz

### The programming languages of WordPress

# JavaScript

JavaScript is a programming language that is used to add interactivity to web pages.

Let’s learn more about how JavaScript works, and how it can be used in a WordPress
site.

## What is JavaScript?

JavaScript is a client-side scripting language, which means that it is interpreted
by the browser.

To see a simple example of what JavaScript can do, let’s look at the HTML page from
the previous lessons, and add a button which uses JavaScript to change the color
of the heading element:

    ```language-markup
    <html lang="en">
        <head>
            <title>My HTML document</title>
            <link rel="stylesheet" href="style.css">
        </head>
        <body class="main">
            <h1>This is the heading of my HTML document</h1>
            <img src="https://picsum.photos/250" alt="A randomly selected image">
            <p>This is the content of my HTML document.</p>
            <button>Change heading color to blue</button>
        </body>
        <script>
            const button = document.querySelector('button');
            const heading = document.querySelector('h1');

            button.addEventListener('click', () => {
                heading.style.color = 'blue';
            });
        </script>
    </html>
    ```

In this example:

 1. A button element has been added to the document, with the text “Change heading 
    color to blue”.
 2. At the bottom of the html document, there is a new `<script>` element. This element
    is used to add JavaScript to the document.
 3. A variable called `button` has been created, which stores a reference to the button
    element by using the `document.querySelector()` method and passing in the CSS selector
    for the button element, in this case button
 4. A variable called `heading` has been created which stores a reference to the heading
    element by using the `document.querySelector()` method and passing in the CSS selector
    for the heading element, in this case, h1
 5. An event listener has been attached to the button element. This event listener 
    listens for the click event, and when the event is fired (the button is clicked),
    it changes the color of the heading element to blue.

You will notice that the JavaScript has been added to the document after the rest
of the HTML elements. This is because the JavaScript needs to be able to access 
the HTML elements in order to work.

Because the browser reads the HTML document from top to bottom, adding the JavaScript
at the bottom of the document ensures that the HTML elements have been loaded into
the browser before the JavaScript is run.

You will also notice that if you refresh the page, the heading reverts back to its
original color. This is because the JavaScript can only affect the page once it’s
loaded in the browser, but those changes are not persistent.

Like CSS, it is possible to add JavaScript to a document using an external file.
This is the preferred way to add JavaScript to a document.

    ```language-markup
    <html lang="en">
        <head>
            <title>My HTML document</title>
            <link rel="stylesheet" href="style.css">
        </head>
        <body class="main">
            <h1>This is the heading of my HTML document</h1>
            <img src="https://picsum.photos/250" alt="A randomly selected image">
            <p>This is the content of my HTML document.</p>
            <button>Change heading color to blue</button>
        </body>
        <script src="script.js"></script>
    </html>
    ```

Then you would move the JavaScript from the `<script>` element in the document to
the `script.js` file.

    ```javascript
    const button = document.querySelector('button');
    const heading = document.querySelector('h1');

    button.addEventListener('click', () => {
        heading.style.color = 'blue';
    });
    ```

JavaScript is used in quite a number of places across a WordPress site. One of the
biggest uses of JavaScript is in the new block editor, which is powered by a JavaScript
framework called React.

There are also a number of external JavaScript libraries that are used in WordPress,
which you can find listed at the bottom of the credits page in the WordPress dashboard.

Additionally, like with CSS, WordPress allows you the flexibility to add custom 
JavaScript or external JavaScript libraries to your plugins and themes.

## Additional Resources

For more information about JavaScript, you can visit the following online resources:

 * [JavaScript on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
 * [freeCodeCamp JavaScript Algorithms and Data Structures certification](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/)

 This is a preview lesson

Register or sign in to take this lesson.

 [ Take course ](https://learn.wordpress.org/course/beginner-wordpress-developer/)

 [ Sign in ](https://login.wordpress.org/?redirect_to=https%3A%2F%2Flearn.wordpress.org%2Flesson%2Fjavascript%2F&locale=en_US)

##  Suggestions

 Found a typo, grammar error or outdated screenshot? [Contact us](https://learn.wordpress.org/report-content-feedback/).