Wordpress 3.0 jQuery - part 27 pdf

AJAX with jQuery and WordPress [ 246 ] 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 rst 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 lled out, the end result is this message that fades in: Chapter 7 [ 247 ] We're now ready to tackle the people who don't ll the form out properly. The wp-comments-post.php le does throw an error back if the required elds are not lled 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! AJAX with jQuery and WordPress [ 248 ] 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 nd 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 specic 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 workow 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 nal chapter, we'll take a look at some tips and tricks for working with jQuery and WordPress plus; the nal 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 rst 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. • • • Tips and Tricks for Working with jQuery and WordPress [ 252 ] If you often nd 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 nd 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 le. 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 Last, I nd I like to take most of my arsenal with me. If you use a handheld device or have a phone with a note app that lets you categorize and search for notes (especially the one that will let you sync from your desktop or a web service), you'll probably nd it useful to keep some or all of your arsenal in it so you can easily look up syntax from your arsenal at any time. I occasionally freelance at places that require me to use one of their computers and not my laptop, so having access to my arsenal on my device is very useful. 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 ofine 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 rst "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 rst 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. Tips and Tricks for Working with jQuery and WordPress [ 254 ] 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 Conict 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 If you're using a theme or a plugin from a third party, take a look through the theme's header.php le or the plugin's PHP pages and double-check that all scripts have been loaded in using the register and wp_enqueu_script methods. I've had a few instances that were rather frustrating and caused some hair-pulling, as we tried to gure out why my jQuery scripts were not working or wondering how I "broke" them porting them over to the live site. Turns out, the live site had a plugin installed that my sandbox site didn't, and you guessed it, that plugin was including an older version of jQuery and a custom script le using hard-coded script tags instead of the wp_enqueue_script method. Once this was gured out and straightened up, setting everything into noConflict mode, everything worked ne again! 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 nd features that let you step through and look at each returned nd, as well as let you run a nd not just on the whole document, but on individual selections. I like to select the just the "offending chain" and run the following nd features on it to see what comes up. Colons and semicolons Do a nd for : (colons); you'll probably nd 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 nd 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 nd 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. . our WordPress site using AJAX! AJAX with jQuery and WordPress [ 248 ] Shouldn't some of these examples be WordPress plugins? As mentioned in Chapter 3, Digging Deeper: Understanding jQuery. 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. 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