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:

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('/
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.