WordPress jQuery Loaded in noConflict Mode

Loading JavaScripts in WordPress queues up the internal, minified versions of scripts like jQuery that come with WordPress. jQuery is loaded in noConflict mode so javascript code won’t work if it uses the “$” shortcut like so:

$(document).ready(function(){
  $(.slideshow1).cycle();
});

A simple solution is to pass the dollar sign in the anonymous function of a ready() call and that way the code that you’ve already written with the $ shortcut will work ok. The dollar sign acts as an alias for jquery.

jQuery(document).ready(function($){
.
.
//javascript code in here can use the $() shortcut instead of jQuery()
.
.
});

Alternatively, instead of waiting for the entire document to be rendered as with the ready() method above, the javascript can be put in the following jQuery wrapper so that the code can be used right away.

(function($) {
  	$('#newsticker').innerfade({
	  animationtype: 'slide',
	  speed: 750,
	  timeout: 2000,
	  containerheight: '30px'
	});
})(jQuery);

Using one of these jQuery wrappers is recommended to avoid conflicts with other scripts that may rely on the dollar sign shortcut on your WordPress sites.

Include jQuery or JavaScripts in WordPress

Plugin and theme authors use jQuery for their special effects, but there seems to be some confusion about the proper way to include JavaScript files in WordPress. If you’d like to use jQuery effects on your pages or in your theme, or if you want to include any javascript plugin or personal script, read on to see how to do it properly with WordPress sites.

Queue Up Your Scripts with Actions

Since jQuery itself is already included in the core of WordPress, how should we include a javascript file that we’ve created or even one of the popular jQuery plugins that rely on jQuery? WordPress helps us in this endeavor with a function called ‘wp_enqueue_script()‘ and two actions that are used to call this special function.

The actions are used for either the user side or the admin side, depending on the purpose of your javascript. Use the ‘wp_enqueue_scripts‘ action to call wp_enqueue_script() for use in your themes. If the script functionality is needed on the admin side, use ‘admin_enqueue_scripts‘ action instead.

The format of the wp_enqueue_script() function call is as follows:

wp_enqueue_script('$handle', '$src', '$deps', '$ver', '$in_footer');

where $handle is the name of the script as a lowercase string, $src is the URL to the script, $deps is an array of scripts that the script you’re calling depends on or the scripts that must be loaded first for your script to work, $ver is the script’s version number in string format, and $in_footer is a boolean value to indicate whether the script should be loaded in the <head> or at the end of the <body> in the footer.

The $handle string is the only required parameter, so the other four parameters are optional. The $src, $ver, and $in_footer parameters default values are ‘false’, and $deps defaults to an empty array.

It seems that $src would need to be a required option, but WordPress already knows about several scripts and where to find them. Consult the list of default scripts included with WordPress to pick up their handles.

For example, to queue the jQuery Color plugin, we’d simply use this:

wp_enqueue_script('jquery-color');

To include a script and specify the source, try this for including the jQuery Cycle plugin in the <head>:

wp_enqueue_script('jquery-cycle', 'URL', array('jquery'), '1.3.2');

The URL should not be a hard-coded value for local scripts. Refer to the Function Reference pages in the codex for proper URL formats for plugins and themes.

Register Your Scripts First

Make sure that your scripts are registered first before calling them. Registering a script basically tells WordPress where to find the code for your script. Use the function wp_register_script() to specify the location and handle of your script. The format is similar to the wp_enqueue_script() function:

wp_register_script('$handle', '$src', '$deps', '$ver', '$in_footer');

The parameters have the same meanings and default values as used with wp_enqueue_script(). When in doubt, see what the WordPress Codex has to say about wp_enqueue_script() and wp_register_script().

Create a Function for the Header

Put it all together using wp_register_script(), wp_enqueue_script(), and the appropriate action to call the functions. Create a simple function, like id_scripts() below, and use the add_action() hook to queue up the scripts.

As a side note jQuery itself doesn’t have to be queued via a statement like wp_enqueue_script('jquery');, because it is listed as a dependency of ‘script-alpha‘ in this case.

When enqueuing a custom script that depends on a jQuery plugin, specify jQuery and its plugin in the $deps parameter of the wp_register_script() action for the custom script. For example, if your custom script depends on the jQuery Cycle plugin, which itself depends on jQuery, use array('jquery', 'jquery-cycle') for the $deps parameter. This specifies that both jQuery and its plugin Cycle should be loaded (in that order) before the custom script.

Place this code in the header.php of your theme. Remember, first register the javascript file, then enqueue it and make sure this is done before the wp_head(); statement. Your custom script can then be placed in header.php after the wp_head() call.

Use Theme functions.php to Safely Reference Your Script

When using a child theme take note that the header.php in a child theme will override the default header.php in the parent theme. Instead of placing the script-queuing code in the header, one could more safely put this code in functions.php. The advantage to that way is that the functions.php of a child theme is processed before the functions.php of the parent theme. Both the parent and child theme functions.php are processed, unlike header.php files.

If you’re the least bit unsure about messing with header.php, then just use functions.php to queue up your javascript files. Don’t forget the opening and closing PHP tags in functions.php, else it won’t work. Put the javascript that would come after the wp_head() call in a separate .js file in the child theme and you’re good to go.

Verify that everything is working correctly by viewing the source of the HTML document for a WordPress post that should have the script included. The <script> tags should be visible in the header or in the footer depending on how the scripts were called.

Polaroid Slideshows with jQuery Cycle Plugin

The Cycle plugin for jQuery has many options that can be modified to create stunning slideshows. The look and feel of the slideshows are controlled with CSS and the behavior or animation of the slides is controlled by JavaScript. The Cycle plugin requires jQuery v1.3.2 or later.

Polaroid Photos

Sometimes you want to have a little fun with a project, like when somebody brings a Polaroid camera to a party. Taking Polaroid snapshots became wildly popular in the 1970s because it was the only camera that would produce a hand-held photo on the fly. All the other cameras had film that you would need to finish taking pictures on, and then send in to a photo developer to expose the negatives and print the photos. Polaroid cameras were like the iPhones of the 70s, and due to that popularity everybody knew what a Polaroid was — an instant photo.

Polaroid photos looked a little different from photo developer developed photos. They were always glossy and of a different format than the typical 3 1/2 inch tall x 4 7/8 inch wide snapshot that you’d get from the photo shop. With or without a border, the images on photo shop developed prints were rectangular, not square.

Polaroid cameras are still around today and their photos measure 3.5 inches wide by 4.25 inches tall. A white border around the image measures approximately 0.25 inch at the top, 0.1875 inch on the sides, and 0.875 inch at the bottom. The bottom border is larger so that you can write a caption there. Subtracting the size of the borders from the overall dimensions leaves 3.125 inches for the inner width and 3.125 inches for the inner height of the photographic image. Thus, Polaroid images are square instead of the standard rectangular format common in other photos.

Styling the Polaroid Photo

We can use CSS to make our images look like Polaroids. Introduce a dark, thin border and some padding for each image. In this case we’ll target the slides with the class .polaroid. Note that the container size may have to be enlarged to accommodate the padding and border from both sides of the image. This is especially important when all the images are not of the same dimensions.

CSS:

#slide_polaroid {
margin:10px;
z-index:3;
}
#write_caption {
position:relative;
top:-40px;
left:100px;
z-index:4;
}
.polaroid img {
padding:18px 14px 33px 14px;
}
.polaroid {
width:200px;
height:200px;
background-color:#fcfcfc;
color:#000;
padding:18px 14px 63px 14px;
border:1px solid #000;
position:relative;
}

The jQuery Cycle plugin is used to control the slideshow action. A function is called after each slide is shown on the screen to print the image alt text for the slideshow image captions.

JavaScript:

Output:

one
two
three
four

We’re getting close with the above, but a little better slideshow effect would be to bring the whole polaroid through the effect, not just the inner square image.

This brings up one of the nice features of using jQuery Cycle for slideshows: any content can be used for the slides. That means a <div> containing an image and textual content — such as a caption — could be identified as slides.

Polaroid Slideshow

For this example each image and caption is wrapped in a <div>, and Cycle is called like so:

HTML:

one

Slide 1 caption.

two

Slide 2 caption.

three

Slide 3 caption.

four

Slide 4 caption.

JavaScript:

Output:

one

Slide 1 caption.

two

Slide 2 caption.

three

Slide 3 caption.

four

Slide 4 caption.

This slideshow hard codes captions in the HTML instead of displaying the image alt text dynamically. It just depends on the purpose of the slideshow and how many slides you have as to which approach you’ll use for captions.

Styling Double Mat Framed Prints

Give your slides the look of double matted, framed photos with a little CSS and a different special fx.

one
two
three
four

Here, the .frame class is set to “ridge” for the <div> and <img> border properties using slightly different colors to make a double matted picture frame look. Black and grey backgrounds and a small amount of padding serves as the mat boards for the illusion. The JavaScript Cycle fx parameter is set to “fade” for the slideshow.

Specify Children for jQuery Cycle Slideshows

The jQuery Cycle plugin is a versatile JavaScript plugin for making slideshows.

The default behavior is to fade in a new slide, let the viewer see the slide for four seconds, then fade out that slide as the next one fades in. Slides are faded in and out continuously and in a sequential manner. Unless specified in the options, a slideshow starts with the first slide and cycles through all slides, then loops back to the first slide, running continuously.

Options are available to change every aspect of the slideshow behavior, so the kind and timing of the transitions can be easily changed, as well as the starting and ending slides of the show.

It’s beyond the scope of this post to review all the Cycle options, but one option that may come in handy is the slideExpr option. The default value is ‘NULL‘ and it’s described as the “expression for selecting slides (if something other than all children is required)”.

So far, there are two instances where slideExpr has saved my day. Basically, it lets you specify the children of the slideshow and that’s important if you’re using WordPress or if you’re wrapping slides in links.

WordPress or Other CMS

Using JavaScript inside WordPress posts can be tricky. One has to properly register and queue up the scripts with the methods wp_register_script() and wp_enqueue_script() instead of inserting <script> tags in the page headers.

Still, things may not look right when a post is previewed because of the way that WordPress assembles the pages we see on the World Wide Web. WordPress or another content management system (CMS) may insert line breaks that interrupt the flow of a slideshow.

Remember, with the Cycle plugin every child element inside the slideshow container will become a slide. That means every CMS inserted <br /> will be treated as a slide. This produces a slideshow with long, blank pauses in between the actual slides, like the slideshow on the left below, #show_a.

Use slideExpr to specify the children elements for slideshows in WordPress. This avoids extraneous elements from the content management system from being interpreted as slides. See the slideshow on the right below, #show_b.

HTML Markup:

one two three four five

 

one two three four five

 

one
two
three
four
five

 

one
two
three
four
five

 

 

The left slideshow, #show_a, shows a few different transitions without using slideExpr, which gives a background-colored pause or blank pause in between each slide. This slideshow assumes the first-level children are the elements to be manipulated in the slideshow.

The right slideshow, #show_b, shows the same transitions with slideExpr set to ‘img’. This gives the expected behavior where only the images, <img>, are treated as slides, not any other element that may be inserted by WordPress or by the developer.

JavaScript:

Wrapping slides

If you’re not using WordPress or another CMS, there may still be unexpected behavior with the Cycle plugin with respect to children of the slide show.

Any children in a container element can be used as a slide with the jQuery Cycle plugin. Designers can get as fancy or as funky as they want to with their slideshows because they ultimately have complete control. If you want to wrap each image in an anchor which is wrapped in a styling div, that’s ok.

Just remember to use slideExpr: ‘img’ if it is the images that you want to transition from slide to slide. HTML Markup is very similar to that above with different container ids for JavaScript and CSS targeting.

one
two
three
four
five

 

one
two
three
four
five

 

 

In this example the slideshow on the left, #show_1, uses the ‘fadeZoom’ transition effect without slideExpr. Slideshow #show_2 on the right uses the ‘fadeZoom’ transition effect with slideExpr: ‘img’. Note how the actual transition effect is different depending on which element is serving as the slide.

JavaScript:

Note the empty paragraph in the HTML markup for each slideshow. Without specifying the slideExpr option, as in #show_1, the empty paragraph is treated as a slide and a blank space is shown for it. Slideshow #show_2 specifies that the images are to be the sliding elements, so no blank space is seen.

Certain transition effects problems may appear when wrapping slides with links in jQuery Cycle. Using the slideExpr option is an easy solution.