Book Image

WordPress 3.0 jQuery

By : Tessa B. Silver, Matt Mullenweg
Book Image

WordPress 3.0 jQuery

By: Tessa B. Silver, Matt Mullenweg

Overview of this book

Using jQuery you can create impressive animations and interactions which are simple to understand and easy to use. WordPress is the leading publishing platform that can be customized to power any type of site you like. But when you combine the power of jQuery with WordPress—the possibilities are infinite.The combination creates a powerhouse of possibilities for generating top-notch, professional websites with great usability features and eye catching visual enhancements. This easy-to-use guide will walk you through the ins and outs of creating sophisticated, professional enhancements and features, specially tailored to take advantage of the WordPress personal publishing platform. It will walk you through clear, step-by-step instructions to build several custom jQuery solutions for various types of hypothetical clients and also show you how to create a jQuery and WordPress Plugin.This book covers step-by-step instructions for creating robust and flexible jQuery solutions for today's top site enhancements: expanding/sliding content, rotating slideshows and other animation tricks, great uses of jQuery's UI plugin widgets as well as AJAX techniques. Along with these it will also show you best practices for jQuery and WordPress development. That means, you'll learn how to implement just about any jQuery enhancement you can dream of on a WordPress site and also learn how to do it with minimal edits to the site's theme and while allowing the site's content editors to continue adding content the way they've always been (usually with the WYSIWYG editor), and never having to worry that they'll forget or not know how to add a special attribute or custom HTML to a post to make the jQuery feature work.From development tools and setting up your WordPress sandbox, through enhancement tips and suggestions, to coding, testing and debugging, and ensuring that the WordPress content editor's workflow isn't interrupted by having to accommodate an enhancement with special HTML, this book covers the best practices for not only jQuery development but specifically jQuery within WordPress development.
Table of Contents (14 chapters)
Wordpress 3.0 jQuery
Credits
About the Author
About the Reviewer
Preface

jQuery reference for WordPress


In the next few sections, we'll take a look at the top references you'll need for jQuery development within WordPress. Let's get started with staying in noConflict mode and looking at the most useful selector filters.

noConflict mode syntax

The simplest is to just use the jQuery variable in all your selection statements:

jQuery('.selector').function();

You can also set up your own variable:

<script type="text/javascript">
var $jq = jQuery.noConflict();
$jq(document).ready(function() {
$jq("p").click(function() {
alert("Hello world!");
});
});
</script>

You can even safely use the $ variable if you set it up correctly:

jQuery(function ($) {
/* jQuery only code using $ can safely go here */
$("p").css('border','#ff6600');
});

Useful selector filters for working within WordPress

Remember: Sometimes it's easier to exclude what you don't want in a selection set, rather than select for everything you do want.

Selection filter syntax

Here's the basic syntax for working with selector filters:

jQuery('.selector:filter(params if any)').function();

Selector filters

Here are the top selector filters that you'll find most useful with WordPress (:not is my personal favorite):

Example

Syntax

Description

:not(selector)

jQuery(".post img:not(.pIcon)").jqFn();

Filters out all elements matching the given selector.

:header

jQuery(".post :header").jqFn();

Filters down to all elements that are headers, such as h1, h2, h3, and so on.

:first

jQuery(".post:first").jqFn();

Filters down to the first selected element only.

:last

jQuery(".post:last").jqFn();

Filters down to the last selected element only.

:even

jQuery(".post:even").jqFn();

Filters down to even elements only. Note: Arrays are zero-indexed! Zero is considered an even number, so your first item will be selected!

:odd

jQuery(".post:odd").jqFn();

Filters down to odd elements only. Note: Arrays are zero-indexed! Zero is considered an even number, so your second item will be selected!

:eq(number)

jQuery(".post:eq(0)").jqFn();

Filters down to a single element by its index, which again is zero-indexed.

:gt(number)

jQuery(".post:gt(0)").jqFn();

Filters down to all elements with an index above the given one, again this is zero-indexed.

:lt(number)

jQuery(".post:lt(2)").jqFn();

Filters all elements with an index below the given one.

:animated

jQuery(".post:animated").jqFn();

Filters down to all elements that are currently being animated (we'll get to animation later in this chapter).

Content filter syntax

After the regular selector filters, you'll find these content filters very useful (especially :has()).

jQuery(".selector:content-filter(params if any)").function();

Content filters

Pretty much all the content filters come in handy with WordPress. They help you work with what the Page and Post WYSIWYG editor's output very well.

Example

Syntax

Description

:has(selector)

jQuery(".post:has(.entry)").css("background", "#f60");

Filters down to elements that have at least one of the matching elements inside it.

:contains(text)

jQuery(".post:contains('Hello world')").css("background", "#f60");

Filters down to elements that contain the specific text. Note: This is case sensitive!

:empty

jQuery(":empty')").css("background", "#f60");

Filters down to elements that have no children. This includes text nodes.

:parent

jQuery(":parent')").css("background", "#f60");

Filters down to elements that are the parent of another element. This includes text nodes.

Child filter syntax

Here's the basic syntax for using child filer syntax:

jQuery(".selector:child-filter(params if any)").function();

Child filters

You'll find child filters will come in most handy when working with the various list tags that WordPress puts out. Categories, pages, gallery pages, you'll be able to control them and select specifics using these filters.

Example

Syntax

Description

:nth-child(number/even/odd)

jQuery(".linkcat li:nth-child(1)").css("background", "#f60");

Filters down to the elements that are the "nth" child of it's selector. Note, this is not zero-indexed! 1 and odd selects the first element.

:first-child

jQuery(".linkcat li:first-child").css("background", "#f60");

Filters down to the elements that are the first child of their parent.

:last-child

jQuery(".linkcat li:last-child").css("background", "#f60");

Filters down to the elements that are the last child of their parent.

:only-child

jQuery(".pagenav li:only-child").css("background", "#f60");

Filters down to the elements that are only-children of their parent. If a parent has more than one child, no elements are selected.

Form filter syntax

Here's the form filter syntax:

jQuery(":form-filter").function();

Form filters

WordPress natively has a simple content form and a single input field. However, the WordPress Cforms II plugin is quite invaluable for most projects, and if you're using that plugin, you'll find most of these filters helpful:

Example

Syntax

Description

:input

jQuery("form:input").css("background", "#f60");

Filters to all input, textarea, select and button elements.

:text

jQuery("form:text").css("background", "#f60");

Filters to all input elements that are type text.

:password

jQuery("form:password").css("background", "#f60");

Filters to all input elements that are type password.

:radio

jQuery("form:radio").css("background", "#f60");

Filters to all input elements that are type radio.

:checkbox

jQuery("form:checkbox").css("background", "#f60");

Filters to all input elements that are type checkbox.

:submit

jQuery("form:submit").css("background", "#f60");

Filters to all input elements that are type submit.

:image

jQuery("form:image").css("background", "#f60");

Filters to all image elements (classified as a form filter, but useful for regular images).

:reset

jQuery("form:reset").css("background", "#f60");

Filters to all input elements that are type reset.

:button

jQuery("form:button").css("background", "#f60");

Filters to all input elements that are type button.

:file

jQuery("form:file").css("background", "#f60");

Filters to all input elements that are type file.

jQuery: Useful functions for working within WordPress

While I've recapped most of the selector filters as they're just that useful, in this next section I'll go over the syntax and usage for the top functions that you'll find you use the most in your WordPress projects.

Never fear, you can skim through Chapter 2, Working with jQuery in WordPress for a complete listing as well as usage of functions not covered here.

Working with classes and attributes

One of the most simple yet powerful things you can do quickly with jQuery is transform objects by changing their CSS properties.

Example

Syntax

Description

.css('property', 'value')

jQuery(".post") .css("background", "#f60");

Adds or changes the CSS properties of the selected elements.

.addClass('className')

jQuery(".post") .addClass("sticky");

Adds listed class(es) to each of the selected elements.

.removeClass('className')

jQuery(".post") .removeClass("sticky");

Removes listed class(es) from each of the selected elements.

.toggleClass('className', switch-optional)

jQuery(".post") .toggleClass("sticky");

Toggles listed class(es) from each of the selected elements based on their current state. If the class is there, it's removed; if it's not, it's added.

.hasClass('className')

jQuery(".post") .hasClass("sticky");

Returns true or false if listed class(es) from each of the selected elements exist.

.attr

jQuery(".post").attr();

Retrieves the attribute's value for the first element of the selected elements.

Traversing the DOM

.append and .prepend are going to be your most used DOM functions. However, you'll find .wrapAll invaluable for helping contain any new elements you create.

Example

Syntax

Description

.append(html & text)

jQuery(".post") .append("<b>post ends here</b>");

Inserts content in the parameter, to the end of each selected element.

.appendTo(selector)

jQuery("<b>post ends here</b>").appendTo(" .post");

Does the same thing as append, just reverses the element selection and content parameter.

.prepend(html & text)

jQuery(".post") .prepend("<b>post starts here</b>");

Inserts content in the parameter, to the beginning of each selected element.

.prependTo(selector)

jQuery("<b>post starts here</b>").prependTo(" .post");

Does the same thing as prepend, just reverses the element selection and content parameter.

.after(string)

jQuery(".post") .after("<b>This goes after</b>");

Inserts content in the parameter, after and outside of each selected element.

.insertAfter(selector)

jQuery("<b>This goes after</b>").insertAfter(" .post");

Does the same thing as after, just reverses the element selection and content parameter.

.before(html & text)

jQuery(".post") .before("<b>This goes before</b>");

Inserts content in the parameter, before and outside of each selected element.

.insertBefore(selector)

jQuery("<b>This goes before</b>") .insertBefore("class");

Does the same thing as before, just reverses the element selection and content parameter.

.wrap(html or functionName)

jQuery(".post").wrap("<div class=".fun" />");

Wraps an HTML structure around each selected element. You can also construct a function that will wrap each element in HTML.

.wrapAll(html)

jQuery(".post") .wrapAll("<div class=" .fun" />");

Similar to wrap, but places the HTML structure around all of the elements together, not each individual element.

.wrapInner(selector)

jQuery(".post") .wrapInner("<div class=" .fun" />");

Similar to wrap, but it places the HTML structure inside each of the selected elements around any text or child elements of each selected element.

.html(html & text)

jQuery(".post") .html("<h2>Replacement Text</h2>");

Replaces any content and child elements of selected items with the content in the parameter.

.text(text only html chars will be escaped)

jQuery(".post") .text("Replacement Text");

Similar to HTML, but text only. Any HTML characters will be escaped as ascii codes.

Important jQuery events

Most of the time in WordPress, it's all about .click and .hover but .toggle and .dbclick will come in handy as well.

Example

Syntax

Description

.click(functionName)

jQuery(".post") .click(function(){//code});

Binds a function to the click event type, executed on a single click.

.dbclick(functionName)

jQuery(".post") .dbclick(function(){//code});

Binds a function to the click event type, executed on a double click.

.hover(functionName1, functionName2)

jQuery(".post") .hover(function(){//code});

Works with the mouseenter/mouseleave event types and binds just two functions to the selected elements, to be executed on mouseenter and mouseleave.

.toggle(functionName1, functionName2, functionName3, ...)

jQuery(".post") .toggle(function(){//code});

Works with the click event type and binds two or more functions to the selected elements, to be executed on alternate clicks.

Animation at its finest

Anything that animates is going to look cool. Make sure that you know how to handle these functions for some top-notch jQuery enhancements.

Example

Syntax

Description

.slideUp(speed, functionName)

jQuery(".post") .slideUp('slow', function() { // code });

Slides the selected element up from bottom to top until it is hidden. Speed can be "fast" or "slow" or in milliseconds. A function can be called when the animation is finished.

.slideDown(speed, functionName)

jQuery(".post") .slideDown('slow', function() { // code });

Slides a hidden selected element down from top to bottom until it is defined size. Speed can be "fast" or "slow" or in milliseconds. A function can be called when the animation is finished.

.slideToggle()

jQuery(".post") .slideToggle('slow', function() { // code });

Toggles the visibility of the selected element using the slide animation. Speed can be "fast" or "slow" or in milliseconds. A function can be called when the animation is finished.

.fadeOut(speed, functionName)

jQuery(".post") .fadeOut("slow", function(){//code});

Fades a selected element that's visible or alpha is 1 to 0.

.fadeIn(speed, functionName)

jQuery(".post") .fadeIn("slow", function(){//code});

Fades a selected element who's visibility is hidden or alpha is set as 0 to 1.

.fadeTo(speed, alpha, functionName)

jQuery(".post") .fadeTo("slow", .3, function(){//code});

Fades a selected element to a specific alpha from 0 to 1.

.animate(css properties, duration, easing, functionName)

jQuery(".post") .animate({width: 200, opacity: .25}, 1000, function(){//code});

Creates a custom transition of CSS properties on the selected elements.

.stop()

jQuery(".post") .stop();

Stops an animation on a selected element.