How to Add Javascript in a WordPress Post or Page
Categories: Wordpress
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 HTML view in the editor and paste the JavaScript code and that’s pretty much it.
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:
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:
<!–
custom_function();
//–></script>
Replace “custom_function();” with the actual name of the function.
Articles you may also like:
#1 by Mukesh Jat on January 31, 2012 - 10:24 am
I was Looking for this one.. Thank You
#2 by Peter Fisher on October 29, 2011 - 3:51 am
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
#3 by james on September 5, 2011 - 8:44 pm
Worked perfectly, thanks!
#4 by admin on November 3, 2010 - 11:20 pm
Yeah you can use that in the header.
#5 by Maria on November 3, 2010 - 10:15 am
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
#6 by admin on May 30, 2010 - 8:47 am
Yeah you can use JQuery inside posts too. As long as you have included the JQuery library in the page you should be fine.
#7 by Mark D on May 29, 2010 - 10:24 am
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?
.-= Mark D´s last blog ..Summer ready =-.
#8 by Rav on January 23, 2010 - 2:44 pm
im 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?
http://www.nisusnewmedia.com/reveal/
#9 by cool on January 9, 2010 - 1:32 am
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;”
#10 by admin on December 26, 2009 - 11:35 pm
You can just put the javascript on those specific pages.
#11 by Arly on December 26, 2009 - 12:24 pm
I want to run the JS only on spesific page only, do you have any idea how?
.-= Arly´s last blog ..GHR1000 Tips: How to Maximize Your Benefits While Using GHR1000 =-.