Table of Contents


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


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


The WordPress template hierarchy


Top WordPress template tags


Conditional tags


Quick overview of loop functions


Setting up WordPress shortcodes


Creating a basic shortcode






The Twitter Blueprint

The Twitter Blueprint

Shortcut Straight To The Twitter Techniques That Are ESSENTIAL To You As An Internet Marketer, And Leave Out All The Padding And Fluff! What do you think limits your online profit more than anything? Sure there could be a dozen reasons but as a professional internet marketer I can tell you what one of the main leeches on my time is. Actually it's two things, LACK OF KNOWLEDGE and LEARNING CURVE.

Get My Free Ebook

Post a comment