ProThemesWP jQuery Shortcode

ProThemesWP jQuery Shortcode is a plugin that has a shortcode called [jquery] that allows you to place javascript and jQuery within your posts.

Here is an example using the shortcode [jquery] to place some javascript within this post.

[jquery]
$('#button-1').click( 
    function() { 
        alert('Button 1 Clicked');
    } 
);
[/jquery]

<button id="button-1">Click Button 1</button>

When you click Button 1, the jQuery above creates an alert that Button 1 has been clicked.

The [jquery] shortcode adds “jQuery(function($) {” before your javascript and “});” after your javascript so that you do not need to do this yourself.

Notice that Button 1 was placed after its corresponding javascript. Because the javascript is applied after the page has loaded, the javascript did not need to be placed after Button 1.

[jquery] loads jQuery in the header so the jQuery placed within the shortcode works even if your theme does not load jQuery in the header.

Summary

In summary, it is easy to add javascript and jQuery within your posts, pages and custom posts by installing ProThemesWP jQuery Shortcode plugin and using the shortcode [jquery].