Table of Contents
Preface_1
Chapter 1: Getting Started: WordPress and jQuery_7
This book's approach 8
Core fundamentals you need to know 8
WordPress 9
Basic programming 10
JavaScript and AJAX techniques 10
PHP 11
Essential tools 13
Code/HTML editor 14
Firefox 16
Web Developer toolbar 16
Firebug 17
Not essential, but helpful: Image editor 18
jQuery background and essentials 19
What jQuery does (really well) 19
How we got here: From JavaScript to jQuery 20
Once upon a time, there was JavaScript 21
Why jQuery is simpler than JavaScript 22
Understanding the jQuery wrapper 23
Getting started with jQuery 25
Downloading from the jQuery site 26
Including the jQuery library 29
WordPress background and essentials 31
Overview of WordPress 31
Essentials for getting WordPress running 32
Using WAMP 33
Using MAMP 33
Choosing a hosting provider 34
Rolling out WordPress 35
jQuery and WordPress: Putting it all together 35
Summary 37
Chapter 2: Working with jQuery in WordPress_39
Getting jQuery into WordPress 39
jQuery now comes bundled with WordPress 40
Registering jQuery in a WP theme 40
Avoiding problems registering jQuery 41
Using Google's CDN 42
Registering and including jQuery through Google's CDN into a theme 42 Using WordPress' bundled jQuery versus including your own jQuery download or using Google's CDN 43
Keeping conflicts out! 43
Setting your own jQuery variable 44
But I really want to use the $ variable! 44
Launching a jQuery script 45
Our first WordPress and jQuery setup 45
Registering jQuery in our setup 46
Registering your own custom script file 46
Setting up the custom-jquery file 47
jQuery secret weapon #1: Using selectors and filters 47
Selecting anything you want from the document 48
Filtering those selections 53
Basic filters 54
Child filters 57
Content filters 58
Form filters 60
Attribute filters 62
Visibility 64
jQuery secret weapon #2: Manipulating CSS and elements in the DOM 65
Manipulating CSS 65
Manipulating attributes 67
Manipulating elements and content 68
Working with the DOM 71 jQuery secret weapon #3: Events and effects
(aka: the icing on the cake) 72
Working with events 72
Helpers are so helpful! 73
Working with bind, unbind, and the event object 75
Adding effects 77
Showing and hiding 77
Sliding in and out 78
Fading in and out 78
Working with the animate function 79
Making it all easy with statement chaining 80
Our First Project: Expanding/collapsing WordPress posts 81
Keeping jQuery readable 83
Summary 83 Chapter 3: Digging Deeper: Understanding jQuery and
WordPress Together_85
Two ways to "plugin" jQuery into a WordPress site 85
WordPress themes overview 86
WordPress plugins overview 88
jQuery plugins overview 89
The basics of a WordPress theme 91
Understanding the template's hierarchy 91
A whole new theme 94
The Loop 96
Tags and hooks 97
Conditional tags 99
Template include tags 100
Plugin hooks 100
Project: Editing the main loop and sidebar in the default theme 101
Changing the loop 102
Changing the sidebar 105
The basics of a WordPress plugin 107
Project: Writing a WordPress plugin to display author bios 109
Coding the plugin 110
Activating our plugin in WordPress 114
The basics of a jQuery plugin 115
Project: jQuery fade in a child div plugin 116
Extra credit: Adding your new jQuery plugin to your WordPress plugin 118
Putting it all together: Edit the theme or create a custom plugin? 120
Summary 121 Chapter 4: Doing a Lot More with Less:
Making Use of Plugins for Both jQuery and WordPress_123
The project overview: Seamless event registration 124
What the "client" wants 124
Part 1: Getting everything set up 125
What we'll need 125
ColorBox 125
Cforms II 126
Installing the WordPress plugin 127
Setting up the registration form with cforms II 127
Creating the register page using WordPress 3.0's custom menu option 130
Working with WordPress 3.0's custom menu option 132
Customizing the theme 134
Creating the custom page template 134
Creating the custom category template 137
Getting jQuery in on the game plan 141
Including the ColorBox plugin 142
Writing a custom jQuery script 143
Pulling it all together: One tiny cforms II hack required 145
Part 2: Form validation—make sure that what's submitted is right 147
The trick to client-side validation: Don't just tell them when it's wrong! 148
Blank input validation 149
Properly formatted e-mail validation 151 Final thoughts and project wrap up: It's all about graceful degrading 154
Summary 156
Chapter 5: jQuery Animation within WordPress_157
jQuery animation basics 157
CSS properties made magical 158
Making it colorful 159
Taking it easy, with easing control 160 Timing is everything: Ordering, delaying, and controlling the animation que 162
Getting your ducks in row: Chain 'em up 162
Delay that order! 163
Jumping the queue 164
Stepping to completion 165
Grabbing the user's attention 167
Project: Animating an alert sticky post 167
Creating easy, animated graphs 170
Delving deeper into animation 177
Project: Creating snazzy navigation 177
Project: Creating rotating sticky posts 182
Putting in a little extra effort: Adding a loop indicator 190
Summary 192
Chapter 6: WordPress and jQuery's UI_193
Getting to know jQuery's UI plugin 194
Widgets 194
Interactions 195
Effects 196
jQuery UI plugin versions bundled in WordPress 196
Picking and choosing from the jQuery's UI site 197
Making it look right: Easy UI theming 199
Including the jQuery UI plugin features into your WordPress site 200
Including jQuery's UI from WordPress' bundle 200
Including from the Google CDN 201
Loading up your own custom download from your theme or plugin directory 202
Don't forget your styles! 202
Enhancing effects with jQuery UI 203
Effects made easy 204
Easing is just as easy 204
Color animation with jQuery UI 205
Enhancing the user interface of your WordPress site 206
Project: Turning posts into tabs 206
Setting up custom loops in the WordPress theme 207
Implementing tabs entirely with jQuery 210
Project: Accordion-izing the sidebar 213
Project: Adding a dialog box to a download button with icons 216
Summary 222
Chapter 7: AJAX with jQuery and WordPress_225
What AJAX is and isn't: A quick primer 225
AJAX: It's better with jQuery 226
Assessing if AJAX is right for your site—a shorter disclaimer 227
Getting started with jQuery's AJAX functionality 227
Using the .ajax() function 227
Taking shortcuts 230
Specifying where to .load() it 230
Transforming loaded content 232
Project: Ajaxifying posts 233
.getJSON: The littlest birds get the most re-tweets 237
JSON and jQuery basics 237
What JSON looks like 237
Using JSON in jQuery 238
Using .getJSON with Twitter 238
Using Twitter's user timeline method 239
Using getJSON with Flickr 242
Other popular services that offer APIs with JSON format 243
Project: Ajax-izing the built-in comment form 244
Summary 249 Chapter 8: Tips and Tricks for Working with jQuery and
WordPress_251
Keep a code arsenal 251
Free your arsenal 252
Your arsenal on-the-go 252
jQuery tips and tricks for working in WordPress 253
Try to use the latest version of jQuery 253
Stay current with the Google CDN 254
Stay in No Conflict mode 254
Make sure other scripts in the theme or plugin use the Script API 254
Check your jQuery syntax 255
Colons and semicolons 255
Closing parenthesis 255
Mismatched double and single quotes 255
Use Firefox and Firebug to help with debugging 255
Know what jQuery is doing to the DOM 256
Tips for writing great selectors 258
Don't forget about your selection filters! 259
Keep the WordPress editor's workflow "flowing" 259
But my jQ script or plugin needs to have specific elements! 260
WordPress tips and tricks for optimal jQuery enhancements 261 Always use wp_enqueue_script to load up jQuery and wp_register_script for plugins for custom scripts. 261
Always start with a basic, working, "plain HTML" WordPress site 262
Validate, validate, validate! 262
Check your PHP syntax 263
PHP shorthand 263
Check for proper semicolons 263
Concatenations 263
Summary 264
Appendix: jQuery and WordPress Reference Guide_265
jQuery reference for WordPress 265
noConflict mode syntax 266
Useful selector filters for working within WordPress 266
Selection filter syntax 266
Selector filters 267
Content filter syntax 268
Content filters 268
Child filter syntax 268
Child filters 268
Form filter syntax 269
Form filters 269
jQuery: Useful functions for working within WordPress 270
Working with classes and attributes 270
Traversing the DOM 271
Important jQuery events 272
Animation at its finest 273
|
Getting the most out of WordPress |
274 |
|
The WordPress template hierarchy |
274 |
|
Top WordPress template tags |
276 |
|
Conditional tags |
282 |
|
Quick overview of loop functions |
284 |
|
Setting up WordPress shortcodes |
284 |
|
Creating a basic shortcode |
285 |
|
Summary |
287 |
|
Index |
289 |
Post a comment