Wordpress 3.0 jQuery - part 29 ppt

Selector filtersHere are the top selector filters that you'll find most useful with WordPress :not is my personal favorite: Example Syntax Description :notselector jQuery".post img:not.p

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

Example Syntax Description

: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

Example Syntax Description

.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

Example Syntax Description

.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

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

Getting the most out of WordPress

Those are the top elements that you'll need to know for jQuery, now lets take a look

at what can be done to keep things running smooth on the WordPress side First up, the more you know how to leverage your theme's hierarchy the more easily you can create views and pages to leverage with jQuery

The WordPress template hierarchy

Need to work with the theme a bit? Understanding the Template Hierarchy can really help you create the view you need with minimal programming headaches The following list contains the general template hierarchy's rules The absolute simplest theme you can have must contain an index.php page If no other specific template pages exist, then index.php is the default

You can then begin expanding your theme by adding the following pages:

archive.php trumps index.php when a category, tag, date, or author page

is viewed

home.php trumps index.php when the home page is viewed

single.php trumps index.php when an individual post is viewed

search.php trumps index.php when the results from a search are viewed 404.php trumps index.php, when the URI address finds no existing content page.php trumps index.php when looking at a static page

A custom template page, such as: page_about.php, when

selected through the page's Administration panel, trumps

page.php, which trumps index.php when that particular page is viewed

category.php trumps archive.php This then trumps index.php when a category is viewed

A custom category-ID page, such as: category-12.php trumps category.php This then trumps archive.php, which trumps index.php

•

•

•

•

•

•

°

•

°

tag.php trumps archive.php This in turn trumps index.php when a tag page is viewed

A custom tag-tagname page, such as: tag-reviews.php

trumps tag.php This trumps archive.php, which trumps

index.php

author.php trumps archive.php This in turn trumps index.php, when an author page is viewed

date.php trumps archive.php, This trumps index.php when a date page

is viewed

You can learn more about the WordPress theme template hierarchy here: http://codex.wordpress.org/Template_Hierarchy

•

°

•

•