Book Image

WordPress 3.0 jQuery

By : Tessa B. Silver, Matt Mullenweg
Book Image

WordPress 3.0 jQuery

By: Tessa B. Silver, Matt Mullenweg

Overview of this book

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.
Table of Contents (14 chapters)
Wordpress 3.0 jQuery
About the Author
About the Reviewer


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.

What this book covers

Chapter 1, Getting Started: WordPress and jQuery...This chapter introduces the reader to the core fundamentals that they need to be familiar with in order to get the most out of the book. HTML, CSS, PHP, and JavaScript syntax, and how to recognize the various parts of those syntaxes are covered, as well as a list of "tools of the trade" which covers what features their code editor, browser, and even image editor should have. The chapter also illustrates exactly how CSS, JavaScript, and jQuery work in the browser with the HTML served up from the WordPress site.

Chapter 2, Working with jQuery in WordPress...This chapter goes into the details of how to start working with jQuery specifically within WordPress. It covers how to properly include jQuery using the Script API and focuses on jQuery's selectors (very important for working in WordPress) as well as jQuery's top functions.

Chapter 3, Digging Deeper: Understanding jQuery and WordPress Together...This chapter takes the reader to a deeper level and introduces them to all the ways that jQuery can be applied to a WordPress site: Through a custom script in the WordPress theme, as a jQuery plugin called in through the theme, and lastly, as a custom jQuery script or plugin applied to a WordPress plugin! The ways to affect a WordPress site with jQuery are numerous, and the pros and cons of each method is considered so that the reader can assess their own projects accurately. The chapter also introduces the reader to their first "hypothetical client" and covers how to create their own jQuery plugin and then wrap that jQuery plugin into a WordPress plugin so that a site administrator could easily implement the enhancement without having to know how to edit the theme.

Chapter 4, Doing a Lot More with Less: Making Use of Plugins for Both jQuery and WordPress...You thought you learned quite a bit in Chapter 3? Hang on to your mouse. You're about to embark on a nice little project that requires you getting familiar with the popular jQuery plugin Colorbox, as well as the popular WordPress plugin Cforms II and mashing the two with your own custom jQuery magic to whip up some slick event registration that will knock a client's socks off.

Chapter 5, jQuery Animation within WordPress...If you're going to use jQuery, you might as well really use it to its fullest, which means animation. This chapter covers using jQuery's animation functions and shortcuts to create some sharp, well timed visual enhancements that grab the site user's attention as well as create a super slick navigation enhancement and an awesome rotating slideshow of sticky posts.

Chapter 6, WordPress and jQuery's UI...Now that we have some animation chops under our belt, we can make that work even easier by using jQuery's UI plugin which includes the Easing and Color plugins we learned about in Chapter 5. In this chapter, we're going to also take advantage of the UI plugin's widgets and events features to create some super useful interfaces in our WordPress site.

Chapter 7, AJAX with jQuery and WordPress...This chapter introduces you to what AJAX is and isn't along with the top ways to get started using AJAX techniques in your WordPress site; you'll load in HTML from other pages on your site, get your tweets and favorite flickr pictures pulled in through JSON, and last but not least, custom AJAXing the built in WordPress comment form.

Chapter 8, Tips and Tricks for Working with jQuery and WordPress...This chapter covers the top tips and tricks for getting the most out of jQuery specifically within WordPress. Most of these best practices are covered throughout the title but in this chapter we take a look at exactly why they're so important, espeically within the context of WordPress and how to implement them.

Appendix A, jQuery and WordPress Reference Guide...Dog-ear this appendix and consider it your "cheat sheet". Once you work your way through the book, why waste time hunting and pecking your way back through it to recall some function's bit of syntax and what its parameters are? This book extracts the most important information about jQuery and WordPress and breaks it down into an easy-to-skim reference guide so that you can easily find the syntax for most jQuery selectors, remind yourself of the top jQuery functions that you'll need for most WordPress development and their parameters, as well as helpful WordPress template tags and API functions and other useful WordPress know-how such as structuring the Loop and the Theme Template Hierarchy.

What you need for this book

  • WordPress (2.9.2 or 3.0)

  • The jQuery library (1.4.2)

  • A web server (local WAMP or MAMP installation or hosted by a provider)

  • A web browser (Firefox or better)

  • A good code or HTML editor

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, experience with HTML/CSS development who want to learn how to quickly apply jQuery to their WordPress projects.


In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.

Code words in text are shown as follows: "We can include other contexts through the use of the include directive."

A block of code is set as follows:

<script type="text/javascript">
jQuery("p").css("background-color", "#ff6600");

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

<script type="text/javascript">
jQuery("p").css("background-color", "#ff6600");

For for clarity and conciseness, many code examples in this title are extracted. An extracted block of code is set as follows:

jQuery("p").css("background-color", "#ff6600");

Code and markup preceded and ended with ellipses "..." are extracted from the full context of code and/or a larger body of code and markup. Please refer to the downloadable code bundle to see the entire work.

New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "clicking the Next button moves you to the next screen".


Warnings or important notes appear in a box like this.


Tips and tricks appear like this.

Reader feedback

Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.

To send us general feedback, simply send an e-mail to , and mention the book title via the subject of your message.

If there is a book that you need and would like to see us publish, please send us a note in the SUGGEST A TITLE form on or e-mail .

If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on

Customer support

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.


Downloading the example code for this book

You can download the example code files for all Packt books you have purchased from your account at If you purchased this book elsewhere, you can visit and register to have the files e-mailed directly to you.


Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you would report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting, selecting your book, clicking on the errata submission form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded on our website, or added to any list of existing errata, under the Errata section of that title. Any existing errata can be viewed by selecting your title from


Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works, in any form, on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.

Please contact us at with a link to the suspected pirated material.

We appreciate your help in protecting our authors, and our ability to bring you valuable content.


You can contact us at if you are having a problem with any aspect of the book, and we will do our best to address it.