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

Core fundamentals you need to know

As I mentioned, this book is geared toward WordPress users, visual theme designers, and developers who are looking to learn to do more with WordPress by using jQuery. I've tried to write this title so that client-side and server-side scripting or programming experience isn't explicitly required. However, you'll see at the very least that a general familiarity with the given subjects will help.

Regardless of your web development skill-set or level, you'll be walked through with clear, step-by-step instructions. Let's go over the web development skills and WordPress know-how that you'll need to be familiar with to gain the maximum benefit from this book. Again, I'll also point you to good resources if you feel you need a little more background.


To start with, you should already be familiar with the most current, stable version of WordPress. You should understand the basics of getting WordPress installed and running on a web server or locally on your machine (especially as you'll need an installation to tinker with the examples in this book). Not to worry, I'll point you in the right direction for getting a basic local installation of WordPress on your Mac or PC. Plus, many hosting providers offer easy one-click installs. You'll have to check with your hosting provider to see if they offer WordPress. I'll also point you toward a few other good resources for WordPress installations. Getting WordPress up and running is often the easiest part of using WordPress.

Going a tad more in-depth, you'll do well to know your way around the WordPress administration panel. You'll need to be familiar with adding content to the WordPress publishing system and how posts, categories, static pages, and sub-pages work. You'll also want to understand using the Media upload tools to add images to posts and pages, as well as creating galleries. Lastly, understanding the basics of installing and using different themes and plugins will also be helpful, though we will cover this to some extent in this title.

Even if you'll be working with a more technical WordPress administrator, you should have an overview of what the WordPress site that you're developing for entails, and what (if any) themes or additional plugins or widgets will be needed for the project. If your site does require a specific theme or additional plugins and widgets, you'll want to have those installs handy and/or already installed in your WordPress development installation (or sandbox—a place to test and play without messing up a live site).


What version of WordPress does this book use?

This book focuses on the new features introduced in versions 2.8, 2.9, and 3.0 RC (Release Candidate—as of the writing of this book). Everything covered in this book has been tested and checked in WordPress 2.9.2 and 3.0 RC. While this title's case studies are developed using version 2.9.2 and 3.0 RC, any newer version of WordPress should have the same core capabilities, enabling you to enhance themes and plugins with jQuery for it using these techniques. Bug fixes and new features for each new version of WordPress are documented at

If you are completely new to WordPress, then I recommend you read WordPress 2.7 Complete by April Hodge Silver and Hasin Hayder.

Basic programming

Having an understanding of programming in any client-side or server-side language will help you out here, no matter what language—JavaScript, VBScript, .NET, ASP, PHP, Python, Java, Ruby, you name it. If you're familiar working with, or at the very least looking at, any of those languages, you'll do fine. Of course, the following specific languages will really help.

JavaScript and AJAX techniques

OK, you definitely don't need to have any experience with AJAX whatsoever. But if you know a bit about JavaScript (that's the "J" in "AJAX") you're off to a great start. In particular, you should be able to understand how to recognize the overall syntax and structure of JavaScript statements. For example: what variables look like in JavaScript and how blocks for functions or conditions are set up using "{ }" (curly brackets). You'll also want to know how to properly end a line of JavaScript code with a ";" (semicolon). Again, you don't need direct experience, but you should be comfortable looking at a block of JavaScript code and understanding how it's set up.

For example, let's take a quick look at the following code example, which includes explanatory comments:

<script type="text/javascript"> /*this is an XHTML script tag with the type attribute set to define javascript*/
This is a multi-line Comment.
You can use multi-line comments like this to add instructions or notes about your code.
//This is a single line comment for quick notes
function writeHelloWorld(){ /*this line sets up a function and starts block of code*/
var text1 = "Hello"; //this is a variable called text1
document.write(text1); /*This writes "Hello" to the HTML body via the variable "text1"*/
document.write(" World!"); /*Writes the string " World!" to the HTML body. Note the ";" semi-colons ending each statement above, very important!*/
}// this bracket ends the function block
writeHelloWorld(); /*evokes the function as a statement again, ending with a ";" semi-colon.*/
//this closes the HTML script tag

If you can follow what's happening in the given code snippet, and you're confident that you could alter, say, the variable without breaking the script, or change the name of the function and where it's evoked, you're doing well enough for this title.

Of course, the more you know about working with different types of information such as strings, integers, and arrays as well as loops and if/else statements, the better. But again, just understanding the general syntax for now, will certainly get you started with jQuery and this title.

AJAX is not really a language. As we'll learn in Chapter 7, AJAX with jQuery and WordPress, it's simply a set of techniques for working with Asynchronous JavaScript and XML, using JavaScript and HTTP requests together to develop highly dynamic pages. Developers like this approach as it allows them to create pages that respond more like desktop programs, than standard web pages. If you're interested in using AJAX with WordPress, in Chapter 7, AJAX with jQuery and WordPress, we'll get into how jQuery can help you with various AJAX techniques. But it's by no means essential for taking advantage of jQuery with WordPress.


If you're new to JavaScript and want a quick, fun primer, I highly recommend the W3Schools' site. This site is a great resource for priming yourself with all W3C compliant web technology. You can find out about AJAX too:


You definitely don't have to be a PHP programmer to get through this book, but PHP is what WordPress is built with and its themes use liberal doses of PHP to work their magic! WordPress plugins are almost pure PHP. Any hope of adding jQuery functionality to a WordPress theme or plugin will require braving a little PHP syntax.

As with JavaScript, if you at least understand how basic PHP syntax is structured, you'll be much less likely to make mistakes while retyping or copying and pasting code snippets of PHP and WordPress template tags, in your theme's template files.

The good news is PHP syntax is structured similarly to JavaScript syntax. PHP also uses curly brackets in the same way to denote blocks of code for functions, loops, and other conditions. You also end every statement in PHP with a semicolon just as you would in JavaScript. The main difference is that PHP is evoked by wrapping code snippets inside <?php ?> tags, which are not part of the XHTML tag set and JavaScript is evoked by placing code snippets inside the XHTML <script> tags. Also, variables in PHP are denoted with a "$" (dollar) sign, permanently prepended to the variable name you create, rather than established once with the var statement.

The biggest difference is that PHP is a server-side scripting language and JavaScript is client-side. That means that JavaScript downloads and runs inside the user's browser on their machine, while PHP code is pre-interpreted on the web server and only the final, resulting XHTML (and sometimes CSS and JavaScript—you can do a lot with PHP!) is served up into the user's web browser.

Let's take a quick look at some basic PHP syntax:

<?php /*All PHP is evoked using greater-than brackets and a "?" question mark, followed by the letters "php"*/
//This is a single-line comment
This is multi-line
comment block
function newHelloWorld(){/*this sets up a function and code block*/
$text1 = "Hello"; //creates a variable called: $text1
echo $text1." World!"; /*tells the HTML page to print , aka: "echo" the variable $text1 with the string " World!" concatenated onto it.*/
}//this ends the code block
newHelloWorld(); //calls the function as a statement ending with a semi-colon.
//the question mark and closing less-than tag end the PHP code.

I'm sure you recognize some differences between PHP and JavaScript right away, but there are also quite a few similarities. Again, if you're confident that you could swap out a variable value without breaking the function, you'll do fine with WordPress and this title. As always, the more you know about PHP the better.


Do I have to add "php" to my<? starter block?

You'll notice I've set up my PHP starter block as: "<?php". Those of you with some PHP knowledge or having some WordPress experience, may be familiar with PHP blocks that just start with <? and end with ?>. On servers with shorthand support enabled, you can start a scripting block with just "<?" (as well as use a few other cool PHP shorthand tricks).

However, while shorthand support is usually enabled, not everyone's PHP installation will have it enabled. When I have clients or friends who can't seem to get a new plugin or theme to work with their WordPress installation, this often comes up as the culprit. The theme or plugin was written using shorthand and the client's PHP installation doesn't have it enabled and for some reason, their IT guy or hosting provider doesn't want to enable it. To stay as compatible as possible, we'll be using the standard form in this book (<?php) rather than the shorthand form.


If you'd like to understand WordPress a little better by knowing more about PHP, again, that W3School site is a great place to start! (

After reading this book, if you find PHP really interests you as well as JavaScript, AJAX, and jQuery, you might want to move onto reading AJAX and PHP: Building Modern Web Applications 2nd Edition by Audra Hendrix, Bogdan Brinzarea, and Cristian Darie.

More of a visual "see it to do it" learner? has a remarkable course selection from the top CSS, XHTML/XML, PHP, JavaScript (and yes, even jQuery) people in the world. You can subscribe and take the courses online or purchase DVD-ROMs for offline viewing.

The courses or the monthly subscription might seem pricey at first, but if you're a visual learner, it's worth spending money and time on them. You can refer to the official site at