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).
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:
- Download the pageMash plug-in.
- Unzip the files and upload the
pagemashdirectory to your
- 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
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.
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.
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.
Time For Action:
- This is an extremely easy-to-implement script. After downloading it, add the key
CSSfiles to your WordPress theme's
header.phpfiles using the
bloginfotemplate tag to target your theme:
- You'll also add in a call to the ThickBox CSS file:
- Don't forget to upload the
macFFBgHack.pngimages to your theme directory and update the
thickbox.cssfiles as per the
- 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:
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.
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.
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