Use JavaScript Libraries In And Of WordPress

If you develop in and for WordPress, it's advisable to use a library of the core and a Plugin for the the library with the desired effect.

Same for theme and Plugin authors. If you use a function of WordPress to implement JavaScript, you will have less complications and the compatibility between Plugins is much higher.
I will show you an example with Thickbox how to use JavaScript from the core.

There are many possibilities to implement the „Lightbox“ effect on your website. Let's take a close look on a way to use it without a Plugin.
WordPress has Thickbox in their standard installation, so it's not very complicated to use it.

wp_enqueue_script()

Since version 2.1 of WordPress, there is the function wp_enqueue_script() included, which makes the implementation of JavaScript libraries very easy and also checks it. There is no need to use additional JavaScripts, the integration is easy and clean.

wp_enqueue_style()

Additionally pay attention to wp_enqueue_style() . With this function you can integrate CSS files.
Both functions understand many parameters. For the example we need Thickbox, which exists as Plugin for jQuery. That's why you have to load both files, right?

wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'thickbox' );

WordPress manages the dependencies , so it would be enough if you present the extension and WordPress will detect that jQuery is necessary. It's enough to use wp_enqueue_script( 'thickbox' );. Therefor jQuery will be load and be placed into the right spot of the code. The same happens if other calls are needing jQuery. WordPress pays attention and only allows one call of the library or extension to prevent that they get loaded several times.

So we integrate in our example the necessary JavaScript files. Additionally we need a style to get the effect of the Thickbox.
It's enough to include the standard design of WordPress by calling the key Thickbox for the CSS call wp_enqueue_style( 'thickbox' ).

You can adjust the design for your own preferences.
Here a small example to add the close icon into your core.

#TB_window a:link {
	color: transparent !important;
	background: url('http:/examble.com/wp-includes/js/thickbox/tb-close.png') no-repeat;
	padding: 0 4px !important;
}

#TB_window a:hover {
	background: red;
}

If you don't want to look after it, which is only possible in your WordPress backend (otherwise the icons are not available, since they are defined in JS), you can just use the call add_thickbox(). With this everything will be included in Thickbox.

To connect links with this effect, you have to add to the link the class thickbox .
In the most simple case it would look like this:

<a href="http://examble.com/image.png" class="thickbox">
	<img src="http://examble.com/image-thumb.png" alt="Image" />
</a>

Set class automatically

Alternatively you can set the class automatically. The following function in functions.php of the theme does that, but it's not guaranteed that it works in all cases.

/*
 * Thickbox scan, add class for a
 */
function fb_add_thickbox($content){

	$content = preg_replace('/<a(.*?)href="(.*?).(jpg|jpeg|png|gif|bmp|ico)"(.*?)><img/U', '<a$1href="$2.$3" $4 class="thickbox"><img', $content);

	return $content;
}
add_filter('the_content', 'fb_add_thickbox', 2);

Other JavaScripts

WordPress offers the developers a range of other libraries and extensions to use them. The implementation of the displayed example above shows that there are no or just few difficulties and the different libraries don't disturb each other. Also it's not necessary to load some libraries several times, which happens because of some Plugins.

You can find quite a lot of keys in /wp-includes/script-loader.php. It's worth it to check them out. Here is just a selection of keys:

  • prototype
  • scriptaculous-root
  • scriptaculous-builder
  • scriptaculous-dragdrop
  • scriptaculous-effects
  • scriptaculous-slider
  • scriptaculous-sound
  • scriptaculous-controls
  • jquery
  • jquery-form
  • jquery-color
  • interface
  • suggest
  • schedule
  • jquery-hotkeys
  • thickbox
  • swfupload
  • swfupload-degrade
  • swfupload-swfobject
  • jquery-ui-core
  • jquery-ui-tabs
  • jquery-ui-sortable
  • jquery-ui-draggable
  • jquery-ui-resizable
  • jquery-ui-dialog
  • wp-gears
  • farbtastic

If you deliver a key, you can also deliver it in an array, which extension is necessary.

wp_enqueue_script( 'scriptaculous', '', array('scriptaculous-dragdrop', 'scriptaculous-slider', 'scriptaculous-controls'), '1.8.0')

Own scripts

Alternatively you can include your own scripts with the help of the function. Here an example:

wp_enqueue_script( 'my_script',  plugins_url($path = 'my_plugin_folder/js/my_script.js'), array('jquery') );

It is not necessary to use just js-files, you can also work with PHP, if you like to use some variables of PHP

wp_enqueue_script( 'my_script',  plugins_url($path = 'my_plugin_folder/js/my_script.php'), array('jquery') );

Do you assume a specific version of the library, you can also deliver the version.

wp_enqueue_script( 'my_script',  plugins_url($path = 'my_plugin_folder/js/my_script.php'), array('jquery'), '1.2.1.3' );

This post should show you how to avoid complications with other libraries by using Plugins. The usage of this function is not only for Plugins, you can use it in your WordPress theme too.

Comments are closed.

6 comments

  1. Baz L

    Is there a way to "remove" these so that they don't get pulled in (from a plugin or otherwise)?

    I'm trying to use the minify script for ALL my JS and CSS files, so having different plugins include jQuery, Prototype, etc. messes things up.

  2. Michael

    @Baz L: I think, there is no way. You can control your own scripts, but some plugins uses the hook in the header to include javascript. You have to edit every plugin, but it makes no sense.

  3. papuapost

    I have been looking for using most of the Core Scripts from WP Admin and Includes, and what you have written here helped a lot.

    thank you so much

  4. web development company

    yes, it is extreme right that if we use wordpress plugin which are recommended to develop by their developers to add on blogs or owner site's blog without any problems; Above post is quite interesting on same theme to aware about the WP-plugin. . .

2 pingbacks

  1. Some links | Ionut Staicu - Webdeveloper Blog
  2. How to use javascript to make your GetResponse subscription form check fields. | My Webmaster Tips