Convert a jQuery Plugin into a Wordpress Plugin

How to Convert a jQuery Plugin into a WordPress Plugin

I’m sure it’s happened to us all! You’ve been searching on the internet for ages to find the right solution to your coding problem, comparing plugins until you find the one that’s perfectly suited to your needs. But alas, there is no WordPress plugin to let you easily implement it on your site. I mean, sure…you could hard-code it into your template, but the beauty of a WordPress plugin is that the code is isolated. Build it once, and you can plug it into any theme you like with relative ease. If this sounds like you, then you’ve come to the right place.

Alternatively, if you’re interested in just learning the basics of coding a WordPress plugin, then this tutorial should be a nice little primer to get you started.  Follow along, and if you have any questions, please don’t hesitate to put them in the comments section, or tweet me!

For this tutorial, I’ll be using FancyBox v2 - a fantastic lightbox script by Jānis Skarnelis.

Step 1: Get Ready

This one is pretty simple.

1. Choose your desired jQuery plugin and download it.

2. Create a new folder and title it with the name of your plugin. Make sure there are no spaces in the folder name. See my example below:

Wordpress Plugin Folder

3. Your jQuery plugin probably came .zipped, so uncompress it and move the contents to your new plugin folder like so:

jQuery Plugin inside WordPress Plugin Folder

4. To make your WordPress plugin easy to maintain, it’s a good idea to remove the unnecessary files from your jQuery plugin folder. In the case of FancyBox, we really just need the source folder which contains the FancyBox scripts, css and referenced images. So firstly take your time to locate the core files you’ll need.

Isolate jQuery Plugin Source Folder

5. Move them to the root of your WordPress plugin folder and delete the other unnecessary files. In my example you can see I’ve kept the source folder, and deleted everything else.

Move Source Files to WordPress Plugin Root

Okay good stuff, now our work can begin!

Step 2: Setup and Customise Your jQuery Plugin (optional)

If your jQuery plugin contains customisation options, you may wish to complete this step. Before we convert the plugin we’ll setup our script, and alter some of the options to make sure it perfectly suits our needs.

Please note that the customisation options will be different for every jQuery plugin. As such, you’ll need to read your plugin documentation to understand how to correctly set your custom parameters.

For FancyBox, we have a number of customisation options. But for the purposes of this tutorial, I’ll just set a few as an example.

1. Inside your source folder, create a new javascript .js file and give it an appropriate title to signify this is your customisation file.

jQuery Customisation File

2. Open the file in your favourite text editor (I suggest Espresso by MacRabbit), and then paste in the following code:

// Setup FancyBox & Set Customisation Options
jQuery(document).ready(function(){
jQuery("a.fancybox").fancybox();
});

The code above is our setup script. It creates a function to scan our page for hyperlinks with the class .fancybox, to which it will then append the FancyBox lightbox script (making everything work).

3. To customise the way our FancyBox looks, we can add a few parameters:

// Setup FancyBox & Set Customisation Options
jQuery(document).ready(function(){
jQuery("a.fancybox").fancybox({
padding : 0,
arrows: false
});
});

In the above code, I added a padding parameter to remove the white border on my lightbox images, and set arrows to false to remove the arrow icons from galleries. In reality it’s probably a good idea to leave the arrows visible for the benefit of the user, but this is just an example ;)

Nice work! You can now move onto the next important step.

Step 3: Build a WordPress Plugin PHP File

Building a WordPress Plugin isn’t too hard, so don’t stress if you don’t have any php experience.  Just make sure you spell everything correctly, and don’t miss any steps.

1. Open your text editor of choice, and create a new file in your WordPress plugin folder with the title of your plugin, and the file extension .php

Create a WordPress Plugin PHP file

2. In your new PHP file, you’ll need to add some PHP tags to begin. Type in:

<?php
?>

3.  Now we need to add our plugin information between these tags. Below is the information I’ll be using for my plugin, feel free to copy and edit as you see fit:

<?php
/*
Plugin Name: FancyBox 2 Custom
Plugin URI: http://www.jdmweb.com/resources/fancybox //Url of your choice
Description: FancyBox v2.1.4 for WordPress
Version: 1.0
Author: Glen McPherson
Author URI: http://blog.nelga.com
License: Creative Commons Attribution-ShareAlike
*/
?>

4. Awesome! We now have the basic setup completed for our WordPress Plugin.  Next comes the fun part – we’ll add some code to locate our jQuery CSS file, and reference it in our current WordPress theme.  The official name for this method is wp_enqueue_style.

For Fancybox, there is only one CSS file I need to reference.  If you’re attempting to convert a different jQuery plugin, then you will need to locate the path to your CSS file/s and adjust this code as necessary.

<?php
/*
Plugin Name: FancyBox 2 Custom
Plugin URI: http://www.jdmweb.com/resources/fancybox //Url of your choice
Description: FancyBox v2.1.4 for WordPress
Version: 1.0
Author: Glen McPherson
Author URI: http://blog.nelga.com
License: Creative Commons Attribution-ShareAlike
*/
// Add the stylesheet to the header
wp_enqueue_style(
'fancyboxstyles',
WP_PLUGIN_URL.'/fancybox2/source/jquery.fancybox.css',
false,
all);
?>

Before we keep going, it’s good to understand what we’ve just written. In the brackets following our method call wp_enqueue_style, we firstly gave our css style sheet a handle (name) fancyboxstyles, then we provided the location url of the file WP_PLUGIN_URL.”/fancybox2/source/jquery.fancybox.css”. You’ll notice that the first half of our url contains the term WP_PLUGIN_URL – this little method makes your life easy by filling in the url of your WordPress plugin directory automatically. The last two false & all declarations refer to the css version number, and the media type (both of which we can leave as the defaults).

5. Good work! Next we need to use a similar method to link up our script files, and get this baby working. To do this, we’re going to use a function containing two different methods: wp_register_script which registers our scripts with WordPress for use, and wp_enqueue_script to link our scripts to the current WordPress theme.  Then we’ll use the add_action method to trigger the function and make the magic happen!

<?php
/*
Plugin Name: FancyBox 2 Custom
Plugin URI: http://www.jdmweb.com/resources/fancybox //Url of your choice
Description: FancyBox v2.1.4 for WordPress
Version: 1.0
Author: Glen McPherson
Author URI: http://blog.nelga.com
License: Creative Commons Attribution-ShareAlike
*/
// Add the stylesheet to the header
wp_enqueue_style(
'fancyboxstyles',
WP_PLUGIN_URL.'/fancybox2/source/jquery.fancybox.css',
false,
all);
// Add the scripts to the footer
function fancyboxjs(){
// Identify our javascript files
wp_register_script(
'jquery.fancybox',
WP_PLUGIN_URL.'/fancybox2/source/jquery.fancybox.pack.js',
array( 'jquery' ),
"2.1.4",
1 );
wp_register_script(
'jquery.fancyboxcustom',
WP_PLUGIN_URL.'/fancybox2/source/fancybox.custom.js',
array( 'jquery', 'jquery.fancybox' ),
"1.0",
1 );
// Then enqueue them
wp_enqueue_script( 'jquery.fancyboxcustom' );
}
// Action our scripts
add_action( 'wp_enqueue_scripts', 'fancyboxjs' );
?>

Once again, it’s good to understand the options within our brackets.  Within the wp_register_script method, we gave our scripts a handle (name) – in my example I used jquery.fancybox for my FancyBox script and jquery.fancyboxcustom for my FancyBox custom settings script.  Next up we have an array – this allows me to link to any other dependant scripts I might need – in my example, FancyBox needs jQuery, and my FancyBox Custom settings requires both jQuery and Fancybox to work. Lastly, we declare the location url of our scripts, the version number we want to assign to our scripts, and finally the number 1 – which is a boolean that signifies we wish to reference these scripts at the foot (bottom) of our WordPress theme template.

And that’s it! You’ve now successfully completed coding your very own WordPress plugin.

Step 4: Install and Activate Your WordPress Plugin

Now you have your completed code, it’s all smooth sailing from here.

1. Select your plugin folder, and compress it into a zip file. On Mac, you simply need to right click the folder and click ‘Compress’

Compress your WordPress plugin

 

2. Now open up your WordPress admin page, and click the Plugins / Add New option in your sidebar.

Add a New WordPress Plugin

3. On the next page, simply click the Upload button at the top of your page.

Upload a New WordPress Plugin

4. Now select the zip file you just created, and click Install Now.

Upload your new WordPress plugin

5. When prompted, make sure you click Activate to turn your plugin on.  You can then switch it on and off in your plugins panel.

Custom FancyBox WordPress Plugin Successfully Installed

Step 5: Front-end Activation (optional)

Now that our new plugin is active, we just need to tell it which images we’d like to appear in a lightbox. If you’re using a different jQuery plugin then just check your documentation to find out what else needs to be done from the front-end to make it work.

1. When editing your WordPress post, click on any image you’ve inserted and you’ll notice two buttons appear. Click the one on the left to show our image options.

Edit Your WordPress Image

2. On the Edit Image popup, click the Advanced Settings tab, and simply add the text fancybox to the CSS Class field under Advanced Link Settings and click Update.

Add a CSS Style to Your WordPress Image Link

3. Publish your post to see the results!

Congratulations on finishing the tutorial. If you had any issues, or find that your plugin isn’t working as expected, you can Deactivate the plugin and Delete it from the plugins panel before re-editing your code and uploading again.

Stay tuned, and I’ll follow up this article with a tutorial on how to add an options panel to your WordPress plugin too. As always, if you have any questions, please feel free to add them to the comments below and I’ll do my best to help out.

12 Comments

Submit a Comment
  • Reply

    Paul R

    2 months ago

    Thank you so much for this tutorial, although I have not yet attempted it.
    I am particularly keen to use it for FancyBox v2 but first need to negotiate the licensing with my client.
    Also, I will look forward to your follow-up tutorial on adding an options panel.

    • Reply

      Glen McPherson

      2 months ago

      Thanks Paul,
      I’ll make sure I get that tutorial up as soon as I can!

  • Reply

    Tali Walt

    2 months ago

    Great tutorial. I’d definitely be interested in seeing like this!

  • Reply

    Sharon Z

    2 months ago

    Thanks for the awesome tutorial Glen! It worked perfectly. Looking forward for the tutorials on adding the option panel…

  • Reply

    Marco

    2 months ago

    Hi, thanks for the tutorial. I follow it. Full success!
    I look forward for the tutorial about options panel.
    Thank you!
    :-),

    • Reply

      Glen McPherson

      1 month ago

      Glad you liked the tut Marco! I’ll try and get the options tutorial up soon. I’ve added a subscribe feature in the sidebar too so you can receive an email when new tuts are posted that might be useful for you!

  • Reply

    Yasir Zia

    2 months ago

    How can i enable arrows, I am unable to show arrows.

  • Reply

    Marco

    1 month ago

    Hi. Good news about the options panel?
    Thanks in advance.

  • Reply

    Swapnil

    1 month ago

    Hi,
    Can you help me with a similar sort of plugin. It is a existing plugin and I am looking forward to add a feature with JQuery?
    I want to do it myself, just don’t know where I am going wrong.

  • Reply

    anonymous

    1 month ago

    thank u for the tutorial

  • Reply

    Shuvo

    23 weeks ago

    Great tutorial . Thanks you !

Submit a CommentJoin the conversation

Your Comment