How to Add JavaScript to a WordPress Post

Hello, and welcome! In today’s tutorial, we are going to add JavaScript and CSS to our WordPress post.

You can find a video version of this tutorial below;

The first thing we need to do is log in.

In order to add the JavaScript and CSS in a per-post manner, rather than the entire site, we are going to use a plugin named Scripts n Styles.

Go to your site’s “Plugins” page, or dashboard and click “Add New”.

In the search form, type “styles scripts” and wait a moment. Click “Install Now” on the plugin “Script n Styles” developed by “unFocus Projects”.
Once the plugin is finished installing, activate it by clicking the “Activate” button.

Now, add a new page or post to your site and you will see additional inputs toward the bottom of the page.

Add your title and any other page body text.

I have already created a web application for this tutorial. The source code below and you can see the completed application on this page.

When adding JavaScript code to a page, it is common practice to include the <script> tags in the page header or before the end of the <body> tag.

Including the code and the end of the <body> tag allows the page to load other elements before the JavaScript and rendering the page elements first.

To start, I will grab the JavaScript portion from the code. Grab the part between the <script> tags, not including the tags themselves.

Copy them and then paste them into the plugin text area.

When you are done modifying the script, click the “Update Scripts” button.

Next, we will add the page styles; again, copying the CSS and excluding the <style> tags. When you are done modifying the script, click the “Update Styles” button.

Now, we are going to add the HTML portion of our code by creating a “Custom HTML” block from the “Formatting” block types.

Copy and paste the code from within the <body> tags. Since I have included the JavaScript in the <body> we will be copying the code from the main <div> tag.

Let’s now publish the page and view it. Test our code by adding some sample VTT code.

Please leave any comments for corrections.

Thank you! Please subscribe and share!

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Title of the document</title>
    <style>
      #extractor * {
        box-sizing: border-box;
      }

      textarea {
        width: 100%;
        height: 25vh;
      }
    </style>
  </head>

  <body>
    <div id="extractor">
      <textarea id="input" placeholder="VTT text"></textarea>
      <textarea id="output" placeholder="output"></textarea>
      <button id="extract">extract</button>
      <input id="pos-look" type="checkbox" disabled checked> Using positive lookbehind
    </div>
    <script>
      // use a single regex to convert a VTT file
      // https://stackoverflow.com/questions/48640490/python-2-7-matching-a-subtitle-events-in-vtt-subtitles-using-a-regular-expressi

      // some browsers do not support positive lookbehind
      // should match anything between angle brackets but different results in Chrome and Firefox
      var posLookRe = "(?<=\>).*?(?=\<)";
      try {
        var re = new RegExp(posLookRe, "gm");
      } catch (err) {
        var re = new RegExp("^(?!<=\>).*?(?=\<)", "gm");
        document.querySelector('#pos-look').checked = false;
        console.warn(err);
      };
      const outEl = document.querySelector("#output");

      document
        .querySelector("#extractor #input")
        .addEventListener("input", ev => {
          outEl.innerText = "";
        });

      document
        .querySelector("#extractor #extract")
        .addEventListener("click", ev => {
          try {
            var inEl = document.querySelector("#extractor #input");
            outEl.innerText = inEl.value
              .match(re)
              .filter(el => el !== "")
              .join(" ");
          } catch (err) {
            console.warn(err);
            outEl.innerText = "error";
          }
        });
    </script>
  </body>
</html>
avatar

Carl Mann

Full-Stack Developer

Former owner of an I.T. consultancy business in Southampton, NY, Carl gave up the hustle-bustle of I.T. to live his dream of becoming a full-time application developer. When not busy blogging or programming, you might find Carl out taking a ride on his motorcycle or hiking off in some woodland trails.

Leave a Reply

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