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
%d bloggers like this: