jQuery and WordPress Reference Guide [ 266 ] 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 lters: jQuery('.selector:filter(params if any)').function(); Appendix [ 267 ] Selector filters Here are the top selector lters that you'll nd 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. :rst jQuery(".post:first").jqFn(); Filters down to the rst 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 rst 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). jQuery and WordPress Reference Guide [ 268 ] Content filter syntax After the regular selector lters, you'll nd these content lters very useful (especially :has()). jQuery(".selector:content-filter(params if any)").function(); Content filters Pretty much all the content lters 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 specic 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 ler syntax: jQuery(".selector:child-filter(params if any)").function(); Child filters You'll nd child lters 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 specics using these lters. Appendix [ 269 ] 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 rst element. :rst-child jQuery(".linkcat li:first- child").css("background", "#f60"); Filters down to the elements that are the rst 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 lter syntax: jQuery(":form-filter").function(); Form filters WordPress natively has a simple content form and a single input eld. However, the WordPress Cforms II plugin is quite invaluable for most projects, and if you're using that plugin, you'll nd most of these lters 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. jQuery and WordPress Reference Guide [ 270 ] Example Syntax Description :image jQuery("form:image"). css("background", "#f60"); Filters to all image elements (classied as a form lter, 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. :le jQuery("form:file"). css("background", "#f60"); Filters to all input elements that are type le. jQuery: Useful functions for working within WordPress While I've recapped most of the selector lters 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 nd 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. Appendix [ 271 ] 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 rst element of the selected elements. Traversing the DOM .append and .prepend are going to be your most used DOM functions. However, you'll nd .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. jQuery and WordPress Reference Guide [ 272 ] 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 executed on alternate clicks. Appendix [ 273 ] 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 nished. .slideDown(speed, functionName) jQuery(".post") .slideDown('slow', function() { // code }); Slides a hidden selected element down from top to bottom until it is dened size. Speed can be "fast" or "slow" or in milliseconds. A function can be called when the animation is nished. .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 nished. .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 specic 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. jQuery and WordPress Reference Guide [ 274 ] 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 specic 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 nds 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. • • • • • • ° • ° Appendix [ 275 ] 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. • ° • • . functionName) jQuery( ".post") .animate({width: 200 , opacity: .25}, 100 0, function(){//code}); Creates a custom transition of CSS properties on the selected elements. .stop() jQuery( ".post"). parent. :last-child jQuery( ".linkcat li:last- child").css("background", "#f 60& quot;); Filters down to the elements that are the last child of their parent. :only-child jQuery( ".pagenav. selector. Note, this is not zero-indexed! 1 and odd selects the rst element. :rst-child jQuery( ".linkcat li:first- child").css("background", "#f 60& quot;); Filters down to