How to turn any jQuery plugin into a WordPress one

How to turn any jQuery plugin into a WordPress one

WordPress and jQuery are both very famous for their plugins. In the case of jQuery, plugins allow developers to extend the library's capacities in order to create beautiful effects. In WordPress, they allow anyone to benefit from the work of others, as they come under the form of a module that you can easily activate from within the administration interface, and start using right away.

Creating one of those modules is not that difficult, but if you are not familiar with their syntax, it could end up being a headache. There are many jQuery plugins that have been transferred into a WordPress one already, but what can you do when it is not the case? How do you do when you have found the perfect jQuery plugin for your latest site, but it is not yet available as a WordPress plugin?

In this tutorial, we'll see how you can easily create a WordPress plugin from a jQuery one. We'll review what a jQuery, or a WordPress plugin is actually made of, so we'll find the elements they both have in common. From there, we'll show how it leads us to perform some simple operations to allow us to benefit from our jQuery plugins in a WordPress template.

Thank You for Downloading

I'm glad that you found my work useful. If you did, it might help some other people too. So why not helping me spread the word with a tweet? You could also buy me a coffee to thank me for my code and explanations if you prefer ;).
I hope you'll enjoy your download. Regards. Jeremy.

Part 1: Anatomy of a jQuery Plugin

In this part, we'll analyse what a jQuery plugin is usually made of, where each of those elements should be placed, and how do we usually work with them. Throughout this article, we'll take for example the jQuery FancyBox plugin, (even if there is an existing WordPress adaptation for it already, it's just to have a concrete example).

A) The Javascript Source

jQuery is a javascript library, and plugins are there to help us extend the capabilities of it, so they are written following the same jQuery syntax. Every plugin you'll download is written within a javascript file. That is the core of your plugin, what the developer wrote to allow you to enjoy its functionalities. You then have to include this script in your application:
  1. //Include the plugin script
  2. <script type="text/javascript" src="Path_to/jquery.fancybox.js"></script>

B) The Javascript Snippet

Once you have included the plugin script within your application, most of the time you'll be asked to write a little snippet of code that will make your site or application use the plugin when required. Most of the time, those few lines of code you'll have to write are here to make the plugin work with a particular element of your page, and after a particular event, for example, you say that a FancyBox will appear after a click on a particular link, for example:
  1. //Write the plugin setup
  2. <script type="text/javascript">
  3. jQuery(document).ready(function(){
  4. //Fancybox
  5. jQuery("a.fancy").fancybox({
  6. overlayShow: true,
  7. overlayOpacity: 0.7
  8. });
  9. });
  10. </script>

C) Additional Styles

Some plugins sometimes come up with their own stylesheet, modal windows for example. Those styles are required for the plugin to work and therefore need to be included in your application:
  1. //Include the plugin Stylesheet
  2. <link rel="stylesheet" type="text/css" href="Path_to/jquery.fancybox.css" />

D) How to set everything up?

Once you have all your files ready, it's a common good practice to put the styles in the header, and the scripts in the footer, just before the closing tag.  

Part 2: How can we translate this into WordPress?

Now that we understand what the different elements we find in a jQuery plugin are, and where they are supposed to go, let's see how we can do that in WordPress.

How to declare a WordPress plugin?

A) In WordPress, plugins are stored in the /wp-content/plugins directory. So just go in there, and create a directory named after your plugin. In our case, we'll just create a directory called FancyBox. B) In this directory, copy all your jQuery plugin files, (script, styles, images or anything that has to be included with the plugin). C) Then, create a file called init.php. Init.php is the particular file we need to build to allow WordPress to recognize our plugin. Open init.php and copy the following information in it:
  1. /*
  2. Plugin Name: FancyBox //Your plugin name (here we'd write Fancybox)
  3. Plugin URI: //Url of your choice
  4. Description: Implementation of the FancyBox for jQuery //Brief PLugin Description
  5. Version: 1.0 //Version of your plugin
  6. Author: Jeremy Desvaux //Name of the author
  7. Author URI: //Url of your site
  8. License: Creative Commons Attribution-ShareAlike //Licence
  10. //Other terms and conditions
  12. This program is free software; you can redistribute it and/or modify
  13. it under the terms of the GNU General Public License as published by
  14. the Free Software Foundation; either version 2 of the License, or
  15. (at your option) any later version.
  16. */
As you can see, in those few lines, we specify a name, a URL, a description and a few other similar piece of information. Those information are being used by WordPress inside the plugin administration interface as you can see on the following picture: Plugin Interface Screenshot From this picture, we see that our 'plugin' has been recognized by WordPress, and contains all the information we wanted. It is time to make it work now. From what we've seen in part one, we need to tell WordPress to put some of our plugin files in the page header, and some in the page footer.

How to specify what goes in the Header ?

What we want to do is to put our plugin stylesheet inside the page header. In html, we do so by adding a link tag in the header. In WordPress, there is a specific method called wp_enqueue_style() (Codex ref here), that allows you to do that. wp_enqueue_style() takes several parameters, mainly the name of your stylesheet and its source for it to work. You can also add dependencies (other styles that need to be included before), and a version number. So In our case, in order to tell our plugin to put its stylesheet inside the header, we would add this inside our init.php file:
  1. //Add the stylesheet into the header
  2. wp_enqueue_style("jquery.fancybox",WP_PLUGIN_URL."/jQuery2Wp_fancybox/jquery.fancybox-1.3.1.css",false,"1.3.1");
Line 3 you can see the name we gave to our stylesheet, line 4 we specify its source, with the constant WP_PLUGIN_URL holding the path to the plugin directory. So if the user decides to move its plugin directory the path won't break. Line 5 false means that this stylesheet has no dependencies, and line 6 1.3.1 is the stylesheet version. That's it for the header, in fact, to recapitulate, instead of adding the stylesheet in our header by ourselves as you would do in a normal application, you just ask WordPress to do it for you.

How to specify what goes in the Footer ?

In a very similar fashion, to add our scripts inside the WordPress footer, there's a function we can use as well. It is called wp_enqueue_script(), (Codex ref here). wp_enqueue_script() accepts parameters that are very similar to wp_enqueue_style, meaning a script name, path, dependencies, en version. The last parameter is a boolean, and specifies whether you want to enqueue the script in your header (if set to 0), or in your footer (if set to 1), so in our case, because we want to enqueue them in the footer, we'll set the boolean to 1. Let's then use wp_enqueue_script() to add our scripts:
  1. //Add the scripts in the footer
  2. wp_enqueue_script("jquery");
  3. wp_enqueue_script(
  4. "jquery.fancybox", WP_PLUGIN_URL."/jQuery2Wp_fancybox/jquery.fancybox.js",
  5. array("jquery"), "1.3.1",1);
  6. wp_enqueue_script(
  7. "jquery.fancyboxsetup", WP_PLUGIN_URL."/jQuery2Wp_fancybox/fancybox-setup.js",
  8. array("jquery","jquery.fancybox"), "",1);
Line 3 and 6, you can see wp_enqueue_script in action. We add our plugin scripts by specifying their name, path, dependencies, version and we place them in the footer with the 1 in the end. As you can see, the FancyBox script has one dependency, which is jQuery, and the FancyBox setup has 2, (jQuery and the FancyBox).

Time To Test

Your plugin is now ready to work. If you go back to the administration interface, in the plugin section, and activate the plugin, WordPress will add your files in the correct places, and your plugin will start working!

How to use the plugin on specific pages only?

Now that your plugin is activated, from the code we wrote in our init.php file, WordPress will automatically add our files in the header and the footer of every page of our application. This can be right if you effectively need to use this plugin on nearly every page of your site, but if it is not the case, it's more of a waste of resource, and a bigger page load time for nothing. I'm going to show you a little technique if you'd like to include the plugin only on certain pages. It's very simple The trick is to gather the little snippets of code we just wrote, and to put them into one function, that we're going to call FancyBox_wp_setup():
  1. //Group the code inside a function
  2. function fancybox_wp_setup(){
  3. wp_enqueue_style(
  4. "jquery.fancybox", WP_PLUGIN_URL."/jQuery2Wp_fancybox/jquery.fancybox-1.3.1.css",
  5. false, "1.3.1");
  6. wp_enqueue_script("jquery");
  7. wp_enqueue_script(
  8. "jquery.fancybox", WP_PLUGIN_URL."/jQuery2Wp_fancybox/jquery.fancybox.js",
  9. array("jquery"), "1.3.1",1);
  10. wp_enqueue_script(
  11. "jquery.fancyboxsetup", WP_PLUGIN_URL."/jQuery2Wp_fancybox/fancybox-setup.js",
  12. array("jquery","jquery.fancybox"), "",1);
  13. }
This has actually 2 different effects. It prevents WordPress from including your pages on every page, which is something we wanted, and it also gives you access to the function FancyBox_wp_setup(), that you can call on every page template you want to use the plugin on.


When you find the perfect jQuery plugin for your design, integrating it properly for a WordPress use is just a few lines of code away! I hope that next time you'll find a plugin you wish to use, you'll remember this article and you'll turn your plugin into a WordPress one in 5 minutes.

27 Responses to How to turn any jQuery plugin into a WordPress one

  1. makes sense thank you

  2. in order to understand it, you have to be familiar with jquery plugin and how to use it

  3. Thanks a lot, it's so helpful.

    Perhaps it still confuses to some reader because you didnt give the files.

  4. This was very helpful to me and actually very straight forward to me, however if you don't know much about how WP works under the hood, I can see how it could seem overwhelming and be hard to debug.

    For those who want to learn more about how WordPress really works beyond the familiar admin panel... here's a good book, "Professional WordPress Design and Development" by Brad Williams and others....

    Thanks JD!

    • Oddly enough, I did have a problem loading jQuery to get this to work. I have no idea why... perhaps its the theme I am using.


      This simple does not load jquery for my plugin as it should. I did a bunch of research and testing... Go figure.

      But I was able to load jQuery from Google but it conflicted with the admin panel so I block it from loading if admin. like so.

      function my_init_method() {
      if( !is_admin()){
      wp_register_script('jquery', (""), false, '1.7.1');

      add_action('init', 'my_init_method');

  5. What would need to be changed if the jquery plugin requires an older version of jquery?

  6. Hi, Thank you for the tutorial, :)
    please do you have an idea how to make this in my webite?
    here's the link of the demo :
    and here's th link where the tutorial is provided :

    i really have no idea how it works
    thank you

  7. is the name of the function CamelCased or lowercase?

  8. This tutorial SEEMS to have a few gaps:

    1. INIT.PHP
    I look at all my WP plugins already installed, and none have an init.php file. Why is that? If its needed HERE, why not elsewhere? Don't the other plugins likewise need to do the same things we're putting into the init file?

    What about for plugins that don't just automatically put things where needed? I'm contemplating a Carousel jQuery plugin I want to implement in my WP website, and once it is "plugged in" I would need to actually set up the carousel options and place them in appropriate pages. I don't know if that interface is built into the jQuery plugin and would "show up" after doing the above, or whether that's typically an additional step required.

    If it is, and that is beyond the scope of this tutorial, its something you should mention - so as not to leave novices (like myself) wondering why the plugin isn't working after following your instructions.

    (And some serious SPAM happening at the end of your Comments section!! )

  9. Hi. Great and simple tutorial. I have jQuery marquee plugin which I want to convert to WP plugin. I want user to Enter marquee text, and all JQ plugin options as options where user can input/checkbox and it will create a short code where user can paste anywhere on page/post to see that marquee.

  10. This is the best place to contribute and share some information regarding jquery plugin.

  11. Hi, I read this tutorial and I have the information about this tutorial.

  12. my site is using Fancy Box to display popup form and slide image but having a problem with the width of content/ it showing oversize but dont know how to resolve ..
    it here:

  13. excellent amazing blog. i like it.

  14. Very Nice Blog. Thanks For Sharing And Keep Up The Good Work.
    endnot Free download

  15. These jquery plugin are the bet things to use on WordPress.

  16. Here is a list of some of the best products trending in 2018, and so you can be sure to make profits when you sell them to your customers. Please visit my web Best Selling Product

  17. thanks man for the detail, really needed it badly

  18. Very Nice Blog. Thanks For Sharing And Keep Up The Good Work.

  19. Very useful blog. Also you can visit our Kmspico

  20. I have been using this plugin on my wordpress website, its not like other plugins.

  21. good post keep it up, here the my site

  22. Thanks for the post [kmspico](

  23. Amazing! what a notion! What an idea! Beautiful. Remarkable

  24. nice work

  25. Amazing Coding thanks.

Leave a Reply to Jamesh Cancel reply

Your email address will not be published. Required fields are marked *

Other Useful Resources

How to easily integrate a PayPal Checkout with PHP illustration

PayPal is a renowned payment platform that allows you to accept online payments on your site, by taking care of all the money transactions for you. This transparency really is an appreciated quality that allows developers to integrate checkout solutions on merchant sites, by completely outsourcing the banking operations to PayPal.

Another good thing for developers is that the PayPal API is very versatile. It can be very simple if your needs are simple, or it can be very well customized to meet some more advanced needs such as complete shopping carts handling. On the other hand, I sometimes find this API not really user friendly as it works with forms, which fields are not always very intuitive. In other words, depending on the form you are building, you get a different service from PayPal.

In order to get a friendlier and also more generic solution, I wrote a PayPal manager in PHP. This tutorial will show you how you can benefit from this PHP class to integrate PayPal checkouts faster and in a much simpler way.

Read more
A guide to Ajax Interactions with jQuery illustration

The fantastic jQuery library revolutionized the way javascript is being written around the globe. It's been globally acclaimed and adopted, resulting in an award for best open source project in the end of 2009.

In this article, we are going to see how we can use the power of this library to create your own Ajax request effortlessly, to make pages communicate in a user friendly way. Thank you jQuery team, the days of javascript darkness are over!

Read more
How to create your own rss feed illustration

RSS is a way of easily keep your site's readers up to date with your latest content. That's a reason why it is widely used by the famous blogs and big sites. Once someone subscribes to an RSS feed, he'll get a notification every time you post some new content to your site. It helps fidelizing your users, therefore improving your traffic. It is definitely worth implementing. This tutorial will guide throught the steps involved in the creation of your own RSS feed from scratch, and based on your site's existing platform.

Read more
@jeremypetrequin Ok tu build spécifiquement ce fichier scss pour avoir un fichier css que tu peux charger pour ton bloc en BO donc. Merci.22 May / 14:21