Fork me on GitHub

Use jQuery plugin with WordPress in 5 easy steps

Below are 5 steps to make any jquery plugin work with wordpress. I’ll use the hovercard plugin as an example, but these steps should be helpful with any plugin.

STEP 1:

Create a folder with the plugin name (i.e. Hovercard) in /wp-content/plugins directory.

STEP 2:

Copy all your jQuery plugin files like script, stylesheets, images etc. in this folder. In our case we only need hovercard.js Also create a file named init.php in the same folder. We’ll add some information to this file in next step.

STEP 3:

 Copy following information to init.php :

<?php
/*
Plugin Name: Simple yet sexy Hovercard
Plugin URI: http://designwithpc.com/post/9639968851/plugin-available-for-simple-and-sexy-hovercard
Description: Simple yet sexy hovercard with minimum CSS. Like the one used by Twitter. 
Version: 1.0 
Author: PC - Prashant Chaudhary
Author URI: http://designwithpc.com
License: Creative Commons Attribution-ShareAlike 
*/
wp_enqueue_script('jquery');
wp_enqueue_script('jquery.hovercard',WP_PLUGIN_URL.'/Hovercard/hovercard.js',array('jquery'),'1.0',1);
?>

Note: Make sure there are no whitespace before <?php and after ?>

The above information is specific to hovercard plugin. Don’t forget to replace this information if using for different plugin. WordPress reads this description to display plugin information on its dashboard.

STEP 4:

You should now see this plugin available in your WordPress dashboard:

Activate your plugin and you should be all set to go!

STEP 5: (For Hovercard plugin users)

To use this plugin in your WordPress post, give id (from HTML editor) to the text or label you want to apply hovercard on. 

To make sure there is no conflict with other js libraries, it is recommended to use 

jQuery(document).ready(function($){

//plugin code…

});

That is it!

3 notes

  1. designwithpc posted this
blog comments powered by Disqus