WordPress + jQuery

Daryl Koopersmith

@darylkoop

darylkoop.com

hello at darylkoop.com

Adding jQuery to your WordPress plugin

wp_enqueue_script('jquery');

Use wp_enqueue_script wherever possible.

Many plugins use jQuery, and you don’t want to include it twice!

*If you want to use jQuery from a CDN, go for it! However, don’t just stick it in a script element. Instead, unregister the WP jQuery script and re-register it with the CDN url.

Adding your own scripts to your WordPress plugin

wp_enqueue_script( $script_name, $source, $dependencies, $version, $in_footer );

For example…

wp_enqueue_script( 'my-awesome-js', 'my-awesome-js.js', array('jquery'), 2.0, true );

What’s jQuery?

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

—jQuery.com

WordPress’ official JavaScript library.

A jQuery Object

…is a collection of DOM nodes.

The DOM is JavaScript’s representation of the HTML page.

It’s basically a big tree.

Calling jQuery

jQuery can be accessed using the jQuery variable or the $ variable.

WordPress uses jQuery.noConflict

jQuery.noConflict disables the $ variable.

If you want to still use the $ variable, wrap your code in this:

(function($){
	// Your code goes here!
})(jQuery);

For the curious, this creates an anonymous function and immediately calls it.

We pass the jQuery variable into the function, which maps it to the $ inside the function.

What can you do with jQuery?

// The jQuery.com example!
$("p.neat").addClass("ohmy").show("slow");

Select Elements and Set Attributes

$('p.neat').addClass('ohmy').attr('title',"Neat, man!");

Set CSS Properties

$('.my-selector').css('background-color', 'red');

Set CSS Properties

$('.my-selector').css({
	'background-color': 'red',
	'color': 'white'
});

Animate Objects

$('.my-selector').slideUp();

Animate Objects

$('.my-selector').animate({
	height: '+=50px',
	borderWidth: '25px',
	marginLeft: '150px',
	marginTop: '30px'
}, 1000 );

Manipulate the DOM

Create an element

$('.my-selector').after('<p>A new paragraph.</p>');

Chaining

$('.my-selector').text('Done!').delay(2000).fadeOut();

Chaining

You can change your selection as you chain:

$('.my-selector').text('Bye!').siblings('.neat').hide('slow');

Chaining

We can run into some trouble when chaining animations...

$('.my-selector').slideUp('fast').fadeIn();

Chaining

We can run into some trouble when chaining animations...

$('.my-selector').slideUp('slow').text('Done!');

Callbacks

Animations take time.

var duration = 'fast',
	callback = function() {
		$(this).fadeIn( 2000 );
	};

$('.my-selector').slideUp( duration, callback );

Callbacks

$('.my-selector').slideUp('fast', function() {
	$(this).fadeIn( 2000 );
});

Events

We've just used click, but there are many more...

click, dblclick, mousedown, mouseup, mouseover, mouseout, mouseenter, mouseleave, keydown, keypress, keyup, resize...

Events

Most events can be called on any element on the page.

When an event is run, it triggers any function attached to it.

$( selector ).click( callback );
$( selector ).mouseover( callback );

Events

All of them are aliases of the bind function.

$( selector ).bind('click', callback );

We bind actions to events using functions.

So the code to our examples really looks like this...

$('div').click( function() {
	// Our code went here.
	$('p').show('slow');
});

The this keyword

$('div').click( function() {
	// 'this' is the DOM element that was just clicked.
	// If we want to use jQuery methods on it, we need to
	// turn it into a jQuery object.
	$(this).fadeOut();
});

A Special Event: $(document).ready( callback );

The ready event is triggered on the document when the DOM has fully loaded.

Any code that traverses the DOM should be placed inside $(document).ready();

$(document).ready( function() {
	// Your code goes here
	$('div').mouseenter( function() {
		$(this).css('background-color', 'red');
	}).mouseleave( function() {
		$(this).css('background-color', 'lightBlue');
	});
});

A Special Event: $(document).ready( callback );

In fact, all of the example click events were also wrapped in $(document).ready().

$(document).ready( function() {
	$('div').click( function() {
		$(this).fadeOut();
	});
});

AJAX

...it's really easy.

$.post( ajaxurl, function( data ) {
	$('div').after( data );
});

AJAX in WordPress

Using AJAX in WordPress is pretty easy, too.

Send an action to ajaxurl in the admin, or a variable set to admin_url('admin-ajax.php'); for the frontend.

// Action for admin
add_action("wp_ajax_$my_action", 'my_action_callback');
// Action for backend
add_action("wp_ajax_nopriv_$my_action", 'my_action_callback');

Debugging

console.log( any, number, of, variables );

Along with a nice console, like Firebug or the Webkit Inspector.

How do you know if jQuery matched an element?

selection.length

Want to learn more about jQuery?

They have some fantastic documentation.

(and it runs WordPress, too!)

Read the source.

Any questions?

Daryl Koopersmith

@darylkoop

darylkoop.com

hello at darylkoop.com