• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Tips and Tricks HQ

  • Home
  • Projects
    • All Projects
    • Simple WP Shopping Cart
    • WP Express Checkout Plugin
    • Accept Stripe Payments
    • WP Download Monitor
    • Easy HTTPS Redirection
    • WP Security and Firewall Plugin
    • WP eStore Plugin
    • WP Affiliate Platform
    • WP eMember
  • Products
    • All Products
    • Checkout
  • Support
    • Support Portal
    • Customer Only Forum
    • WP eStore Documentation
    • WP Affiliate Software Documentation
    • WP eMember Documentation
  • Contact

How to Add Javascript in a WordPress Post or Page

Home » Blog » How to Add Javascript in a WordPress Post or Page

Last updated: August 10, 2013





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>

Video Tutorial (Adding JavaScript)

Related Posts

  • Query or show a specific post in wordpress
  • How to Separate Pingbacks and Trackbacks from Comments
  • How to Add Widgets to WordPress Theme’s Footer
  • How to Fix the Character Encoding Problem in WordPress

Wordpress Javascript,  Wordpress

Reader Interactions

Comments (22 responses)

  1. Hoffman says:
    March 1, 2014 at 10:25 am

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

  2. Greg says:
    August 9, 2013 at 12:09 pm

    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:
    August 9, 2013 at 12:47 am

    @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

  4. Chris Parente says:
    August 8, 2013 at 8:18 pm

    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:
    June 7, 2013 at 6:07 am

    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:
    February 1, 2013 at 8:24 am

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

  7. charan says:
    January 29, 2013 at 3:46 am

    Thanks this is so cool

  8. pvc stolarija says:
    April 25, 2012 at 10:08 pm

    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. Emmanuel Chenze says:
    March 29, 2012 at 1:21 am

    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:
    March 3, 2012 at 3:25 am

    It works well. Thanks for sharing.

  11. Nikos says:
    February 18, 2012 at 5:02 am

    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:
    January 31, 2012 at 10:24 am

    I was Looking for this one.. Thank You 🙂

  13. Peter Fisher says:
    October 29, 2011 at 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

  14. james says:
    September 5, 2011 at 8:44 pm

    Worked perfectly, thanks!

  15. admin says:
    November 3, 2010 at 11:20 pm

    Yeah you can use that in the header.

  16. Maria says:
    November 3, 2010 at 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

  17. admin says:
    May 30, 2010 at 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.

  18. Mark D says:
    May 29, 2010 at 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?

  19. Rav says:
    January 23, 2010 at 2:44 pm

    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:
    January 9, 2010 at 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;”

  21. admin says:
    December 26, 2009 at 11:35 pm

    You can just put the javascript on those specific pages.

  22. Arly says:
    December 26, 2009 at 12:24 pm

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

Leave a Reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Featured & Popular Articles

Video Answers to Top WordPress QuestionsWordPress Optimization Tips and Tricks for Better Performance and SpeedEssential WordPress Security Tips - Is Your Blog Protected?WordPress Simple PayPal Shopping Cart PluginTop 15 Search Engine Optimization (SEO) Techniques I Forget to DoList of the Best and Must Use WordPress PluginsHow do I Start a Blog and Make Money Online?Good Domain Name Picking Tips for Your Blog SetupFind Out Which WordPress Web Hosting Company Offers the Cheapest and Reliable Web Hosting Solution

Featured WordPress Plugins

WP Express Checkout Plugin
wordpress estore plugin
wordpress membership plugin
wordpress affiliate plugin

Recent Posts

  • How to Use Browser Developer Tools to Inspect Elements and [...]
  • Accept Donations via PayPal from Your WordPress Site Easil [...]
  • Buy Now Button Graphics for eCommerce Websites [...]
  • Subscription Button Graphics for eCommerce Websites [...]
  • Adding PayPal Payment Buttons to Your WordPress Sidebar Ea [...]

Comment & Socialize

  • @Rob, We have just released ...
    - admin
  • I installed the plugin a co ...
    - Rob
  • @Sebastian, We've released ...
    - admin
  • I've used this plugin on a ...
    - Sebastian Djupsjöbacka
  • @John, this plugin doesn't ...
    - admin

Check out our solutions

View our WordPress plugin collection and start using them on your site.

Our WordPress Solutions

Footer

Company

  • About
  • Privacy Policy
  • Terms and Conditions
  • Affiliate Login

Top WordPress Plugins

  • Simple Shopping Cart
  • PayPal Donations
  • WP Express Checkout
  • WP eStore
  • WP eMember

Blogging Tips

  • How to Start a Blog
  • Selecting a Good Domain
  • Cheap WP Hosting
  • WP Video Tutorials
  • Simple SEO Tips

Search


Keep In Touch

Copyright © 2025 | Tips and Tricks HQ