How to turn any jQuery Script Into a WordPress Plugin: Basic Tutorial

Tutorial Difficulty: Basic to Moderate | Languages Used: PHP, HTML, JQuery | Requirements: Ability to create custom code files and upload to web server

In this tutorial I will walk you through the process of turning any jQuery plugin or script into a basic WordPress plugin. To explain this process we will walk you through the development of a simple jQuery tool tip plugin. This plugin will be implemented through a custom shortcode and can be used on pages, posts and in text widgets within word press. This is a simple method for turning a jQuery script into a custom WordPress plugin, after reading through the steps and looking at the files you should be able to modify the example code presented in the tutorial to meet your needs.

Step 1: Getting Started
Create a folder for your plugin and create a php file for your main plugin file – example: your-plugin-name.php. This file will include the plugin information that will be displayed on the WordPress plugin activation screen and for our purposes this is also where we will register and enqueue your script and also build out the logic for displaying the plugin.

The first thing to include in this file is the plugin file information comments – this is what will appear on the plugins page when you are activating or De-activating a plugin. You should follow the format below but change the values to suit your needs.

<?php
/**
 * Plugin Name: The plugin's name
 * Plugin URI: https://jqueryplugins.net/
 * Description: Add a description of what your plugin does - this will be shown on the plugin admin page.
 * Version: 1.0
 * Author: jqueryplugins.net
 * Author URI: https://jqueryplugins.net/
 * License: A "Slug" license name e.g. GPL2
 */

Step 2: Include your .JS and .CSS files
Add your scripts and stylesheets that your script needs to your plugin folder. In order for your script to work within the default WordPress environment you will need to modify your code.

Jquery Compatibility Mode:
WordPress implements jQuery in no conflict mode and in strict mode which helps to prevent conflicts with other libraries and extensions – in order to use your jQuery code in WordPress you need to replace the dollar symbol $ in your functions with jQuery text. Example:

Normal jQuery Code:

$(window).scroll(function(event){
    passed_mid_point = true;
});

WordPress No Conflict jQuery Code:

jQuery(window).scroll(function(event){
    passed_mid_point = true;
});

After your script code is updated to be compatible with WordPress no conflict mode, add the script file to your plugins folder. You do not need to make any modifications to your style sheet files.

Here is the contents of the .js file referenced for this plugin (/js/jquery-simple-tooltip-plugin-wordpress.js):

jQuery(document).ready(function() {
// Tooltip only Text
jQuery('.jQueryTooltip').hover(function(){
        // Hover over code
        var title = jQuery(this).attr('title');
        jQuery(this).data('tipText', title).removeAttr('title');
        jQuery('<p class="tooltip"></p>')
        .text(title)
        .appendTo('body')
        .fadeIn('slow');
}, function() {
        // Hover out code
        jQuery(this).attr('title', jQuery(this).data('tipText'));
        jQuery('.tooltip').remove();
}).mousemove(function(e) {
        var mousex = e.pageX + 20; //Get X coordinates
        var mousey = e.pageY + 10; //Get Y coordinates
        jQuery('.tooltip')
        .css({ top: mousey, left: mousex })
});
});

Step 3: Let WordPress know where to locate your scripts and styles
Return to your main plugin file and we will now add the code to register and enqueue your custom script (and styles).

Add the following code below the information comments that you added in step 1.

// add scripts and stylesheets
function jquery_simple_tooltip_plugin_wordpress_add_script() {
 wp_register_script('jquery_simple_tooltip_plugin_wordpress_script', plugins_url('/js/jquery-simple-tooltip-plugin-wordpress.js', __FILE__), array('jquery'), '1.0', true ); }
add_action( 'wp_enqueue_scripts', 'jquery_simple_tooltip_plugin_wordpress_add_script' );

The above code will register your script – meaning WordPress is now aware of the script file but does not load it at this point. The script load is conditional on the the custom shortcodes that are specified in the code from the next step being found on a page/post. This was done to optimize the plugin and have it run as efficiently as possible. You will want to modify the function name and file locations to meet your needs. The above code snippet loads the script in the page footer, if you wanted to load your script in the header change the ‘true’ parameter in the code snippet above to ‘false’ – click here to learn more about the wp_register_script function and its parameters.

If your library has a style sheet that you want to include with your code – you can include it by adding the following snippet of code to the above function before the function close bracket. Make sure you update the plugin name and url to suit your particular setups needs.

wp_register_style( 'your-style-sheet', plugins_url( '/css/plugin.css' ) );

and then add the following code snippet after the wp_enqueue_script below:

wp_enqueue_style( 'your-plugin-name' );

Click here to learn more about the wp_register_style function and its parameters.

Step 4: Create Shortcode
Next add the following code to your main .php file after the function to include your scripts and styles on the WordPress Page – this is the logic that will read the your custom shortcode and output the HTML that is used by the jquery script.

//main function- shortcode
function jquery_simple_tooltip_plugin_wordpress_shortcode($attributes, $content = “” ) {
//enqueue javascript/jquery and CSS - lazyloaded.
  wp_enqueue_script('jquery_simple_tooltip_plugin_wordpress_script');
  // start output buffer
  ob_start();
  //check if tooltip text is included, if not display message showing how to add to shortcode
 $attr =$attributes['text'];
  if (is_null($attr)) {
    $attr = 'Make sure to include Tool Tip hover text in the shortcode - example: [TT text="I\'ll be back"]example text[/TT]';}
    // check to see if any wrapped text was passed in - if not add default text
    if( $content == '' ) {
        // no wrapped text was passed in
      $content = 'wrap the [TT] shortcodes in text to activate the tooltip';
    } else {
        // wrapped content is in $content
        // it's possible content contains other shortcodes needing handled
        $content = do_shortcode( $content );
        // let's do something
    }
//close php so that we can output our HTML
   ?>
<!--html output with php references to short code variables-->
<style>.tooltip{display:none;position:absolute;border:1px solid #333;background-color:#161616;border-radius:5px;padding:10px;color:#fff;font-size:12px Arial}</style>
<span title="<?php echo $attr;?> " class="jQueryTooltip"><?php echo $content;?></span>
<!--end html output return current buffer contents -->
  <?php return ob_get_clean();}
add_shortcode( 'TT', 'jquery_simple_tooltip_plugin_wordpress_shortcode' );

The above code registers your shortcode, does error handling, and outputs HTML. The output is wrapped by the ob_start() and ob_get_clean() functions to ensure that the HTML in the shortcode is output at the place in the content that you add it. If these functions were not included the, the HTML would be displayed at the top of the screen.

The code starts by loading the .js file that contains your no-conflict modified code, checks to see if the shortcode dependencies (tool tip text, and tool tip content) are present and if not creates the variables and gives them default values. After the error handling is done the script outputs the HTML and the last line registers the custom shortcode.

Step 5: Upload plugin to your webserver
At this point – your plugin folder should contain all the necessary files needed to turn your custom jquery plugin into a basic WordPress plugin. The next step is to upload the plugin folder to your WordPress plugins folder on your web server and activate the plugin.

WordPress plugin example on the WP plugin admin screen


Here is an example of our Simple Jquery Tool Tip plugin in action: Hover over the blue text below.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pharetra scelerisque pulvinar. Praesent at magna efficitur, laoreet tellus in, luctus ex. Praesent ut elementum nunc, at bibendum lectus. Phasellus dolor dolor, dictum eget mollis ut, viverra non orci. Duis dui tortor, maximus finibus aliquam id, consequat consectetur urna. Donec congue turpis eu risus vehicula tristique. Quisque sed arcu ac tortor scelerisque blandit ornare vitae leo. Nullam consectetur, orci et condimentum congue, ligula nibh elementum metus, non finibus tellus enim nec sem. Fusce id nibh eros. Proin egestas, dui ac consequat convallis, urna dolor laoreet nisl, non consectetur ante tortor eget arcu. Maecenas aliquam tincidunt mauris, eu porttitor metus dictum id. Nam congue, libero tristique consectetur cursus, ipsum tellus laoreet diam, semper convallis tellus est vitae orci. Etiam accumsan est urna, at elementum ex blandit vitae. Integer at libero tincidunt, tempus justo sit amet, pharetra sem. Pellentesque faucibus felis vel porttitor cursus.


Hopefully you can see how the above example can be easily modified to work with just about any jquery script or plugin available. In this tutorial I showed you how to implement your custom jQuery code via WordPress shortcodes – in future tutorials I will cover other ways of implementing jquery plugins to create to create custom WordPress plugins.

Subscribe to the JqueryPlugins.net mailing list:

* indicates required

Reply

Pin It on Pinterest