WordPress 3.0 jQuery Table of Contents

WordPress 3.0 jQuery

Preface
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
Index

Preface

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