How to Use Javascript in WordPress Posts

A regular WordPress post just contains HTML, most of the time. In general, there is a strict separation between static and dynamic content. So if you try and use a <script> tag directly inside your posts, WordPress will freak out and prevent your dynamic content from running. Let’s take a look at an example.

In the example below, I use a simple Javascript to change the color of a text when the user clicks on a button. Here is the code:

<script>
function myFunction() {
document.getElementById("demo").style.color = 'blue';
}
</script>
<p id="demo">This color will change when the button is clicked</p>
<button type="button" onclick="myFunction()">Click</button>
</body>
</html>

We can paste this into the WordPress editor using the “Text” tab as shown here:

Make sure there are no newlines within the Javascript, as WordPress will insert its own <p> tags and mess things up! And it even renders when the post is previewed:

However, the Javascript will not work. The text won’t turn blue when the button is clicked. In this way, WordPress restricts certain tags that can be inserted into the posts. One of these is Javascript.

Let’s take a look at two ways to get around these restrictions and insert custom Javascript code into our WordPress posts.

Method 1: Simply Edit the Post in “Text” Mode without Switching to “Visual”

We’ve already seen that WordPress restricts certain tags from working in posts. What happens, is that the WordPress visual editor “strips” out a lot of HTML when rendering a post. This happens automatically if you switch from using the “Text” editor, to the “Visual” editor. For example, WordPress removes all the “onClick” events from the HTML, and so even if your visual elements render correctly, they won’t function as expected.

If this is a “one off” Javascript code that you need to place in your site, the simplest ad hoc solution is to just write your post using the “Text” or “Raw” tab and then never go to the visual editor. This will prevent the TinyMCE editor from cleaning out HTML it deems malicious, and your Javascript “onClick” events will work as expected.

Previously, there used to be solutions like redefining custom and allowed tags etc, but I’ve not found these solutions to work. And messing around with the structural security of a site probably isn’t a great idea anyway. Simplest is to just use the text editor for the one or two posts on which you need Javascript to work, and go from there.

But if your needs are more widespread, and you have to insert Javascript into your posts on a regular basis, you need a different solution.

Method 2: Using a Plugin for Javascript

If you’re working alone, and have just the occasional post with Javascript, method 1 is fine. But if you have multiple authors, or regular Javascript needs, a plugin might be a better option.

There are several options here, and you should pick one that fits your taste. For example, Code Embed is a plugin that allows you to create “placeholders” within your code, and then define that code in custom fields. During runtime, the placeholders will be replaced with the code you specify.

Other plugins such as Advanced Custom Fields allow you even finer control, giving only certain user roles access to the ability to include Javascript and other potentially dangerous code. Whichever method you choose, I suggest you find a solution that takes into consideration the possibility of abuse and work around that. If you’re the only author on a site, it doesn’t make a difference if you disable a key security measure like in the first method.

With a multi-author site however, things become more complicated and a sophisticated plugin is probably your best option.