Writing a custom jQuery script

Now, in the root of our js directory, let's create a new custom-jquery.js file and also be sure to include it in our header.php file, under our ColorBox includes as follows:

wp_enqueue_script('custom-jquery', get_bloginfo('stylesheet_ directory') . '/js/custom-jquery.js', array('jquery'), '20100510' );

Get set for some jQuery fun now. Since we've gone through the trouble of hand including the ColorBox plugin into our WordPress theme, we might as well make sure it can load up images in addition to our registration form.

To ensure that ColorBox only loads up images, and not every link on the page, we'll think of some examples back to Chapter 2, Working with jQuery in WordPress, and do a little creative selecting. We'll add this rule to our custom-jquery.js file:


jQuery(".entry-content a:has(img)").colorbox({height:"98%"}); });//end docReady

This selection only works on tag links that are in posts, inside the .entry class, that have thumbnail img tags. No other links will activate ColorBox.

Now, to get the registration page to launch ColorBox, we'll be a bit more clever. While I've added a .registration class, I don't want to rely on it to launch ColorBox. The only link that should trigger the modal window is a link to the registration form, so I'll be sure to select for that. In my cb-registration.js file, inside my document ready function and after my image select colorbox function, I'll add this script:

.colorbox({iframe:true, width:"50 0px", height: "600px"});

That particular jQuery selector will make sure that again, only links that contain (that's what the asterisk * is for) the word register in the href attribute will trigger the ColorBox modal window, in ColorBox's iframe mode.

You'll notice that I also used ColorBox's available parameters to set a constrained height and width for the registration form's modal box.

Now, only our Registration links and image links with thumbnails launch ColorBox:

Blogging From The Beginning

Blogging From The Beginning

The Blogging From The Beginning course was specifically designed with these people in mind. It starts at the very beginning, by helping them choose the right platform and takes them all the way though creating content, getting traffic and making money from their blog. It is simple, straight forward information that will help them even if they've never heard of blogging before. It will teach them how to get started and quickly harness the power of blogging for themselves.

Get My Free Ebook

Post a comment