One of our blog readers asked me the following question so I thought I’d do a quick post on it. It could be very useful if your trying to do demo pages on your blog which need JavaScript or jQuery to run.

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


They had previously been including a .js script file in every page on their site in the WordPress header.php. This is not ideal as all the JavaScript within would load for every page on the site. Unnecessary overhead!

If you hadn’t noticed when you add JavaScript directly into the HTML editor in WordPress and reload the page is adds

tags to the JavaScript code. Hence, breaking the javascript.


Best Solution

Create a custom field which can be included in the header and specified for each individual post. This means only the post which needs the JavaScript will actually load it! The custom field section should appear at the bottom of each post in the editor just below trackbacks.

Create a custom field called say “single-post-js” and past the javascript code into there.


Then add the following code into header.php to pickup the custom field if it was a single post and the custom field was present.

< ?php 
  if( is_single() and $singlePostJs = get_post_meta($post->ID, 'single-post-js', true) )
   echo $singlePostJs;

That’s it! It’s working!



The following jQuery code has been included for this post only. The reason for including the script tags inside the custom field and not in the PHP is that I can also use this field for CSS, but should probably create another custom field to manage that. Your choice.


Just do a quick check on other posts and pages without the custom field and check they are not affected by the new field. Hope this helped you!

Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.

  • Kontrolle

    wow i’ve been looking for this for a long time now. using custom fields is a good way to do this. thanks for sharing!

    • jQuery4u

      Your very welcome!

  • Pingback: 10 Ultimate jQuery Wordpress Plugins | jQuery4u()

  • jQuery4u

    Hi harvinder,

    Yes, agreed. It should probably be labelled single_header_inc. Or maybe single_js_inc and single_css_inc if the tags are already supplied in the PHP. I’lm heaps busy building the new blog design at the moment but will update this post soon after.


  • Ian.J. Gough

    Many thanks for sharing this now i don’t need to use separate external pages for demonstrating scripts and snippets.
    All the best, Ian

  • EK

    where or how is this “custom field” added, I see it nowhere in wp

    • jQuery4u

      Add the single post js code into header.php in WP directory.
      ID, ‘single-post-js’, true) )
      echo $singlePostJs;

  • Yazeed Al Oyoun

    There’s an even better way to do it if you don’t want the hassle of having to use the custom field every time for your posts, in the custom functions file for your theme, use add_action to include the JS file inside for single posts if the PHP check of whether the page is single or not is true.

    • jQuery4u

      Hi Yazeed, yes this will work if the script you require is the same for all posts/pages but if it specific for each post (unique demo code for example) that method you describe will not work.

      • Yazeed Al Oyoun

        Hello, thanks for the reply. By the way, I’m attempting to modify the CSS styling inside an IFRAME using jQuery, have you ever tried something similar before?

        • jQuery4u
          • Yazeed Al Oyoun

            Most appreciated, thanks alot, great website by the way!

          • Yazeed Al Oyoun

            Would it be possible at all to alter CSS inside something like the Disqus IFRAME widget? I’m using the Arabic version of Disqus on my website, and they don’t give choices of any proper Arabic font so I’ve been trying to alter that.

  • Yazeed Al Oyoun

    Would you please link me to a guide to do something similar to jQuery4u’s header that changes upon scrolling down for reading?

  • jean lyon

    I found this post very interesting but I don’t seem to be able to make it work properly
    My jQuery script is a long HighChart scrip which works nicely if placed in header.
    Any ideas why copy past in custom file it will not work ?
    Thanks for help

  • Jonas

    Thanks for the tutorial. It’s perfectly working :-) And I loved the way you treated this issue!!!

    What if I wanted to use it in a SINGLE PAGE (instead of single post)? Would you mind to write the modified code?

    ID, ‘single-post-js’, true) )
    echo $singlePostJs;

    Thanks a lot :-D

  • Alvin devid

    Thanks for This post..

  • qwe

    terrible method..what if you had a 1000 posts on an existing site?

  • Bruno Škvorc

    Then you wouldn’t use this approach. Keyword in title: SINGLE.

  • Alfred Tong

    Excellent idea. I used this to setup jquery auto refresh on some of my posts

Ending Soon
Free SitePoint Premium

Get one free year of unlimited book and course downloads on SitePoint Premium!