How to Add JavaScript to Individual WordPress Posts
There have been many times when I have had elements within my WordPress blog posts that I have wanted to animate or modify using JavaScript. I just recently found out a way that makes use of the custom fields feature of WordPress.
All you have to do is insert the following code snippet into your main index template of your theme. You can just pretend that the code snippet is like one giant template tag.
<?php
$js_array = get_post_meta($post->ID, 'js', false);
if (!empty($js_array)) {
echo '<script type="text/javascript">';
foreach ($js_array as $js) {
echo $js;
}
echo '</script>';
}
?>After you insert this into just below your post, you an make the code in your posts dynamic by adding a custom field with the JavaScript code that you want to insert at the bottom of your post. The custom field's key should be set to "js".
A Sample JavaScript Snippet in Wordpress 2.5
With this method, you can even add multiple snippets to your posts. Simply make multiple custom fields with the key "js". The JavaScript snippets will appear in order inside of one script tag.
Comments
awesome, been looking for a solution to this for a while and this is perfect!
I have a site showing Cricket Highlights which I need the javascript to show up on individual posts,I mean on all Individual posts.I dont want the script to be called normally.I need to call it using the header of the single.php.Can you please tell me the simple code which should be inserted in the single.php header side and I also wanted to know where should I copy the Javascript .js file to?Should I copy it to the themes folder or outside.Or should I create a new folder named scripts inside my themes folder?Help me with this please.
Displaying the contents of a custom field on a page is usually done via more modifications to the theme. There's an excellent post on how to do this at: http://www.kriesi.at/archives/how-to-use-wordpress-custom-fields.
Jonathan
Dear Jonathan,
Thanks for your reply:)
I have successfully placed the scripts into the theme inside 'The Loop' and have created a custom fields 'js'. Now, how do I call up the custom field and display it in a post? Is there an article you can point me to for the implementation or can you do a short writeup...
thanks so much :)
Hi! Thanks for asking!
You you would insert the code into your WordPress theme somewhere inside "The Loop" in WordPress. In your theme, you can usually find (though the exact syntax varies from theme-to-theme) the start of the loop by looking for:
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
The correct value of the key for the custom fields is `
js`.Jonathan
Hi,
I am not a tech savvy gal. Can you elaborate a bit more?
Do I insert the codes to the WP theme or to the post?
What is the value of the key in the sample? Can't see quite clearly from the image. I can only see : alert[js rock]: , is that correct?
Thanks!
Nice tip. Used today and works nicely.
Post new comment