How to add JavaScript to WordPress posts and pages

by Guru · Published September 8, 2011 · Updated June 19, 2012

0 Flares 0 Flares ×

Adding JavaScript to your entire wordpress site can be easily achieved by modifying your theme files but there may be some instances where you need to add JavaScript to some specific pages and posts. So how is it possible? If you are using the self hosted wordpress then this is easily achieved by toggling the writing mode from Visual mode to Html mode and inserting the JavaScript into the text box.

An alternative way to add JavaScript code to wordpress

If directly adding JavaScript code to the page or post does not work for you then you can use this alternate way to add JavaScript code to wordpress pages or posts. This option is a better way of adding JavaScript code to your posts, here we use a wordpress plugin, Custom Field Short code. The idea behind this is that you create a custom field and set the JavaScript as the value of this custom field and add the custom field using short code to your post or page. This way of adding JavaScript makes it easy to maintain in future. The idea of using Custom Field Short code is that, easily you can insert the custom field into your post just by adding a short code.

So lets see the complete process of adding JavaScript to wordpress post:

1. Install Custom Field Short code plugin.

2. Create a custom filed while creating the new post, lets say the name of your custom field is “myjs” and set the JavaScript as the value for this custom field. (Note if you are using wordpress 3.1+ you will not be able to see the custom field option in the new post as by default it is disabled. If you do not see the custom field editor then click on the Screen Options and select the check box that says “Custom Fields”)

3. Now toggle to HTML mode in your post editor and insert the custom field as short code that is [cf]myjs[/cf]. Save and publish it, when you open your post, wordpress will automatically replace the short code with the JavaScript.