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="https://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>
Hey,
Thank you very much . You really saved me.
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
@Chris, Maybe the following plugin will help you create a price comparison table:
https://www.tipsandtricks-hq.com/wordpress-membership/wordpress-membership-pricing-table-plugin
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? 😉
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
Very simple and help. We will javascript chat widget to our website. Thanks dude.
Thanks this is so cool
Thank you very much and thank Google for finding this article 🙂
I saved enormous time and finally did what I wanted with JS. Great!
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.
It works well. Thanks for sharing.
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 !
I was Looking for this one.. Thank You 🙂
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
Worked perfectly, thanks!
Yeah you can use that in the header.
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
Yeah you can use JQuery inside posts too. As long as you have included the JQuery library in the page you should be fine.
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?
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?
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;”
You can just put the javascript on those specific pages.
I want to run the JS only on spesific page only, do you have any idea how?