Adding Jquery To Your WordPress

November 28, 2010

This sounds one of the very interesting topic i have come across.

Adding a Jquery or JavaScript to your WordPress website is very simple and a very tricky thing to do. We can have any kind of a Jquery plugin to work on our WordPress Post or Page by simply adding the JQuery script in to the PHP file available in our Wordpress website. For this we must have a knowledge on the basic Jquery script adding knowledge, as we do in any normal HTML/XHTML web template.

Do get the Jquer/JavaScript code that you require to add in to your wordpress and make available all the files that you might require to add up. Now I did something like this:

Search for the “header.php”, must be available in your theme folder, and then add the code,

“<?php wp_enqueue_script(“jquery”); ?>”

above the code – “<?php wp_head(); ?>” available in your header.php.

Now add your Jquery that you would like to add up in your wordpress, but very important add it after the line “<?php wp_head(); ?>”. So the code after adding might look something like this,

<?php wp_enqueue_script(“jquery”); ?>

<?php wp_head(); ?>

<script type=”text/javascript” src=”<?php bloginfo(‘stylesheet_directory’); ?>/jquery-1.3.2.min.js”></script>

<script type=”text/javascript” src=”<?php bloginfo(‘stylesheet_directory’); ?>/ui.core.min.js”></script>

<script type=”text/javascript” src=”<?php bloginfo(‘stylesheet_directory’); ?>/ui.slider.min.js”></script>

<script type=”text/javascript” src=”<?php bloginfo(‘stylesheet_directory’); ?>/jquery.mousewheel.js”></script>

<script type=”text/javascript” src=”<?php bloginfo(‘stylesheet_directory’); ?>/jquery.gzoom.js”></script>

Here i have added the JQuery scripts – jquery-1.3.2.min.js, ui.core.min.js, ui.slider.min.js, jquery.mousewheel.js,  jquery.gzoom.js.

So its a normal looking script adding in any normal HTML way, but we find the php code comprising of the SRC parameter given in a different way. This is a pre written key word (“stylesheet_directory”) available in wordpress that takes you to the default stylesheet directory of your theme in the wordpress.

In a similar way we can add the CSS file too that can be added something like,

<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_directory’); ?>/jquery.gzoom.css” type=”text/css” />

and so i am done with my Jquery adding, just add your JQuery and make the code in the POST/PAGE adding on the admin side to be of structure that makes your JQuery to work, with the correct CLASS/ID name to be included.

Hope this post was informative. All your comments and reviews are welcome. Thank you.

Advertisements

2 Responses to “Adding Jquery To Your WordPress”


  1. […] to be of structure that makes your JQuery to work, with the correct CLASS/ID name to be included. view original jQuery is a development tool which allows for easier, faster JavaScript development. If You want to […]


  2. Dear web friend!
    I have to do something like this http://www.wearepixel8.com/blog/filterable-portfolio/
    my theme is NOVA, shall I use the same steps
    thanks a lot


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: