JavaScript
Article
By Sam Deering

Howto Add JavaScript to Single WordPress Posts

By 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!

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.


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!

  • 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!

  • Pingback: 10 Ultimate jQuery Wordpress Plugins | 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

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

  • 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.

    • 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

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

  • 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

Recommended
Sponsors
Get the latest in JavaScript, once a week, for free.