How to add JavaScript code on WordPress properly?

The Codex (JavaScript in Posts) covers exactly this scenario; including javascript in a post on a one-off basis. So whether your javascript worked in the past or not is irrelevant, the best approach now is to use the practise described in the Codex.

These are the steps that I followed:

1 – Save the javascript to a file and save it to an appropriate folder on your site. I put mine in my theme’s “js” folder.

This is my example. I added some code to prove that it was working or not.

function vocab(){
var words = [];
words.push('vocabulary');
words.push('lexicon');
words.push('lexicons');
    for (var key in words) {
            var value = words[key];

            console.log(key + ' : ' + value);
    }
}

2 – Copy the following into the post editor using the “Text” tab.

You can see that the name and folder location for the javascript file are consistent with the name and location from step 1.

<script type="text/javascript" src="https://wordpress.stackexchange.com/wp-content/themes/twentysixteen-child/js/vocab.js"></script>
<script type="text/javascript">
<!--
vocab();
//-->
</script>

3- View the post

The post looks blank/empty (except for the title). But the javascript is executed.

Here’s a snap shot of the Console from Chrome showing the output of my javascript.

---

UPDATE:

You have to be extremely careful about inserting any text/media, or even just clicking the “Visual” tab. Either way it appears that the JavaScript will be is compromised and will not run.

Here’s what the code looked like after I merely clicked the “Visual” tab then clicked back on the “Text” tab. When the post was saved and viewed, the JavaScript did not run.

<script type="text/javascript" src="https://wordpress.stackexchange.com/wp-content/themes/twentysixteen-child/js/vocab.js"><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span></script>
<script type="text/javascript">
<!-- vocab(); //--></script>

If you plan to enter any text/media in the post, then the solution seems to be:

• enter it (with appropriate html) in the “Text” tab

OR

• after you use the “Visual” tab, click back on the “Text” tab,
• edit the JavaScript code accordingly,
• save/update while still on the “Text” tab.

---

Update#2: 23 August 2018

Regarding the potential for problems with Javascript and the “Visual” tab, you could read to the bottom of the Codex (as I obviously didn’t ;)) and note the issue is discussed under “Troubleshooting“. The Text Control plugin is a recommended solution.

“Should jQuery be loaded?” or, “Let’s head off any ambiguity”

Short answer = No.
Long answer = This Q&A is specifically about Javascript in a one-off WordPress post. But Javascript and jQuery are not the same thing (Source). So if one wanted to include some jQuery code in a one-off post, then this Q&A would not apply.

WordPress has very different protocols for loading jQuery and the relevant jQuery code. It’s not hard to do, and wp_enqueue_script and “Using jQuery” would be a good place to start reading.