Adding a jQuery Feature to a WordPress Website

Since jQuery was made, it has been used widely in various website platforms, in lots of ways and features. One of the platforms where the jQuery is applied is wordpress blogging platform. As one of the most popular blogging tool in the world, how can we apply jQuery into a wordpress website?

When feature such as plugin is available in wordpress, of course there are many jQuery plugins that can be use in wordpress website. Mostly of it has already been customized as certain application such as drag and drop, picture gallery, tab interface, buttons, forms and so on.

But some jQuery application may not be available due to the complexity of it to be made into a wordpress plugin or there is nobody even care of making it into plugins. When this happens, manual jQuery code insertion is needed.

What Do We Need?

1. Very little knowledge on php, html and css (we will copy and paste the ready-made code and modify it).
2. Php, html and css editor. (I suggest Adobe Dreamweaver, because I think it’s really easy to use).
3. A website and the jQuery code that we want to use (which inside it will be the *.php files, *.js files and *.css files)

What Next?

1. Open your header.php and put this code inside your header before “</head>” line.
   You may add it directly to the header.php or open it through your theme editor.
   - Advertisement -

   [sourcecode language=’php’]
   
   
   
   [/sourcecode]
   (target it to the *.js file)

   [sourcecode language=’php’] [/sourcecode]
   (target it to the *.css file)

2. Modify the code to target where you store the jQuery code.
3. Make sure any of your website general *.css codes do not overlap with any of the jQuery .css codes.
4. Put the jQuery application code (html and php) to where you wish it to appear. Usually on your index.php files, sidebar.php, header.php or footer.php. (explore the possibilities)
5. Test what you have applied on browser and see if it is working.
   This is the simplest steps you may need to know in order to apply a jQuery code. Later on we will post on how to add certain jQuery applications to your wordpress website.