Howto Add JavaScript to Single WordPress Posts

Sam Deering

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?”

Problem

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!

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

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.

wordpress-putting-code-in-paragraphs2

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.

wordpress-putting-code-in-custom-field

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.

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

That’s it! It’s working!

wordpress-putting-code-working

Demo

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.

inpost-code-demo
Run

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!

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.mdk-pruefung.com 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!

    • http://jquery4u.com/ jQuery4u

      Your very welcome!

  • Pingback: 10 Ultimate jQuery Wordpress Plugins | jQuery4u

  • http://jquery4u.com/ 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.

    Cheers
    Sam

  • 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

    • http://jquery4u.com/ jQuery4u

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

  • http://yazeed.com/ 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.

    • http://jquery4u.com/ 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.
      Sam

      • http://yazeed.com/ 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?

        • http://jquery4u.com/ jQuery4u
          • http://yazeed.com/ Yazeed Al Oyoun

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

          • http://yazeed.com/ 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.

  • http://yazeed.com/ 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?

  • http://fiscalite-et-crise.org 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