WordPress Implements Jcrop

Frank — Fri, 10 Apr 2009 11:00:05 +0000

With the upcoming version 2.8 of WordPress, the extension to the JavaScript library jQuery Jcrop is implemented. Jcrop allows directly into a web application to crop images.

A first peak shows the site about Jcrop and I'm curious how it will be included in WordPress, currently is no live demo available.

Thanks for subscribing our feed! Sponsor the WP Engineer Blog and get your brand in front of several hundred users per day!
© WP Engineer Team, All rights reserved (Digital Fingerprint: WPEngineer-be0254ce2b4972feb4b9cb72034a092d)

Use JavaScript Libraries In And Of WordPress

Frank — Tue, 25 Nov 2008 16:16:08 +0000

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

WP Engineer » JavaScript