Final thoughts and project wrap up Its all about graceful degrading

As with everything you do with jQuery, you need to keep in mind that you're creating useful enhancements that are great to have, but if for some reason a user didn't have JavaScript enabled or available, the process or site won't break.

Our client is very happy with our seamless registration solution. Going through the registration process with JavaScript disabled, the registration process does work just fine using the standard browser back keys. The only drawback I find is that the registration form loads up outside of the WordPress theme, which is what we had to do so it would load in nicely into the ColorBox modal window.

On the whole, I don't think this is that big of a problem. Going through my various website stats, I'm hard-pressed to find a visitor who didn't have JavaScript enabled. The two or three who didn't were probably in text-only browsers, so a lack of WordPress theming would probably not be noticed at all (in fact, it's probably nice for disabled users using text-to-speech browsers, not having to wade through the header info to get to the form).

Because we're always thinking of hypotheticals in this title, if by some chance, the client ever decided they'd like the form to work outside of ColorBox within the WordPress template in the event JavaScript was disabled, I've come up with the following solution:

First, you'd need to load the form into two WordPress pages. One named register, as we've done with the special template and another one named register-b (that's just the permalink slug, the header could still say Register on both pages). For the register-b page, you would not assign the special template; you'd leave the Page Template as Default Template. You can place a cform on to as many pages and posts as you like, so having this form in two places definitely won't be a problem.

Next, you'll go into the category-3.php Events template page and change the link to call the alternative, default themed page as follows (note the bold -b is the only difference from our original link):

<p><a class="register" href="/wp-jqury/register-b/?evnt=<?php the_ title(); ?>">Register</a></p>

Last, in your custom-jquery.js file, you'll simply create a jQuery script that will rewrite that href link to the modal page form by removing the -b. Be sure to place this script before your colorBox function scripts, just to make sure the href transforms before setting up the colorBox functions.

jQuery("a[href*='registerl]").each(function(){

this.src = this.src.replace(/register\-b/, "/register/");

If JavaScript is enabled, jQuery will change all the register href instances and the whole process will flow as planned using the ColorBox plugin. If not, the user will register using the standard WordPress theme form and not be any-the-wiser.

As you can see in the following screenshot, the form would just load in as part of the site if JavaScript were disabled:

Instant Ways To Monetize Your Blog

Instant Ways To Monetize Your Blog

Get Paid For What You’re Worth. Benefit From Your Talent. Get Your Due Credit. Provide Your Skills A Platform To Shine. Enhance Your Opportunities. Learn how to monetize your blog and reap the rewards of your skills.

Get My Free Ebook


Post a comment