Wordpress 3.0 jQuery - part 27 pdf

We'll also be sure to add in a little jQuery "shine" and leverage some of those animation skills from Chapter 5, jQuery Animation within WordPress to make sure the success response load

That's the gist We're now ready to get down to work by setting up the success: and

error: functions Let's start with the success: function

We'll first want to create a div that will contain a message We'll then add our

message to that div along with the comment variable that we set up earlier (under our

formData serialized object) to pull the comment entered in the form into our code We'll also be sure to add in a little jQuery "shine" and leverage some of those

animation skills from Chapter 5, jQuery Animation within WordPress to make sure the

success response loads in nice and smooth Inside the success:function()

brace brackets, insert the following code:

//on success load content and fade in:

//create the div that the message goes in

jQuery('#respond').prepend('<div class="message"></div>');

jQuery('#respond message')

html("<div style='border: 1px solid #ccc; padding: 5px 10px'> <b>Thank you.</b><br/>

<span style='font-size: 90%;'>

<i>Your comment may be pending moderation.</i>

</span><br/> "+comment+"</div>")

hide() //then hide it!

fadeIn(2000); //then fade it in nicely

When the Form is properly filled out, the end result is this message that fades in:

Chapter 7

[ 247 ]

We're now ready to tackle the people who don't fill the form out properly The

wp-comments-post.php file does throw an error back if the required fields are not filled out We can use this to our advantage by just checking for an error using the

error: function

Nice, we just created some slick commenting functionality for our WordPress site using AJAX!

Shouldn't some of these examples be WordPress plugins?

As mentioned in Chapter 3, Digging Deeper: Understanding jQuery and WordPress Together, if you create a jQuery enhancement that doesn't

require any tweaks or edits to the WordPress theme, and will work with most themes released for public use, you may want to consider wrapping

up your scripts into a separate WordPress plugin

This is a handy practice if you're busy and don't want to amend a new theme with all your custom jQuery scripts every time you swap themes,

or if you're part of a larger project with lots of people or if you just simply want to share your jQuery work with less technical WordPress users

Follow the steps in Chapter 3, to wrap your jQuery scripts and plugins

into simple WordPress plugins so that any less-technical administrators can easily add and remove them from their projects

Also remember, Chapter 3, walks you through creating a jQuery plugin

as well You'll probably be able to condense and clean up your code by placing it into a jQuery plugin that you then wrap into a WordPress plugin This should also make creating updates and enhancements of your scripts easier to manage You'll then have better organized code that you can document and share with both worlds: jQuery developers and WordPress enthusiasts

Think about it though: if a jQuery enhancement is dependent on any

custom, special markup that you've edited a theme to generate (such as our post list example at the beginning of this chapter), it's better to leave that jQuery script as part of the theme, as it won't work outside of it This

is a good thing for super-custom or premium themes By making your enhancements part of your theme, you can entice people to download it because it offer features they don't need to then go out and find separate WordPress Plugins for

Chapter 7

[ 249 ]

Summary

Who knew AJAX was so darn easy these days? As you can see, leveraging the

strengths of WordPress themes and jQuery's AJAX events and requests, it's very easy to make some mighty dynamic sites In this chapter we took a look at:

Creating custom loading content and hijacking (hijaxing) links to do with as

we please

Working with getJSON and other site's APIs

Creating our own custom AJAX loading comment form (probably one of the most popular enhanced theme features and plugins sought after by WordPress site owners)

Further enhancing our AJAX work with simple jQuery animation features You now understand a lot about applying jQuery to specific enhancements and features to WordPress sites We've started off with the basics and really learning how

to leverage selectors so that your WordPress editor's workflow doesn't have to be interrupted and applied that to some very exciting enhancements that include slick animation, the UI plugin and AJAX We also covered getting those solutions into your WordPress site's theme, a WordPress Plugin as well as jQuery Plugins For the majority of your WordPress and jQuery development needs, you are all set!

In the next and final chapter, we'll take a look at some tips and tricks for working with jQuery and WordPress plus; the final appendix of this book is a condensed

"cheat sheet" of reference information for key jQuery functions as well as important WordPress function and template tags and classes, all to aid you in your jQuery and WordPress development

•

•

•

•

Tips and Tricks for Working with jQuery and WordPress

You're now ready to take your jQuery knowledge to the world of WordPress But first up, let's take a look at what we'll cover in this chapter:

Tips and tricks to properly load our jQuery scripts and making sure that they are compatible with other scripts, libraries, and plugins

Some tips and tricks for using Firefox and Firebug to speed and aid in your jQuery development

The virtues of valid WordPress markup and how you can make it easy on the site's content editors

The following are the tips and tricks required for working with jQuery and WordPress

Keep a code arsenal

A "snippet collection" or, what I call my "code arsenal" will go a long way to help you out, not just with jQuery and WordPress code, but also with the general HTML markup and even CSS solutions you create, not to mention any other code language you work in

I'm terrible at remembering syntax for code, markup, and CSS I often know what

I need, but can never quite recall exactly how it's supposed to be typed I used to spend hours going through various stylesheets, markup, and codes from previous projects to copy into my current project as well as googling (and "re-googling") web pages that had samples of the syntax I needed

•

•

•

If you often find yourself in a similar situation, using the Snippets or Clip features

that are usually available in good HTML/Code editors will free you from this

mundane (and very time consuming) task You simply type or paste the WordPress template tags, functions, PHP code, key CSS rules, and jQuery functions (and any

other code syntax, whatever you find you need to use the most), into the Snippets

or Clips panel available in your editor, and the application saves it for you, for

future use

As you work on different projects, you'll come up with solutions that you'll probably want to use again in the future, say, a set of CSS rules for unordered lists that make

a nice gallery view, or a very clever use of two jQuery functions together Every time you create something you think may come in handy (and a lot of it will come

in handy again), be sure to save it right then and there, for future reference

Good editors such as Dreamweaver, HTML-Kit, and Coda usually have the ability to organize snippets and keep them logically grouped so they're easy to access Some editors will even let you assign custom "key shortcuts" and/or drag-and-drop to your clips right into your working file How easy is that?

Free your arsenal

Once you discover how handy this is, you might want to have your arsenal available

to other programs you work with, especially if you switch between multiple editors and authoring environments I suggest you invest in a multi- paste/clip board application that lets you save and organize your code snippets When I was on a

PC, I used a great little app called Yankee Clipper 3 (which is free and is available at

http://www.intelexual.com/products/YC3/), and now on the Mac, I use iPaste (which has a modest price; go to http://www.iggsoftware.com/ipaste/) In addition to having your arsenal handy from any application, being able to go back through the last 10 or so items you copied to the clip board is a real time saver when you're working on a project

Your arsenal on-the-go

Chapter 8

[ 253 ]

Palm's native note app suited me great in this capacity for years and years; I now keep a large part of my arsenal in Google docs and use a little desktop app called NoteSync, which lets you write and view Google docs notes quickly (they'll have an Android app out soon, but in the meantime I use Gdocs on my Android device to see my notes) I have many friends who swear by EverNote's system (though, their mobile app only works offline on the iPhone and not on Android—as of yet)

Once all your often used and creative one-off solutions are all located in a convenient (hopefully categorized and key-word-searchable) place, you'll be amazed at the amount of speed your development picks up and how much more relaxing it is

jQuery tips and tricks for working in

WordPress

Let's start-off with some of my favorite jQuery tips and tricks, before focusing on WordPress Most of these items have been covered in detail in the book and this is to remind you that they're important (in a way, that's the first "tip", don't skimp on the essentials) There are also a few nuggets in here that haven't been covered as yet and that will help you speed up your jQuery development

Try to use the latest version of jQuery

This is one of the drawbacks to using the bundled WordPress version: it may get a little behind the current version of jQuery until the next version of WordPress comes out I'm all for staying on top of the current version as jQuery's top goals for version releases are not just to provide new functionality, but continually streamline and improve the performance and speed of the existing functionality If the latest version

of jQuery available on CDN is greater than the version that's bundled, be sure to

deregister jQuery first or restrict your newer version with the if else statements

we learned in Chapter 3, Digging Deeper: Understanding jQuery and WordPress Together,

so it loads on the front end of the site on required pages only Otherwise, you may create problems with plugins using the bundled version of WordPress

Stay current with the Google CDN

The best way to stay current is to simply use Google's CDN I covered this in Chapter

2, Working with jQuery in WordPress, and Appendix A, jQuery and WordPress Reference Guide, has a reference of this as well There are additional advantages to loading

up from Google's CDN instead for your project's hosted server Instead of having

to load JavaScript's, libraries and assets one by one from your server, your site can simultaneously load the main library from the Google CDN in addition to other local jQuery scripts and collateral The bonus is that jQuery will be cached for users who've

visited other sites that load it up from Google's CDN Be sure to check out Appendix A,

for a complete reference on wp_enque_script

Stay in No Conflict mode

The great thing about WordPress is that a site can have so many people contributing

to it in lots of different ways: writing content, working on the theme, and adding WordPress plugins One of the worst things about WordPress is that so many people can easily contribute who knows what to a site, depending on their admin status, some other collaborator could add to them, or what plugins they could install

Staying in No Conflict mode is a must for WordPress This in conjunction with

using the wp_enque_script to load in WordPress will ensure that jQuery doesn't get "pushed out" if anyone loads up any other plugin that uses say MooTools or Scriptaculous, or even just an older version of jQuery

It's easy to stay in noConflict mode The easiest is what we've been doing

throughout this whole book! Just use jQuery instead of the shortcut dollar

sign ($) in front of your scripts

jQuery('.selector').function();

Make sure other scripts in the theme or plugin use the Script API

Chapter 8

[ 255 ]

Check your jQuery syntax

This one always gets me You write up a nifty little jQuery chain, add a few tweaks

to it, and the darn thing just stops working And you know it's right! Well, at least, you think it's right Right? This is where a great code editor comes in handy You'll

want some nice find features that let you step through and look at each returned

find, as well as let you run a find not just on the whole document, but on individual

selections I like to select the just the "offending chain" and run the following find

features on it to see what comes up

Colons and semicolons

Do a find for : (colons); you'll probably find a few that are accidentally set up as ;

(semicolons) in your function's various object parameters, or you may have typed

a colon where a semicolon should have been there

Closing parenthesis

I'll also run a find on closing parenthesis, ), and make sure each one that comes up

is part of a continuing chain or the end of the chain marked with a;

Mismatched double and single quotes

Last, a quick check for matched-up single and double quotes sometimes shows me

where I've messed up Panic's Coda lets you place in "wild cards" into the find so

a search for "*' or '*" usually turns up a pesky problem

Most good code editors have color-coded syntax, which really helps in recognizing when something isn't right with your syntax, such as not having a closing quote mark at all or parenthesis But, the issues above are tricky as they'll still often display

as proper color coded syntax, so you don't know until you run your script that something's wrong

Use Firefox and Firebug to help with

debugging

Firebug has a feature called "console logging" This is one of many great features

of Firebug in my opinion For years I often resorted to using JavaScript's "alert" statement to try and show me what was going on "inside" my work but the Firebug console handles so much more than that This is really useful because sometimes you have to debug a "live" site and setting up JavaScript alerts is a little risky as you may confuse visitors to the site Using Firebug's console logging eliminates that