WordPress 3.0 jQuery

WordPress 3.0 jQuery
eBook: $26.99
Formats: PDF, PacktLib, ePub and Mobi formats
save 15%!
Print + free eBook + free PacktLib access to the book: $71.98    Print cover: $44.99
save 37%!
Free Shipping!
UK, US, Europe and selected countries in Asia.
Also available on:
Table of Contents
Sample Chapters
  • Enhance the usability and increase visual interest in your WordPress 3.0 site with easy-to-implement jQuery techniques
  • Create advanced animations, use the UI plugin to your advantage within WordPress, and create custom jQuery plugins for your site
  • Turn your jQuery plugins into WordPress plugins and share with the world
  • Implement all of the above jQuery enhancements without ever having to make a WordPress content editor switch over into HTML view


Book Details

Language : English
Paperback : 316 pages [ 235mm x 191mm ]
Release Date : September 2010
ISBN : 1849511748
ISBN 13 : 9781849511742
Author(s) : Tessa Blakeley Silver
Topics and Technologies : All Books, CMS and eCommerce, jQuery, Open Source, Web Development, WordPress

Table of Contents

Chapter 1: Getting Started: WordPress and jQuery
Chapter 2: Working with jQuery in WordPress
Chapter 3: Digging Deeper: Understanding jQuery and WordPress Together
Chapter 4: Doing a Lot More with Less: Making Use of Plugins for Both jQuery and WordPress
Chapter 5: jQuery Animation within WordPress
Chapter 6: WordPress and jQuery's UI
Chapter 7: AJAX with jQuery and WordPress
Chapter 8: Tips and Tricks for Working with jQuery and WordPress
Appendix: jQuery and WordPress Reference Guide
  • Chapter 1: Getting Started: WordPress and jQuery
    • This book's approach
    • Core fundamentals you need to know
      • WordPress
      • Basic programming
        • JavaScript and AJAX techniques
        • PHP
    • Essential tools
      • Code/HTML editor
      • Firefox
        • Web Developer toolbar
        • Firebug
      • Not essential, but helpful: Image editor
    • jQuery background and essentials
      • What jQuery does (really well)
      • How we got here: From JavaScript to jQuery
        • Once upon a time, there was JavaScript
        • Why jQuery is simpler than JavaScript
      • Understanding the jQuery wrapper
      • Getting started with jQuery
        • Downloading from the jQuery site
      • Including the jQuery library
    • WordPress background and essentials
      • Overview of WordPress
      • Essentials for getting WordPress running
        • Using WAMP
      • Using MAMP
        • Choosing a hosting provider
        • Rolling out WordPress
    • jQuery and WordPress: Putting it all together
    • Summary
  • Chapter 2: Working with jQuery in WordPress
    • Getting jQuery into WordPress
      • jQuery now comes bundled with WordPress
        • Registering jQuery in a WP theme
        • Avoiding problems registering jQuery
      • Using Google's CDN
        • Registering and including jQuery through Google's CDN into a theme
      • Using WordPress' bundled jQuery versus including your own jQuery download or using Google's CDN
    • Keeping conflicts out!
      • Setting your own jQuery variable
      • But I really want to use the $ variable!
    • Launching a jQuery script
    • Our first WordPress and jQuery setup
      • Registering jQuery in our setup
      • Registering your own custom script file
      • Setting up the custom-jquery file
    • jQuery secret weapon #1: Using selectors and filters
      • Selecting anything you want from the document
      • Filtering those selections
        • Basic filters
        • Child filters
        • Content filters
        • Form filters
        • Attribute filters
        • Visibility
    • jQuery secret weapon #2: Manipulating CSS and elements in the DOM
      • Manipulating CSS
        • Manipulating attributes
      • Manipulating elements and content
      • Working with the DOM
    • jQuery secret weapon #3: Events and effects (aka: the icing on the cake)
      • Working with events
        • Helpers are so helpful!
        • Working with bind, unbind, and the event object
      • Adding effects
        • Showing and hiding
        • Sliding in and out
        • Fading in and out
        • Working with the animate function
    • Making it all easy with statement chaining
    • Our First Project: Expanding/collapsing WordPress posts
      • Keeping jQuery readable
    • Summary
  • Chapter 3: Digging Deeper: Understanding jQuery and WordPress Together
    • Two ways to "plugin" jQuery into a WordPress site
      • WordPress themes overview
      • WordPress plugins overview
      • jQuery plugins overview
    • The basics of a WordPress theme
      • Understanding the template's hierarchy
        • A whole new theme
      • The Loop
      • Tags and hooks
        • Conditional tags
        • Template include tags
        • Plugin hooks
      • Project: Editing the main loop and sidebar in the default theme
        • Changing the loop
        • Changing the sidebar
    • The basics of a WordPress plugin
      • Project: Writing a WordPress plugin to display author bios
        • Coding the plugin
        • Activating our plugin in WordPress
    • The basics of a jQuery plugin
      • Project: jQuery fade in a child div plugin
        • Extra credit: Adding your new jQuery plugin to your WordPress plugin
    • Putting it all together: Edit the theme or create a custom plugin?
    • Summary
  • Chapter 4: Doing a Lot More with Less: Making Use of Plugins for Both jQuery and WordPress
    • The project overview: Seamless event registration
      • What the "client" wants
    • Part 1: Getting everything set up
      • What we'll need
        • ColorBox
        • Cforms II
        • Installing the WordPress plugin
        • Setting up the registration form with cforms II
        • Creating the register page using WordPress 3.0's custom menu option
      • Working with WordPress 3.0's custom menu option
      • Customizing the theme
        • Creating the custom page template
        • Creating the custom category template
      • Getting jQuery in on the game plan
        • Including the ColorBox plugin
        • Writing a custom jQuery script
      • Pulling it all together: One tiny cforms II hack required
    • Part 2: Form validation—make sure that what's submitted is right
      • The trick to client-side validation: Don't just tell them when it's wrong!
        • Blank input validation
        • Properly formatted e-mail validation
    • Final thoughts and project wrap up: It's all about graceful degrading
    • Summary
  • Chapter 5: jQuery Animation within WordPress
    • jQuery animation basics
      • CSS properties made magical
        • Making it colorful
      • Taking it easy, with easing control
      • Timing is everything: Ordering, delaying, and controlling the animation que
        • Getting your ducks in row: Chain 'em up
        • Delay that order!
        • Jumping the queue
        • Stepping to completion
    • Grabbing the user's attention
      • Project: Animating an alert sticky post
      • Creating easy, animated graphs
    • Delving deeper into animation
      • Project: Creating snazzy navigation
      • Project: Creating rotating sticky posts
        • Putting in a little extra effort: Adding a loop indicator
    • Summary
  • Chapter 6: WordPress and jQuery's UI
    • Getting to know jQuery's UI plugin
      • Widgets
      • Interactions
      • Effects
      • jQuery UI plugin versions bundled in WordPress
      • Picking and choosing from the jQuery's UI site
      • Making it look right: Easy UI theming
      • Including the jQuery UI plugin features into your WordPress site
        • Including jQuery's UI from WordPress' bundle
        • Including from the Google CDN
        • Loading up your own custom download from your theme or plugin directory
        • Don't forget your styles!
    • Enhancing effects with jQuery UI
      • Effects made easy
      • Easing is just as easy
      • Color animation with jQuery UI
    • Enhancing the user interface of your WordPress site
      • Project: Turning posts into tabs
        • Setting up custom loops in the WordPress theme
        • Implementing tabs entirely with jQuery
      • Project: Accordion-izing the sidebar
      • Project: Adding a dialog box to a download button with icons
    • Summary
  • Chapter 7: AJAX with jQuery and WordPress
    • What AJAX is and isn't: A quick primer
    • AJAX: It's better with jQuery
      • Assessing if AJAX is right for your site—a shorter disclaimer
    • Getting started with jQuery's AJAX functionality
      • Using the .ajax() function
        • Taking shortcuts
        • Specifying where to .load() it
        • Transforming loaded content
    • Project: Ajaxifying posts
    • .getJSON: The littlest birds get the most re-tweets
      • JSON and jQuery basics
        • What JSON looks like
        • Using JSON in jQuery
        • Using .getJSON with Twitter
        • Using Twitter's user timeline method
        • Using getJSON with Flickr
      • Other popular services that offer APIs with JSON format
    • Project: Ajax-izing the built-in comment form
    • Summary
  • Chapter 8: Tips and Tricks for Working with jQuery and WordPress
    • Keep a code arsenal
      • Free your arsenal
      • Your arsenal on-the-go
    • jQuery tips and tricks for working in WordPress
      • Try to use the latest version of jQuery
        • Stay current with the Google CDN
      • Stay in No Conflict mode
      • Make sure other scripts in the theme or plugin use the Script API
      • Check your jQuery syntax
        • Colons and semicolons
        • Closing parenthesis
        • Mismatched double and single quotes
      • Use Firefox and Firebug to help with debugging
      • Know what jQuery is doing to the DOM
      • Tips for writing great selectors
        • Don't forget about your selection filters!
      • Keep the WordPress editor's workflow "flowing"
        • But my jQ script or plugin needs to have specific elements!
    • WordPress tips and tricks for optimal jQuery enhancements
      • Always use wp_enqueue_script to load up jQuery and wp_register_script for plugins for custom scripts.
      • Always start with a basic, working, "plain HTML" WordPress site
      • Validate, validate, validate!
      • Check your PHP syntax
        • PHP shorthand
        • Check for proper semicolons
        • Concatenations
    • Summary
  • Appendix: jQuery and WordPress Reference Guide
    • jQuery reference for WordPress
      • noConflict mode syntax
      • Useful selector filters for working within WordPress
        • Selection filter syntax
        • Selector filters
        • Content filter syntax
        • Content filters
        • Child filter syntax
        • Child filters
        • Form filter syntax
        • Form filters
      • jQuery: Useful functions for working within WordPress
        • Working with classes and attributes
      • Traversing the DOM
      • Important jQuery events
      • Animation at its finest
    • Getting the most out of WordPress
      • The WordPress template hierarchy
      • Top WordPress template tags
        • Conditional tags
      • Quick overview of loop functions
      • Setting up WordPress shortcodes
        • Creating a basic shortcode
    • Summary

Tessa Blakeley Silver

Tessa Blakeley Silver's background is in print design and traditional illustration. She evolved over the years into web and multi-media development, where she focuses on usability and interface design. Prior to starting her consulting and development company hyper3media (pronounced hyper-cube media) http://hyper3media.com, Tessa was the VP of Interactive Technologies at eHigherEducation, an online learning and technology company developing compelling multimedia simulations, interactions, and games that met online educational requirements like 508, AICC, and SCORM. She has also worked as a consultant and freelancer for J. Walter Thompson and The Diamond Trading Company (formerly known as DeBeers) and was a Design Specialist and Senior Associate for PricewaterhouseCoopers' East Region Marketing department. Tessa authors several design and web technology blogs. Joomla! Template Design is her first book.

Sorry, we don't have any reviews for this title yet.

Code Downloads

Download the code and support files for this book.

Submit Errata

Please let us know if you have found any errors not listed on this list by completing our errata submission form. Our editors will check them and add them to this list. Thank you.


- 6 submitted: last submission 02 Nov 2012

Errata type: Others | About the Author Page

The following line in the author's acknowledgements:

Special thanks to Chaitanya and Thorsten for their editing work.

The author actually meant to thank Chris Gossmann, the Technical Reviewer for this book.
It should be:

Special thanks to Chaitanya and Chris for their editing work.



Errata type: Code | Page number: 68

instertBefore() should be insertBefore()
instertAfter() should be insertAfter()


Errata type: Others | Page number: 75

In the table, the syntax for .unbind should be
jQuery(".post").unbind("mouseenter", function(){//code});
instead of the copy-pasted
jQuery(".post").bind("mouseenter", function(){//code});

Errata type: Others | Page number: 69

The syntax for wrap and unwrap says class=".fun", but this should be class="fun" without the dot.


Errata type: Others | Page number: 71

In the Table, second point reads:
This will return the array of native DOM elements. Comes in handy if you don't want to deal with DOM directly and not the jQuery wrapped elements.
It should read:
This will return the array of native DOM elements. Comes in handy if you want to deal with DOM directly and not the jQuery wrapped elements.


Errata type: Others | Page number: 81

the code at the bottom of the page is: jQuery(".openIt").click(function() { jQuery(this).prev(".post").find(".entry").slideToggle("slow"); }); the code on the last line - .find(".entry") should be .find(".entry-content") there is no class on the page that just has the name "entry". .


Sample chapters

You can view our sample chapters and prefaces of this title on PacktLib or download sample chapters in PDF format.

Frequently bought together

WordPress 3.0 jQuery +    Open Text Metastorm ProVision® 6.2 Strategy Implementation =
50% Off
the second eBook
Price for both: $64.50

Buy both these recommended eBooks together and get 50% off the cheapest eBook.

What you will learn from this book

  • Take maximum advantage of the flexibility and power offered by jQuery, within WordPress
  • Learn the best practices for getting the jQuery library into your WordPress blog/site and plugins using WordPress' Script API
  • Discover how to create rotating slide-shows of sticky posts
  • Enhance the site and still keep the site's editors chugging away happily in WYSIWYG-land.
  • Create sleek eye-catching animations and leverage the jQuery UI plugin within WordPress' “content constraints”
  • Find out how to use AJAX techniques specifically within WordPress
  • Learn how to keep the site's editors happy without having to dramatically change the theme or impose having to use the HTML View to add content on them.
  • Expert guidance with practical step-by-step instructions for adding interactivity to your content and forms
  • Includes tips, tricks, troubleshooting ideas, and a cheat-sheet reference for using jQuery with WordPress 2.8 to 3.0.


In Detail

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.

Expert help on getting started with and using jQuery, the most user friendly JavaScript library to enhance your WordPress site.


This book walks the reader from a basic overview and introduction to jQuery with illustrations of how it works with a WordPress site and then starts building enhancements that start off very simply and increase in dynamics as the book progresses. You'll start off with some simple CSS manipulation and move on to creating some sleek visual validation to your site's forms and by the end of the book use the UI plugin seamlessly within WordPress and create a custom rotating slide-show and incorporate AJAX techniques to your site. All the while showing you how to create these enhancements without “breaking up the work-flow” of the WordPress content editors.

Who this book is for

This book is for anyone who is interested in using jQuery with a WordPress site. It's assumed that most readers will be WordPress developers with a pretty good understanding of PHP or JavaScript programming and at the very least experienced with HTML/CSS development who want to learn how to quickly apply jQuery to their WordPress projects.

Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software