1

In the code editor, pasting:

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script>
    var words = [];

    words.push('vocabulary');
    words.push('lexicon');
    words.push('lexicons');

  </script>

will make it:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script><br />
    var words = [];</p>
<p>    words.push('vocabulary');<br />
    words.push('lexicon');<br />
    words.push('lexicons');</p>
<p>  </script>

The version is 4.9.8. How should I add it properly?


FYI: How to include jQuery correctly?

  • of which code editor are you talking about ? in the theme editor or plugin editor ? – Kaperto Aug 22 '18 at 4:34
  • just the native editor to make a new post – Ooker Aug 22 '18 at 4:37
  • 4
    the native editor is made to write content and not code. if you need to add JavaScript code, you must put it in a theme or a plugin. – Kaperto Aug 22 '18 at 4:40
  • Do you want to add that JS CODE on each WordPress page/post or a single page/post? – Fayaz Aug 22 '18 at 5:02
  • 1
    @Ooker As the others said, you're not supposed to write any JS in a post's content. Nevertheless, if you make it a one-liner, it might just work – kero Aug 22 '18 at 9:05
1

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="/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.

enter image description here


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="/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.

| improve this answer | |
  • I see that https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js isn't included in your file. Is it necessary? – Ooker Aug 22 '18 at 16:58
  • No. jQuery isn't included and isn't required. I expanded my answer to explain the reasons for this because I'm sure others would also wonder about this. – Tedinoz Aug 23 '18 at 3:16
  • actually in the <body> there are some places that need to use jQuery. Why would the original code uses it if it isn't required? – Ooker Aug 23 '18 at 6:05
  • Your question disclosed Javascript which doesn't require jQuery, not the "toggle" script which does. The original code is an html page where it's OK to load jQuery with a script in the head, but WordPress has "rules" about loading jQuery and maybe your "toggle" script" too. A solution for you might be a plugin and WordPress "page" but there's not enough info to tell for sure. We need to rule a line under this question. Please accept this answer. Then post a new question with more information, all the code, and details of your problem. I'll keep an eye out for it and will answer. – Tedinoz Aug 23 '18 at 13:10
  • sorry, I didn't know about jQuery at that time. I've asked a new one here, thanks for your help. How to include jQuery correctly? – Ooker Aug 23 '18 at 15:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.