Just like WordPress plugins, there are several jQuery plugins available. jQuery plugins, are built to extend the capabilities of a jQuery library. Most of the times, popular jQuery plugins or libraries get converted into WordPress plugins. For example, the jQuery UI Widgets plugin makes use of jQuery libraries, as a WordPress plugin.
But say you come across a really awesome jQuery plugin, which was not provided by any WordPress plugin. You could just make a WP plugin of your own. This article will guide you through the process of converting a jQuery Plugin into a WordPress plugin.
What is a jQuery Plugin
jQuery plugins are built to provide portable utility functions. For example, if you were repeatedly using a set of code, it is best to put it in a function. And if you want to use the function, across various projects, it would apt to make a plugin. A jQuery plugin, basically, extends the jQuery prototype object.
To create a WordPress plugin from a jQuery plugin, we have to understand, where each part, of the jQuery plugin, will be placed.
Building your WordPress Plugin
You need to start by creating a minimal plugin, with a functions.php file. The following code specified should be placed in this file:
-
Including Scripts: A jQuery plugin is a javascript file. The core functionalities of the plugin are placed in this file. It is good practice to place your jQuery plugin scripts in a separate ‘js’ folder. You need to enqueue your scripts using the ‘wp_enqueue_scripts’ function. Good practice is to include scripts in the head section of a page.
-
Including Stylesheets: Some jQuery plugins may have their own custom stylesheet. You would need to enqueue any stylesheets as well, if they are present. The ‘wp_enqueue_scripts’ function,will be used to enqueue stylesheets as well.
The correct hook to enqueue your plugin specific stylesheets and scripts is using the ‘wp_enqueue_scripts’ hook. Thus, your functions.php file would have the following code:
[pre]// function to enqueue stylesheets and scripts
function theme_name_scripts() {
wp_enqueue_style( ‘style-name’, plugins_url( ‘css/style.css’ , __FILE__ ) );
wp_enqueue_script(“jquery”);
wp_register_script( ‘script-name’, plugins_url( ‘js/example.js’ , __FILE__ ), array(‘jQuery’) );
wp_enqueue_script(‘script-name’);
}
add_action( ‘wp_enqueue_scripts’, ‘wdm_plugin_specific_scripts_styles’);[/pre]
Loading JavaScripts only on Specific Pages
By default, if you leave your plugin as is, WordPress will add your scripts and stylesheets on every page. If your plugin is needed on every page of your site, this will work fine. But, if your plugin is used only on specific pages, loading scripts on every page can negatively affect page load times. To minimize scripts on every page, it is best to load the scripts only when needed.
For this, an option is to make use of Conditional tags, before enqueuing scripts.
