WordPress 3.0 jQuery: Enhance your WordPress website with the captivating effects of jQuery

316 Pages·2010·10.63 MB·English

by  Tessa Blakeley Silver

www.it-ebooks.info
Wordpress 3.0 jQuery
Enhance your WordPress website with the captivating
effects of jQuery
Tessa Blakeley Silver

BIRMINGHAM - MUMBAI
ww w. it-ebook s.in fo
Wordpress 3.0 jQuery
Copyright © 2010 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval
system, or transmitted in any form or by any means, without the prior written
permission of the publisher, except in the case of brief quotations embedded in
critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy
of the information presented. However, the information contained in this book is
sold without warranty, either express or implied. Neither the author, nor Packt
Publishing, and its dealers and distributors will be held liable for any damages
caused or alleged to be caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the
companies and products mentioned in this book by the appropriate use of capitals.
However, Packt Publishing cannot guarantee the accuracy of this information.
First published: September 2010
Production Reference: 1170910
Published by Packt Publishing Ltd.
32 Lincoln Road
Olton
Birmingham, B27 6PA, UK.
ISBN 978-1-849511-74-2
www.packtpub.com
Cover Image by Jose Argudo ([e-mail])
ww w. it-ebook s.in fo
Credits
Author Editorial Team Leader
Tessa Blakeley Silver Akshara Aware
Reviewer Project Team Leader
Chris Gossmann Priya Mukherji
Acquisition Editor Project Coordinator
Chaitanya Apte Vincila Colaco
Development Editor Proofreader
Ved Prakash Jha Aaron Nash
Technical Editors Graphics
Aaron Rosario Nilesh R. Mohite
Mohd. Sahil Geetanjali Sawant
Copy Editors Production Coordinator
Janki Mathuria Aparna Bhagat
Laxmi Subramanian
Cover Work
Aparna Bhagat
Indexer
Rekha Nair
ww w. it-ebook s.in fo
About the Author
Tessa Blakeley Silver has prior experience 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 which 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 has authored a few books for Packt Publishing, including WordPress 2.8
Theme Design and Joomla 1.5 Template Design.
I send a huge "thank you" to the Packt team who have made this title
possible and whose help in getting it out into the world has been
invaluable. Special thanks to Chaitanya and Thorsten for their editing
work. Additional big-time "thank you" goes out to Vincila for the
backbreaking work and diligence it takes to keep to a schedule.

I'd also like to thank the exemplary WordPress and jQuery
community (Matt and John, you guys Rock) and all who participate
and power the Open Source world and strive to improve the
accessibility of the Web for all.

Additional thanks goes out to my very patient partner and our little
daughter (who's not so patient) who per usual, spent quite a few
evenings without me while I worked on this title. I love you both
and appreciate your flexibility with me while I work on interesting
books and projects (yes, I'm working on getting better at estimating
how much time it really, really takes to write a chapter).
ww w. it-ebook s.in fo
About the Reviewer
Chris Gossmann is Lead Developer and co-owner of the well-known Thematic,
an open-source WordPress Theme Framework. Chris has over four years experience
with WordPress. Today he is constantly enhancing Thematic. As the co-worker of
Milo, one of the best web designers, Chris Gossmann creates highly customized
WordPress and BuddyPress solutions for international customers.
ww w. it-ebook s.in fo
ww w. it-ebook s.in fo
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
ww w. it-ebook s.in fo
Table of Contents
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
[ ii ]
ww w. it-ebook s.in fo
Table of Contents
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
[ iii ]
ww w. it-ebook s.in fo