In order to use a jQuery plugin with your WordPress site, you need to load jquery manually along with the jquery plugin script files. In this step by step tutorial, I will show you how to add a simple jquery tooltip plugin to your site.

Upload jQuery plugin script to the theme folder

The first thing to do is; uploading the plugin script in your theme folder. You may put it in a directory named js or something like that to keep things tidy.

Enqueue jQuery plugin script to theme scripts

After putting files in place you need the magic word to load a javascript file in your theme: wp_enqueue_script. This function adds your file in queue and WordPress use it when the time comes. Here is how to add our file into scripts queue:

function enqueue_scripts(){
wp_enqueue_script('jquery'); // load jquery with theme
wp_enqueue_script('tooltip', get_stylesheet_directory_uri() . '/js/ez-tooltip.js');
} add_action('init', 'enqueue_scripts');

This code will run when init is called and it will add both jquery and our tooltip script to site’s <head> part.

Add title attributes and tooltip classes to items HTML

Jquery Tooltip plugin will display title values from images and links with a CSS class tooltip. Here is a link sample:

<a href="" title="This will be displayed as tooltip" class="tooltip">Hover link to see tooltip</a>

Also, you can use image titles for tooltips (Eg. for post titles):

<img src="" title=" - Where your heart is blah blah" width="90" height="90" />


Using this simple structure you can add tooltips to any image or link on your site.

By default, the script uses tooltip id to style the tooltip element. Here is a sample CSS for your styling:

#tooltip{ display:none; position:absolute; z-index:1000; background-color:#ffd; color:#444; padding:4px; box-shadow:#333 1px 1px 3px; }

Please note that WordPress loads jquery with no-conflict mode. This means much jquery code you can find on the web won’t work. To make them work you need to replace all $ signs with jQuery.

I hope you found this post handy. Please share it if you like, and don’t forget to follow me on Twitter for more posts like this!