WordPress 3.0 jQuery

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).

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.

<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
</script>

<?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.
?>

First up, we'll need to meddle with markup and code—lots of markup, CSS, PHP, and jQuery. So, you'll need a good code or HTML editor. Dreamweaver is a great option (http://www.adobe.com/products/dreamweaver/), although I prefer to use Coda for Mac (http://www.panic.com/coda/). Before I discovered working with Coda, I was very happy with the free editor TextWrangler (http://www.barebones.com/products/textwrangler/). When I was working on a PC, I loved the free text/code editor HTML-kit (http://www.htmlkit.com/).

There are thousands of editors out there, some free, some expensive, and with varying degrees of features. Just about every developer and designer I've talked to, uses something different and has a ten-minute "schpiel" about why their editor is the best. Ultimately, any HTML or text editor that lets you enable the following features will work just great. I recommend you enable/use all of the following:

Finally, you'll need a web browser. I strongly suggest that you use the latest stable version of the Firefox browser, available at http://mozilla.com/firefox/.

Now one may ask, why use Firefox? While this browser has its setbacks (like any other), on the whole, I view it as an excellent web development tool. For me, it's as essential as my HTML editor, FTP programs, and graphics tools. Firefox has great features that we'll be taking advantage of to help us streamline our WordPress and jQuery enhancements and site production. In addition to built-in features such as the DOM Source Selection Viewer and adhering to CSS2 and some CSS3 standards as specified by the W3C, Firefox also has a host of extremely useful extensions such as the Web Developer Toolbar and Firebug, which I recommend to further enhance your workflow.

If you have some experience with jQuery, you've probably noticed that the great documentation on jQuery's site as well as most jQuery books, tend to focus on the intricacies of jQuery, using very simple and basic HTML markup examples with minimal CSS attributes added. Within WordPress, you'll find yourself working with a theme or plugins that were most likely created by someone else. You'll need an easy way to explore the Document Object Model (DOM) and CSS that the theme, plugins, and WordPress are generating in order to get jQuery to do what you want with the resulting markup that is generated. The Firefox browser and its extensions allow you to do this more easily than any other browser.

Web Developer toolbar

This is a great extension that adds a toolbar to your Firefox browser. The extension is also available for the Seamonkey suite and the new Flock browser, both of which, are powered by the open source code of Mozilla, just like Firefox. Get it from http://chrispederick.com/work/web-developer/.

The toolbar lets you link directly to the browser's DOM and Error Consoles, as well as W3C's XHTML, and CSS validation tools. It also lets you toggle and view your CSS output in various ways, and lets you view and manipulate a myriad of information your site outputs on-the-fly. The uses of this toolbar are endless. Every time I develop a design or create jQuery enhancements, it seems I discover some feature that I have never previously used and yet find quite useful.

Firebug

A more robust tool is Joe Hewitt's Firebug extension for Firefox found at http://www.getfirebug.com/. You'll note, there's also a "Firebug Lite" version available for Internet Explorer, Safari, and Opera. But the full Firebug for Firefox is your best bet.

This extension is a powerhouse when combined with the features of the Web Developer toolbar. On its own, Firebug will find anything you need to manipulate or debug: HTML, CSS, JavaScript, you name it. It can even help you find little "weirdo" tidbit things happening to your DOM on-the-fly. There's a variety of fun inspectors and just about all of them are invaluable.

My favorite Firebug features are the options for reviewing HTML, CSS, and the DOM. Firebug will show you your box models and let you see the measurements of each ledge. Plus, the latest version of Firebug lets you make edits on-the-fly to easily experiment with different fixes before committing them to your actual source files. (There are features that let you edit on-the-fly in the Web Developer Toolbar as well, but I find the Firebug interface more in-depth and easier to use.)

The last tool that I'd like to mention is an image editor. While you can certainly do plenty of cool enhancements with pure CSS, chances are you'll want to expand on your WordPress design and jQuery enhancements a little more by being able to add some slick visual elements such as cool icons or custom backgrounds. These are best achieved by using a graphic editor such as GIMP, Photoshop, or Fireworks.

Adobe owns both Photoshop and Fireworks. It also offers a light and less-expensive version of Photoshop, called Photoshop Elements that will allow you to do basic image edits (http://www.adobe.com/products/).

Any graphic editor you prefer is fine. One that allows you to work with layers is best.

jQuery at its core, excels at manipulating the DOM by finding and selecting (hence the word "query" in the name) DOM elements into a jQuery object, often called a wrapper. This allows you to easily get and set page elements and content, and work with all the modern browser event models allowing you to add sophisticated features to your site. Last but not least, jQuery has a really cool set of effects and a UI library. Animation and interface widgets are now at your complete command.

Beyond all that cool DOM manipulation stuff, jQuery has a nice easy learning curve. You CSS gurus will especially enjoy picking up jQuery. Again, in finding the best way to select elements easily, John developed jQuery so that it leveraged web developers' existing knowledge of CSS. You'll find jQuery selectors a snap, especially as you can grab and select sets of elements almost as easily as you can style them with CSS!

JavaScript, originally named LiveScript, was invented by Netscape's developers in the early 90s. By 1996, Netscape had renamed LiveScript to JavaScript in order to boost its popularity by linking it to Java (developed separately by Sun Microsystems). Java, which had been around a few years itself already, was becoming even more popular because people were starting to run it in websites by using a separate plugin called an "applet". There are some ways in which Netscape's developers took care to make JavaScript syntax and functions very similar to Java, but there are differences of course. The biggest difference is that JavaScript is a client-side scripting language that is interpreted, which means it runs live in the browser and is not pre-compiled the way Java is in order to execute and run.

It's a bit complicated and beyond the scope of this book to explain it all, but of course, Microsoft's browser, Internet Explorer, in competition with Netscape, took a completely different route and released IE with the ability to run Microsoft's own VBScript. VBScript was made to look and work similar to VisualBasic, but again as an interpreted language, instead of a compiled one like VB. When JavaScript seemed to be gaining more popularity with budding web developers than VBScript, Microsoft introduced JScript. JScript was crafted to be very similar to JavaScript, in order to appeal to JavaScript developers without any licensing hassles for Microsoft, but there were still quite a few differences. You could however, if you were very careful and didn't have high expectations, write a script that executed as JavaScript in Netscape and JScript in IE 3.0.

Yes. What a pain! To this day, IE still only executes VBScript and JScript! The difference is, both Microsoft and Mozilla (Netscape's creation foundation) submitted JavaScript and JScript to ECMA International, an organization which focuses on creating and maintaining standards for information communication systems. In addition to JavaScript, you can thank ECMA Int. for standards running the gamut from CD-ROM and DVD formatting specs to the newer Open XML standards used in Office suites like MSOffice and OpenOffice.

It has taken well over ten years from JavaScript's initial submission in 1997. But as of 2010, both JavaScript and JScript standards are very similar, and both are now technically named ECMAScript (but who wants to try and say that all the time?).

Many developers who came of age in the later 90s and early 2000 use the terms JScript and JavaScript interchangeably without realizing there's a difference! And yet, there are still differences. IE handles ECMAScript in some ways differently compared to Firefox and other browsers. For clarity and sanity, this title will continue to call ECMAScript JavaScript.

As we move through this title, you'll hear and learn a lot more about the jQuery object, also called the "wrapper" or "wrapper set", which probably makes the most sense, as it's a "set" of elements you've selected to work with. But as it's essential to how jQuery works, we'll do a quick introduction now.

To fully understand the wrapper, let's back up a bit outside of jQuery. Ultimately, it all starts with your browser. Your browser has a JavaScript engine and a CSS engine. The browser can load, read, and interpret properly formatted HTML, CSS, and JavaScript (and yes, a host of plugins for Java, Flash, and many different media players that we won't worry about for the purposes of this explanation).

Now this is a very crude, high-level overview. But I think it will help you understand how jQuery works. The browser takes the HTML document that loads into it and creates a map of the document called the DOM (Document Object Model). The DOM is essentially a tree of the HTML document's objects.

You'll recognize most objects as the the markup tags in an HTML document, like <body>, <h1>, <div>, <p>, <a>, and so on. The DOM tree is laid out, displaying the parent-child relationships of those objects to each other as well as mapping relationships to each object's attributes and content. For example, take a look at the following sample DOM tree illustration:

Now for the fun stuff. If a CSS stylesheet is attached or embedded into the document, the browser's CSS engine traverses the DOM tree and styles each of the elements as specified by the style rules. And of course, if there is any JavaScript attached or embedded into the document, the browser's JavaScript engine is also able to traverse the DOM tree and perform the instructions the script contains.

The jQuery library is attached to your XHTML document as a JavaScript file. The library is then able to prepare the JavaScript engine to create an object that will have all of jQuery's functionality inside it, ready to be used upon being evoked (also known as the jQuery object). When you create jQuery code, you automatically evoke that jQuery object and you're ready to start working with it.

Most commonly, you will instruct the jQuery object to traverse the DOM through CSS selectors and place specific elements inside of it. The selected elements are now "wrapped" in the jQuery object and you can now start performing additional jQuery functionality on the selected set of elements. jQuery can then loop through each element that it is wrapped around, performing additional functions. The jQuery object stops looping when it comes to the last object in the set and has performed all the instructions passed to it through statement chaining.

The following illustration shows some of the DOM's objects passed to the jQuery object.

It's very easy to get started with jQuery. We'll cover the most direct basic method here and in the next chapter, we'll explore a few other ways to work with jQuery in WordPress.

Downloading from the jQuery site

If you head over to the jQuery site at http://jquery.com, you'll find that the home page offers you two download options: production and development libraries of version 1.4.2, the most current stable version available at the time of this writing.

The production version has been compressed and "minified" into a smaller file size that will load much more quickly. It weighs in at 24KB. The development version, which hasn't been compressed, comes in at 155KB. That's quite a bit larger, but it's much easier to open up and read if you ever run into a debugging problem and should need to.

The ideal scenario is, that you're supposed to use the development version of jQuery while creating your site, and when you release it live, switch over to the production version, which will load much more quickly. Many of you will probably never want to look inside the jQuery library, but it's a good idea to download both anyway. In the event your debugging process keeps showing you a line of code in the jQuery library that is giving you problems, you can switch over to the development version to see more clearly what the line of code is trying to do. I can tell you, the odds that something in the jQuery library has a bug in it is slim! It will almost always be your jQuery script or plugin that has the problem, but being able to look at the full jQuery library may give you an insight as to what's wrong with your script's code and why the library can't work with it. There's no difference between the production and development libraries, just file size and human readability.

On jQuery's home page, when you click on Download, you'll be taken over to the Google code site. You can then go back and select the other version for download. Note that the library is not zipped or packaged in any way. It downloads the actual .js JavaScript file ready to be placed into your development environment and used. If you click on the Download button and see the jQuery code appear in your browser, just hit the back button and right-click or control-click, and then click on Save Target As to download it.

Note

Using Visual Studio?

If your code/HTML editor happens to be Visual Studio, you can download an additional documentation file that will work in Visual Studio and give you access to comments embedded into the library. This allows the Visual Studio editor to have statement completion, sometimes called IntelliSense, when writing your jQuery scripts.

To download the definitions file, click on the blue Download tab at the top of the home page. On the Download jQuery page, you'll find the link to the Visual Studio documentation file in the most current release.

You'll place this file in the same location as the jQuery library you downloaded (production or development) and it should now work with your Visual Studio editor.

Let's get right down to it and set up a basic HTML document that includes the jQuery library file we just downloaded. I went ahead and downloaded the smaller production version.

In the following markup, we'll attach the library and write our first jQuery script. Don't worry so much about the jQuery code itself at this point. It's just there so you can see it working. We'll go over really understanding jQuery functionality in the next chapter.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>First jQuery Test</title>
<script type="text/javascript"
src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
jQuery("document").ready(function(){
jQuery("p").css("background-color", "#ff6600");
});
</script>
</head>
<body>
<h1>Sample Page</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>

That's it! Without any CSS included or embedded into the page or the markup, we've used jQuery to change the CSS background property of the paragraph tags. Now, ultimately we wouldn't want jQuery to replace our regular use of CSS by any means! But from this quick example, you can see how jQuery can be used to alter the look and layout of your site's pages on-the-fly, and in response to events, making your site's pages very responsive to users; it is a powerful feature. You should now be able to load up this file into Firefox to see your first jQuery script in action.

If you've worked at all with WordPress, based on the previous sample, you can probably easily see how to include the jQuery library in your WordPress theme and start working with it. You'd do just fine including jQuery into your theme in this way. However, in the next chapter, we will discuss the more optimal way to include the jQuery library into your WordPress installation.

WordPress, developed as a fork off the original b2/cafelog software, was co-developed by Matt Mullenweg and Mike Little. It first appeared in 2003. Originally a blog platform, it has grown over the years into a robust publishing platform that millions of people and organizations use in a myriad of ways for maintaining their site's content.

Like jQuery, WordPress is flexible and extensible. Matt and his fellow WordPress developers at Automattic have taken care to make sure WordPress conforms to current W3C web standards. A WordPress site's design and additional, custom functionality can be easily controlled and updated using the platform's APIs, which streamline theme and plugin development.

You should keep in mind, as someone who is looking to enhance your site with jQuery, just how dynamic a WordPress site is. WordPress uses a MySQL database and set of theme template pages as well as plugin pages, not-to-mention hundreds of core functionality pages to generate your site. This means a final displayed XHTML page's markup comes from many places; from the theme's template files, from post and page content stored in the MySQL database, and some of it may be defined in the code of a plugin or widget that the installation is using.

The more you know and understand about your WordPress installation and how its files come together, the more easily you'll be able to enhance the site with jQuery.

The next diagram illustrates how WordPress serves up a complete HTML page to the browser:

If you have a version of WordPress running that you can play with, great. If you don't, I highly recommend having a locally running installation. Installing and running a small web server on your local machine or laptop has become very easy with the release of WAMP (Windows, Apache, MySQL, and PHP) and MAMP (Mac, Apache, MySQL, and PHP). A local server offers you several conveniences compared to working with WordPress installed on a hosting provider.

I often find that when I travel, despite more and more Internet WiFi bubbles popping up, I am often somewhere that doesn't have one, or I'm in a Starbucks and I don't feel like shelling out cash to T-Mobile for the "privilege" of being connected. With a local installation of WordPress, I have no worries. I can develop and tinker to my heart's content regardless of Internet connectivity and most importantly, without worry that I'll break something on the live site that I'm developing or designing for.

If you're interested in a local sandbox installation of WordPress, I recommend you download WAMP for Windows or MAMP for Mac.

Similar to WAMP, MAMP stands for (you guessed it!) Mac, Apache, MySQL, and PHP. Mac users will head on over to http://mamp.info and download the free version of the server.

Once you download and unpack the ZIP and launch the .dmg file, it's a pretty straightforward process for copying the MAMP folder to your Applications folder and launching the app.

Again, like WAMP, MAMP from the start page offers you an easy way to launch phpMyAdmin. phpMyAdmin will allow you to easily create a database and database user account, which is required for installing WordPress.