How to Add JavaScript Code to a WordPress Post

When you are building a WordPress website, at some time you will need to add JavaScript code to a WordPress post. I came across this problem when I tried to add a sponsored media video that required me to add JavaScript code into my post.

Every time I added the JavaScript code and then went to save it, the code had disappeared. This was very annoying and I had to find out quickly how to add JavaScript code to my WordPress posts and pages. The same thing happens when you try to put HTML code into a WordPress post. The code simply disappears.

How to Add JavaScript Code to a WordPress Post

I like to take shortcuts so I use a plug-in to help me add JavaScript code to a WordPress post or page. It is far easier to add a WordPress plug-in than it is to learn how to add the JavaScript into your WordPress template files or create a function to allow you to add JavaScript.

The plug-in I am using is called HTML Javascript Adder and you can easily download this for free by going to the plug-ins section in your WordPress website. Then all you have to do is click on add new plug-in and search to find this exact plug-in.

Once you have installed an activated HTML Javascript Adder you can then go to your WordPress post and add JavaScript.

There are a few steps you will have to follow though, as sometimes it accused that this does not work.

  1. You will need to add your JavaScript code into the HTML section of your post.
  2. You will need to press on the save button while you are still in HTML section of your post. Do not move on to the visual editor and then save, because the JavaScript will disappear.
  3. Even after this, when you press on the visual editor the script may not be there. You can now press on the preview button to see if your JavaScript is working.

See the screenshot below. You can see that I have added my JavaScript code into the HTML section of my post.

Adding JavaScript to a WordPress Post Without a Plugin

To use JavaScript inside of posts in WordPress, you need to take a few more steps. Odds are that this usage is for one or only a few instances, so adding the script to the header would be unnecessary.

For the occasional or one-time use of JavaScript, you need to put the script into a JavaScript file and then call it out from within the post. Make sure that each script is defined by its function name such as:

function updatepage(){var m=”Page updated “+document.lastMo…….}

To include a Javascript inside a post, you need to combine both the call to the script file with the call to the Javascript itself.

<script type=”text/javascript” src=”/scripts/updatepage.js”></script>
<script type=”text/javascript”>
<!–
updatepage();
//–></script>

If the src attribute of your JavaScript tag is being stripped out you need to turn off the rich editor (from the dashboard go to Users > Personal Options). If you are using the rich editor the JavaScript tag’s srcattribute may be stripped out even when manually editing in the HTML popup window.

I love working with WordPress and this problem of disappearing JavaScript code was short lived. After installing the HTML JavaScript adder plug-in, my JavaScript worked and my problem was solved.

About Nathaniel Fleming 16 Articles
American economist. Nobel Laureate in Economics in 2017 for his contribution to the field of behavioral economics. Honorary Professor of Behavioral Science and Economics at the School of Business of the University of Chicago.

Leave a Reply

Your email address will not be published.


*