WordPress: AJAX/Dynamic Content and Interactive Forms / Page 3 | WebReference

WordPress: AJAX/Dynamic Content and Interactive Forms / Page 3


[prev]

WordPress: AJAX/Dynamic Content and Interactive Forms [con't]

AJAX—It's Not Just for Your Site Users

I've already mentioned how, when applied properly, AJAX can aid in interface usability. WordPress attempts to take advantage of this within its Administration Panel by enhancing it with relevant information and compressing multiple page forms into one single-screen area. The following is a quick look at how WordPress uses AJAX to enhance it's Administration Panel forms (See Figure 5).

Even if you haven't upgraded to WordPress 2.5, WordPress 2.3 makes use of AJAX on the widgets panel, allowing you to easily drag-and-drop to add and arrange your sidebar widgets. (For some reason, this has been redesigned in 2.5; I would have preferred if it had stayed the same).

pageMash

In addition to finding plug-ins and widgets that enhance your theme, you should consider looking for plug-ins that enhance your administration experience of WordPress! For example, if your WordPress site has a lot of pages and/or you display your page links as drop-down menus, as discussed in Chapter 7, then, Joel Starnes pageMash plug-in is for ou.

pageMash is a great little plug-in that uses the MooTools framework and Moo. fx library. Instead of having to go into each individual page's editor view and then use the Page Parent view to manipulate your pages around into your hierarchical structure, this plug-in lets you reorder and assign pages as parents and sub-pages on-the-fly.

Time For Action:

  1. Download the pageMash plug-in.
  2. Unzip the files and upload the pagemash directory to your /wp-content/plugins/ directory.
  3. Go to Administration | Plug-ins and Activate it. pageMash will then show up under the Administration | Manage tag.

I hope you can get an idea by the following screenshot about how much easier and quicker it is to arrange your WordPress pages with pageMash.

The AJAX Factor

Aside from the many-interface enhancing, time-saving benefits of Ajax, sometimes you do just want to 'wow' your site visitors. It's easy to give your site an 'Ajaxy' feel, regardless of asynchronously updating it with server-side XML, just by sprucing up your interface with some snappy JavaScripts. The easiest way to get many of these effects is to reference a JavaScript library (sometimes called a toolkit or framework, depending on how robust the provider feels the code is). A few of the leading favorites in the AJAX community (in no particular order) are:

  1. Script.aculo.us
  2. Prototype
  3. jQuery

There's also:

  1. MooTools
  2. Moo.fx

Prototype is more of a framework and Script.aculo.us is more of an add-on toolkit or set of libraries for neat effects. In fact, Script.aculo.us references the Prototype framework, so your best bet is probably to use Script.aculo.us, but if you do work with it, be sure to check out Prototype's site and try to understand what that framework does.

Moo.fx is the smallest JavaScript effects library (boasting a 3k footprint), but again, it needs to be supported by the MooTools or Prototype frameworks.

jQuery is my personal favorite. It pretty much stands on its own without needing to be backed up by a more robust framework (like Prototype), but you can still do some very robust things with it, manipulating data and the DOM, plus it's packed with neat and cute visual effects, similar to Script.aculo.us.

Using JavaScript libraries like the above, you'll be able to implement their features and effects with simple calls into your WordPress posts and pages.

JavaScript Component Scripts

The fun doesn't stop there! What's that? You don't have time to go read up on how to use a JavaScript library like jQuery? Never fear! There are many other JavaScript effect components and libraries that are built using the libraries above. One of the most popular scripts out there that makes a big hit on any website is Lightbox JS.

Lightbox JS is a 'simple, unobtrusive script used to overlay images on the current page.' It's great, but it uses both the Prototype and Script.aculo.us libraries to achieve its effects. I also found that Lightbox was limited to only displaying images and a hair difficult to manipulate it to handle anything more than that. What if I wanted to display XHTML text, or markup containing YouTube videos, maybe even make an AJAX request to the server? Enter Thickbox.

Thickbox is very similar to Lightbox JS. It uses only the jQuery library, and in addition to handling images similar to Lightbox JS, it can also handle in-line content, iFrame content, and AJAX content (be sure to check out the examples on the ThickBox page!). The downside—Thickbox doesn't do that smooth animation that Lightbox JS (version 2) does when images are different sizes. This is the trade-off I made when I decided it was more important to be able to display more than just images in my OpenSource Magazine theme.

Depending on your theme's design and what type of blog or site you're creating it for, you may opt to use Lightbox instead or something all together different! It's your theme, don't feel limited to what I specifically discuss in this book. I'll walk you through the process of installing ThickBox, but many 'Ajaxy' scripts that use these JavaScript libraries/frameworks are installed similarly. Just follow the instructions in the ReadMe files and you're on your way to an enhanced theme.

Time For Action:

  1. This is an extremely easy-to-implement script. After downloading it, add the key js and CSS files to your WordPress theme's home.php and header.php files using the bloginfo template tag to target your theme:
  2. You'll also add in a call to the ThickBox CSS file:
  3. Don't forget to upload the loadingAnimation.gif and macFFBgHack.png images to your theme directory and update the thickbox.js and thickbox.css files as per the ReadMe file instructions.
  4. Then, you can create a post (or page) in your Administration Panel and using the Code View add in basic href links around your image tags, like so:

    5. I uploaded the images via WordPress's built-in up-loader and let WordPress create the thumbnails; I just added the captions to the title attribute, the rel attribute and the thickbox class by hand.

    That's it!

    Summary

    In this chapter, we reviewed a few ways to take advantage of AJAX on your WordPress site. We 'Wigitized' our theme and downloaded and installed a couple of useful plug-ins, and looked at using jQuery and ThickBox to enhance post and page content. Up next—let's take a look at some final design tips to working with WordPress.

    Cover: WordPress Theme Design

    This chapter is an excerpt from the book, WordPress Theme Design by Tessa Blakeley Silver, published by Packt Publishing Ltd, May 2008, ISBN 1847193099, Copyright 2008 Packt Publishing Ltd

    Original: September 12, 2008


    [prev]