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.

[toc]

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="https://wpassist.me" 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="https://wpassist.me/shailan_logo.png" title="Shailan.com - Where your heart is blah blah" width="90" height="90" />

Conclusion

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!