How to Add Javascript in a WordPress Post or Page

One of my readers asked me the following question:

“How can I run a JavaScript within a WordPress post?”

In this short post I have explained how I use Javascript in my WordPress posts.

Adding javascript in WordPress post is really simple. You just have to switch to the TEXT view in the editor and paste the JavaScript code and that’s pretty much it.

When the Script is in an External File

If the JavaScript code is in an external file then you need to include it first. You will need to add a bit of code similar to the following in your “header.php” or “footer.php” file to include the external JavaScript file:

<script type="text/javascript src="http://www.your-domain-name.com/scripts/my-javascript.js"></script>

I prefer to add javascript in the footer for site performance factors. You can paste it in the HTML view of the post too if this file is only needed in that one post. Replace “http://www.your-domain-name.com/scripts/my-javascript.js” with the actual location of the JavaScript file.

After you have included the file you can use any functions that is defined in that file. Use something similar to the following:

<script type="text/javascript">
<!--
custom_function();
//--></script>

Replace “custom_function();” with the actual name of the function.

Directly Adding Your JavaScript Code

If you have a bit of JavaScript code that you want to execute directly on a post or page then just add your code in the “Text” view of the editor like the following:

<script type="text/javascript">
var a = 5;
alert("hello world. The value of a is: " + a);
</script>

Video Tutorial (Adding JavaScript)

Found this resource interesting? Subscribe to Tips and Tricks HQ

email icon rss feed icon twitter icon google plus icon

Comments (23 responses)

  1. Hoffman says:

    Hey,
    Thank you very much . You really saved me.

  2. Greg says:

    A quick word to the wise: If you copy/paste the script tag from the first code box, be sure to add the missing double quote after type=”text/javascript

  3. admin says:

    @Chris, Maybe the following plugin will help you create a price comparison table:
    http://www.tipsandtricks-hq.com/wordpress-membership/wordpress-membership-pricing-table-plugin

  4. Thanks for post but super confused. This post starts out by saying its as easy as entering text. That’s not working for me. Then the video lays out like four steps that are required.

    I only want a price comparison tool to appear in a single post. Tried a JS plugin and that failed as well. Anyone feel like helping a newbie out? ;-)

  5. Steve says:

    For site-wide alterations, I always prefer to use a plugin rather than a manual edit, but for a single time need, like when having a special piece of code to add to a specific post or page, then this would work like a treat.

    Great tutorial, admin!
    Thanks!

    Cheers!
    ~Steve

  6. Leyte Samar says:

    Very simple and help. We will javascript chat widget to our website. Thanks dude.

  7. charan says:

    Thanks this is so cool

  8. pvc stolarija says:

    Thank you very much and thank Google for finding this article :)
    I saved enormous time and finally did what I wanted with JS. Great!

  9. Great tips. Found them handy. To add, you can as well use a plugin. There are numerous WordPress plugins that provide support for adding JavaScript sidebar Widgets.

  10. Quang says:

    It works well. Thanks for sharing.

  11. Nikos says:

    Thank you so so so much for this !!! I spent almost 2 days to find that you suggest to include the reference of javascripts in the header.php instead of inside a page. Thank you again !

  12. Mukesh Jat says:

    I was Looking for this one.. Thank You :)

  13. Peter Fisher says:

    That’s great but as the custom_function() will be added to the footer it will be available to to every post or page. This might be a good thing but could impact on the performance if not all the pages require it. Lets say you need a JavaScript framework for a single post that you created. This might not be required for every page and it would waste a HTTP request.

    If you have the case were you only need to use certain JavaScript files for certain Word Press pages or posts then a better way is to define these conditions.

    I’ve created a post on my blog which demonstrates how to include certain JavaScript files on certain pages. http://blog.peterfisher.me.uk/2011/10/01/include-javascript-files-on-certain-wordpress-pages/

    Of course this is done in the header.php but could be altered for the footer

  14. james says:

    Worked perfectly, thanks!

  15. admin says:

    Yeah you can use that in the header.

  16. Maria says:

    Hi,

    Thank you so much for explaining how to add javascript.
    But i still have 1 more question about it.
    Sometimes a javascript comes with a code to put in the bodytag (onload=)

    Can i just put that in de bodytag in the header.php?

    Thanks in advance

  17. admin says:

    Yeah you can use JQuery inside posts too. As long as you have included the JQuery library in the page you should be fine.

  18. Mark D says:

    Do you know if it’s possible to use jQuery inside a post? I mean if I wanted to use some of jQuery UI functionality would it be possible?

    Also it’s worth mentioning that some ad networks are now trying to get you to use javascript inline when you post. What are your thoughts on that?

  19. Rav says:

    I am trying to add this function on my wordpress page- its a click to reveal funcition as shown on the link below. Tried everything, cant seem to get it to work on a wordpress page, any ideas?

  20. cool says:

    ok, just remove line breaks from your js code.

    from:
    ” js code line1;
    js code line 2;
    js code line 3;”

    to:

    ” js code line1; js code line 2; js code line 3;”

  21. admin says:

    You can just put the javascript on those specific pages.

  22. Arly says:

    I want to run the JS only on spesific page only, do you have any idea how?

Speak Your Mind

*