The term ‘taxonomy’ makes me think back to high school biology class where we learned about Carolus Linnaeus. He was a botanist from the 18th century who devised a classification system for naming species that is still being used in the 21st century. This Linnaean classification system organizes species of plants and animals into hierarchical levels including Kingdom, Phylum, Class, Order, Family, Genus and Species.

With respect to biology taxonomy is the naming system used to identify millions of different creatures, both living and extinct. All species are classified according to their characteristics into broad groups containing similar organisms. Each broad group, like a kingdom or class, is subdivided into distinct sets, like family or genus. Being a member of a certain group means that you have certain characteristics in common with other members of the same group. Each organism can then be described according to the groups that it belongs to.

So, a taxonomy is a way to describe, identify, name and classify individual species. If we extend this idea to WordPress, a taxonomy becomes a way to organize and classify blog content.

Assigning a post or a page to a category or giving your article a couple of tags classifies and organizes the content. It helps the reader and search engines, too. Same with the link categories, they help us to organize links into meaningful groups.

Categories can have a hierarchy and can be divided into subcategories, but tags cannot. In describing categories we can use the term ‘parent category’ for a larger category that has been divided into smaller groups or ‘children categories’.

Category hierarchy is useful when presenting information about large groups of things. For example, a site about muscle cars can have the broad categories of Chevrolet, Pontiac and Plymouth. Within the Chevy parent category, there might be subcategories of Chevelle, Camaro and Nova. LeMans and GTO could be child categories of the Pontiac parent category, and the Plymouth parent category might list Barracuda and Road Runner as subcategories. You get the idea.

By filing a post in a child category, it is not automatically a member of the parent category as well, so make sure to tick the parent category if that’s what you want.

Taxonomies are searchable so they are a way to help your site visitors find your information. Choose category names wisely at the start. You can still add or subtract categories as your blog develops, but if possible refrain from changing categories, especially if your permalinks, and therefore the URLs of your posts, use categories. It could be a nightmare to update all those links!

Tags are like keywords that describe a post, so they’re not thought out as part of the site structure like categories should be. Tags don’t have hierarchy and are described as having a freeform and one-dimensional nature. Basically, tags are used to further describe or classify a post or page. The same tag can be assigned to any number of posts or pages in any combination of categories.

Using taxonomies is a means for connecting posts together by relationship or similar characteristics. Grouping similar posts into categories and tagging them will help visitors to navigate and use your site.

But WordPress doesn’t stop there, it lets you to create special taxonomies for any of your sites. Custom taxonomies can be defined for custom post types, posts or pages, and have been around since WordPress version 2.3, but they didn’t gain the full capability for hierarchical structure until WP 3.0.

Interested in creating a new, custom taxonomy for your site? Study the codex examples for registering taxonomies.

Categories, tags and custom taxonomies are enlisted as some of the post meta data. Post meta data includes the information about a post that helps to identify it. Examples of post meta data include the date and time it was published, the author’s name, the categories or tags assigned to the post, and the associated RSS feed.

To handle various levels of user privilege, a system was developed in WordPress that was originally called the User Level System. In this system many capabilities were identified and these capabilities were classified according to the level of authority required or the privileges needed to perform certain tasks.

For example, a higher level of privilege was deemed necessary to edit another writer’s post. Accordingly, a user level that is now called Editor was given a variety of capabilities ranging from edit_others_posts to delete_published_posts. A lower user level, now called Author, was awarded a slimmer set of capabilities and it doesn’t include modifying others’ work.

Make Sure Site Visitors Can Register

To make sure your visitors can sign up to your blog, see the General Settings page under “New User Default Role” for a spin box that has the options of subscriber, administrator, editor, author and contributor. Default role is subscriber.

If you want people to be able to register on your blog, tick the Membership box next to “Anyone can register”, then click on the Save Changes button at the bottom of the page to make it so.

User Levels Supplanted by Roles

WordPress introduced user levels in version 1.5, but quickly replaced them in version 2.0 with Roles and Capabilities. User levels are deprecated since WP 3.0, but we may see them used in older plugins or themes, so it’s worth knowing about them. Basically, higher user levels have more privileges and can write, edit, post, publish and manage more than their lower-level counterparts.

The lowest user level equates with the subscriber role. Subscribers can sign in, see and modify their own profile, and besides that they can read posts and pages and comment.

The highest user level is reserved for the site administrator or blog owner and that would include level_0 up through level_10, the highest user level.

Prior versions of WordPress had 11 levels from level_0 to level_10, with level_0 being the lowest level and least capable, while level_10 users were able to do anything and everything with the WordPress blog.

WordPress defines users as the blog visitors who register and login to the web site. The Administrator is created during installation of the WordPress software. The Admin level has absolute power over all other users being able to add or delete users, edit their writings and promote or demote anyone to a different role.

Roles correspond to the old user level system like so:

• Subscriber = level_0
• Contributor = level_0, level_1
• Author = level_0 to level_2
• Editor = level_0 to level_7
• Admin = level_0 to level_10

Many blog owners don’t need any special roles as they are the Admin and they control everything with their personal online spaces. Beyond the Admin there is a new level called Super Admin that comes into play when a network of sites needs to be administered. Multisite WordPress installations came into use as user levels were being deprecated, so there is no equivalent user level number for the Super Admin.

Capabilities for Standard Roles

The standard roles in WordPress are Administrator, Editor, Author, Contributor and Subscriber, in order of decreasing privilege.

The Admin user is created when WordPress is installed. Administrators have all capabilities, including the privileges to install, activate, edit and delete plugins, install, delete, edit or switch themes, edit or delete any post or page whether published or private, edit the dashboard, manage users, categories, links, options, comments and files, and import or export parts or all of the WordPress blog.

Editors have fewer privileges than admins, but they have the powers to manage their own and other’s posts. They can edit and delete pages or posts whether they’re published or private. Editors have the capabilities to manage categories, links and comments, and they can upload files. Editors can post code in pages, posts and comments, so make sure you trust your editors because they can post HTML markup or even JavaScript to your blog.

Authors have fewer privileges than editors and they all center around writing posts. Authors can publish, edit and delete the posts they create, even published ones. However, they cannot edit or delete other’s posts. Authors cannot create or alter Pages. They can upload files to add new media, and of course, read and comment on posts.

Contributors have even fewer privileges than authors. Contributors can edit, delete and read their own posts. Posts created by Contributors will be held in moderation for an Editor to approve and publish.

Finally, Subscribers have but two capabilities. They can read posts and they can view and update their own profile.

Modifying and Managing Roles

Several WordPress plugins exist for managing roles and capabilities. The plugins listed here get very high marks at the WordPress Plugin Directory.

Members Plugin

Members plugin is described as an “extensive role and capability management system” that allows you to create, edit and delete roles and capabilities for those roles. Using shortcodes, this plugin lets you control access to your content, including the ability to make the entire site and its RSS feed private.

Role Scoper Plugin

Role Scoper plugin is a complete solution for assigning permissions and roles to specific pages, posts or categories. Independent of WP roles, users of any level can be elevated to read or edit any content. Alternatively, content can be restricted from any user regardless of their WP roles or capabilities.

User Access Manager Plugin

User Access Manager plugin lets you “manage the access to your posts, pages and files”. Reading and editing permissions for pages and posts are assigned via user groups. Registered users are placed into user groups for which appropriate access rights have been created. User groups can supplement or take the place of WP roles for providing or preventing access to pages and posts.

Advanced Access Manager Plugin

Advanced Access Manager plugin is a “powerful and flexible Access Control tool” that supports single and multisite WordPress installations. Roles can be created and capabilities assigned per role. The Dashboard and Admin menu can be filtered to show only the important bits for each role.

User Role Editor Plugin

User Role Editor plugin allows you to create new roles and customize their capabilities. Options include setting the default role for new users, removing capabilities from users, deleting roles no longer needed, and changing capabilities on a per user basis.

Gary’s ultimate guide for assigning user levels to roles and capabilities is most useful for those wanting to modify or create plugins and themes. Many code snippets are shared in this post for assigning capabilities, testing whether a user has a certain capability, and adding new roles and capabilities.

If all you want to do is highlight some text that includes code-related words like filenames, function names or plugin names, use <code></code> around those phrases in your text. Using <code></code> turns text into a monospaced font so that it appears differently in your posts than “normal” text. However, using <code></code> around an HTML tag doesn’t do anything except change the presentation of the tag, so the opening and closing angle brackets are interpreted to enclose an actual HTML tag. The result will be a mess and definitely not what you were hoping to see.

To make WordPress show code in a post without interpreting it, you have to do ONE of three things:

1. Use special character codes to replace angle brackets of tags.
2. Use the HTML tag <pre></pre> around the code.
3. Use a plugin to highlight the code syntax.

1. Special Character Codes

Angle brackets, < or >, are what WordPress uses to identify code, whether it’s HTML, inline styles of CSS, or PHP. Content inside angle brackets is interpreted as code by virtue of placement inside the brackets. Instead of interpreting this code we want WordPress to show the code to the site visitors and we can use special character codes to do that.

Character codes are special sequences of letters or digits that are used to represent textual characters. Every character that we see on the screen, including uppercase letters, lowercase letters, numbers, and symbols like <, >, #, $, %, ^, & or *, can be represented by character codes, sometimes called character entities.

Using character codes in posts looks a little strange in the editing panel, but when a browser comes across these codes they are interpreted and their textual equivalent is shown on the screen.

ASCII (American Standard Code for Information Interchange) character codes were developed to represent text in electronic devices and they follow a specific format. The format is that each character entity starts with an ampersand and ends with a semi-colon. The codes are a couple to a few letters or numbers. Numbered character codes always have a hash symbol right after the opening ampersand. Some entities can be represented by either numbered or named codes.

Examples of special character codes:

If you need to find a code for language sets other than English, try the unicode site for all the code charts you’ll ever need. There, you can find numeric codes for fun game pieces, like chess, mahjong or checkers, horoscope symbols, smiley faces, weather symbols, music notes, and much more.

Take caution: Just because you can enter a special code to represent a symbol, that doesn’t mean your computer will let you see it. Many operating systems will not have the proper fonts installed to make use of all of these codes, especially if they represent symbols that aren’t on your keyboard. Stick to the ASCII codes as many of the unicodes won’t be seen by your site visitors.

2. HTML tag: <pre>

Perhaps you’d like to show a block of HTML code on your post and have it shown as text. To make sure that your block of code is not interpreted as actual code, wrap it with <pre></pre> tags. The <pre> tag will change the appearance of the code into a monospace font, just like <code> does, but the difference is that <pre> also illustrates the code exactly as it was typed. All text, characters, spaces and line feeds will be reproduced exactly how they were entered. No code will be run when it’s protected inside the opening <pre> and closing </pre> tags.

3. Syntax Highlighter Plugins

A final way to illustrate code in a WordPress post or page is to use a plugin to highlight the code. Several plugins are available for syntax highlighting purposes.

One that I have been using lately is called Crayon Syntax Highlighter. It’s a great plugin that will colorize or highlight code that you wrap with shortcodes. There are lots of options if you want fine control over the color scheme. Themes come with the plugin so you have several choices for making your code look good.

There are two modes where you can highlight code differently using shortcodes, [crayon][/crayon] and [plain][/plain]. Use [plain] shortcodes when the colorized crayon is overkill or when you just want to show a small section of code. Crayon Syntax Highlighter supports a wide range of languages, including HTML, CSS, PHP and JavaScript, for starters.

The colorful [crayon] shortcode is controlled by options where you can pick the colors that you want for representing different sections or purposes in your code. Inline crayons are supported so you could put a line of code within a line of text and the code would be colorized.

Some other popular code-highlighting plugins include SyntaxHighlighter Evolved, WP-Syntax, and CodeColorer. I don’t have any personal experience with these plugins, but they are listed high in popularity at the WordPress Plugin Directory.

Need to Execute Code in a Post?

If what you’re really after is to put executable code in a post or WordPress Page, check out this post on executing PHP in WordPress blogs.

To control what scripts are used on your site it may be wise to learn how to disable scripts from loading in the first place. Similar methods can be applied to streamline the number of scripts or stylesheets loaded onto your site.

Check out this great tutorial on disabling scripts and styles. Thanks for sharing, Justin!

You’ll need to modify the functions.php file of your theme to remove styles or scripts. The technique is similar in each case.

1. Find the ‘handle’ of the script that you’d like to remove.
2. Pass the script handle to wp_deregister_script().
3. Wrap one or more ‘deregistrations’ in a new function, like my_deregister_javascript() in this example.
4. Use add_action() with wp_print_scripts method and add your new function to the functions.php file of your theme.

function my_deregister_javascript() {
  wp_deregister_script('jquery-form');
}
add_action('wp_print_scripts', 'my_deregister_javascript');

From the reference on add_action in the WordPress codex we can see that two arguments are required, namely the $tag or handle of the script and the $function_to_add or the function to which the script is hooked. Two optional parameters can be added to the add_action function to specify the $priority or the order in which the functions are executed, and $accepted_args or the number of arguments that the function accepts. Generically,

add_action( $tag, $function_to_add, $priority, $accepted_args );

In the example above we’ve used ‘wp_print_scripts’ for $tag and ‘my_deregister_javascript’ for $function_to_add while the optional $priority and $accepted_args were not used. This will hook the new function ‘my_deregister_javascript’ to the action called ‘wp_print_scripts’.

Alternatively, a WordPress plugin could be used to manage the scripts and actions called for on your site. Use Google Libraries is a plugin built to detect the scripts needed for a site to run properly, including all the scripts called for by plugins and the active theme. Scripts are loaded in the proper order taking into account dependencies, whether previously known to WordPress or whether provided by the plugin and theme authors. This plugin uses the content delivery network (CDN) of google to supply the most popular javascript libraries, including jQuery and jQuery UI, among others.

$(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.

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.

function id_scripts() {
   wp_register_script('script_alpha', 'URL', array('jquery'), '1.0');
   wp_enqueue_script('script_alpha');
}
add_action('wp_enqueue_scripts', 'id_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 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:

$('#slide_polaroid').cycle({
   fx: 'fadeZoom',
   timeout: 2000,
   slideExpr: 'img',
   after: function() {
     $('#write_caption').html(this.alt);
   }
});

Output:

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:

<div id="slide_polaroids">
   <div class="pol"><img src="../images/1.jpg" alt="one" /><p>Slide 1 caption.</p></div>
   <div class="pol"><img src="../images/2.jpg" alt="two" /><p>Slide 2 caption.</p></div>
   <div class="pol"><img src="../images/3.jpg" alt="three" /><p>Slide 3 caption.</p></div>
   <div class="pol"><img src="../images/4.jpg" alt="four" /><p>Slide 4 caption.</p></div>
</div>

JavaScript:

$('#slide_polaroids').cycle({ 
     fx:     'shuffle', 
     timeout: 3000, 
     delay:  -2000,
     slideExpr: 'div'
   });

Output:

Slide 1 caption.

Slide 2 caption.

Slide 3 caption.

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.

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.

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:

<div id="show_a">
  <a href="/images/1.jpg"><img src="../images/1.jpg" alt="one" /></a>
  <a href="/images/2.jpg"><img src="../images/2.jpg" alt="two" /></a>
  <a href="/images/3.jpg"><img src="../images/3.jpg" alt="three" /></a>
  <a href="/images/4.jpg"><img src="../images/4.jpg" alt="four" /></a>
  <a href="/images/5.jpg"><img src="../images/5.jpg" alt="five" /></a>
  <p> </p>
</div>
<div id="show_b">
  <a href="/images/1.jpg"><img src="../images/1.jpg" alt="one" /></a>
  <a href="/images/2.jpg"><img src="../images/2.jpg" alt="two" /></a>
  <a href="/images/3.jpg"><img src="../images/3.jpg" alt="three" /></a>
  <a href="/images/4.jpg"><img src="../images/4.jpg" alt="four" /></a>
  <a href="/images/5.jpg"><img src="../images/5.jpg" alt="five" /></a>
  <p> </p>
</div>

 

 

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:

$('#show_a').cycle({ 
  fx: 'fade,toss,fadeZoom',
  speed: 700,
  timeout: 2000
});
	 
$('#show_b').cycle({
  fx: 'fade,toss,fadeZoom',
  speed: 700,
  timeout: 2000,
  slideExpr: 'img'
});

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.

 

 

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:

$('#show_1').cycle({ 
    fx: 'fadeZoom',
    speedIn: 700,
    speedOut: 1200,
    timeout: 2000
    });
	 
    $('#show_2').cycle({
    fx: 'fadeZoom',
    speedIn: 700,
    speedOut: 1200,
    timeout: 2000,
    slideExpr: 'img'
    });

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.

For interactive slideshows where you’d like the user to be able to click on a slide to get more information, wrap an anchor around each slide. Then, when the user clicks on a slide they will be shown the target link. You could show the user a larger image, an expanded view of a portion of the image, or more descriptive text about the slide.

The markup is straightforward, using an unordered list of links:

<div id="show">
  <a href=""></a>
  <a href=""></a>
  <a href=""></a>
  <a href=""></a>
  <a href=""></a>
</div> <!-- end div#show -->

Transition Effects Problem

Wrapping anchors around each slide makes them clickable, but that introduces a potential problem when using the Cycle plugin. Some of the transition effects just won’t work as expected. In this example the children that will be manipulated inside the #show container are the anchor links, not the images. Even though we know it’s supposed to be the images that are to be swapped in and out of this slideshow, technically, the children that will be swapped are the anchors, and that makes a difference in how things will look. Images are contained inside the anchors, so the images won’t be manipulated, just the anchors.

Most of the available transition effects modify the size of the slide’s width and/or height to achieve the desired effect. When an anchor is wrapped around an image, the anchor’s size can be manipulated, but the contained image won’t be resized. If one of the transitions that manipulate the slide width or height has been called, the effect won’t be seen as intended.

For example, the two slideshows below use the same HTML markup, except for having different container ids, which are targeted by the script and the CSS. Images are wrapped by <a> in both the left and right slideshows below.

Here’s the HTML Markup for the example slideshows below:

<div id="showleft">
  <a href="/images/1.jpg"><img src="../images/1.jpg" alt="one" /></a>
  <a href="/images/2.jpg"><img src="../images/2.jpg" alt="two" /></a>
  <a href="/images/3.jpg"><img src="../images/3.jpg" alt="three" /></a>
  <a href="/images/4.jpg"><img src="../images/4.jpg" alt="four" /></a>
  <a href="/images/5.jpg"><img src="../images/5.jpg" alt="five" /></a>
  <p>&nbsp;</p>
</div>
<div id="showright">
  <a href="/images/1.jpg"><img src="../images/1.jpg" alt="one" /></a>
  <a href="/images/2.jpg"><img src="../images/2.jpg" alt="two" /></a>
  <a href="/images/3.jpg"><img src="../images/3.jpg" alt="three" /></a>
  <a href="/images/4.jpg"><img src="../images/4.jpg" alt="four" /></a>
  <a href="/images/5.jpg"><img src="../images/5.jpg" alt="five" /></a>
  <p>&nbsp;</p>
</div>

Using one of the turn effects illustrates how the different children behave. The slideshow on the left is manipulating anchors, while a slight change in the script allows the slideshow on the right to manipulate the images. Both slideshows below use the turnDown transition effect.

Watch each slide transition and you’ll see that the one on the left doesn’t show any turning behavior as the top slide is dragged off the lower slide. In the slideshow on the right the turnDown effect can be seen as the images are manipulated in a way to make it look like the next image is being turned down from above.

 

 

This phenomenon happens using the jQuery Cycle plugin when an anchor, <div>, or any other tag wraps around the images, in effect taking their place as children of the slideshow container.

slideExpr Solution

One solution is to use the slideExpr option. The default value for slideExpr is ‘NULL‘ which indicates that the default children will be manipulated as the slides, as in the slideshow on the left.

$('#showleft').cycle({
  fx: 'turnDown',
  speed: 700,
  timeout: 2000
});
	 
$('#showright').cycle({
  fx: 'turnDown',
  speed: 700,
  timeout: 2000,
  slideExpr: 'img'
});

The slideshow on the right, #showright, has specified the option slideExpr: ‘img’ to assure that the <img> should be treated as slides, see line 11. By specifying which element should be treated as the children of the slideshow container, the transition fx can be seen as intended.

Slideshows can use any content for slides, so remember that extra elements in the slideshow container will be treated as slides. Inspect the HTML markup above and take note of the blank paragraph in each slideshow container. The default slideshow on the left, #showleft, assumes that the <p> is a child that is part of the slideshow, so it shows a blank paragraph after the last slide. Only images are slides in the slideshow #showright, so its behavior is to wrap around to the first <img>, instead of showing the blank paragraph as the last slide.

fx Solution

Another way to avoid the transition effect problem is to stick with the slide transitions that aren’t affected when using wrappers around slides. When the design requires wrapping slides in anchors or divs, pick from the subset of transition effects that doesn’t modify the image size. To see the true effects use fade, scrollUp, scrollDown, scrollLeft, scrollRight, and shuffle for slide transitions.

Note: The blank spaces between each slide in #showleft are due to the way that WordPress assembles a webpage or post. Use slideExpr with WordPress to avoid having WordPress-injected elements acting as slides in slideshows with the jQuery Cycle plugin.

The jQuery Cycle Plugin offers an amazing number of transitions for your next slideshow. If any of the two dozen transitions don’t give the effect you’re looking for, the plugin can always be modified to suit. If you’re looking to make some unique transitions, check out the advanced demos on the plugin site.

Over 50 options can be implemented to show your slides in the best light. Options are available for controlling the speed of the transitions, the length of time between slides, as well as running the slideshow backwards or stopping after a certain number of slides have been shown.

Slides can be forced to fit a container and made to be manually paused and resumed. Easing transitions can be specified as can random showing of slides. Options in Cycle are plentiful and definitely worth investigating.

Command strings can be used to pause or resume the slideshow or advance to the next or previous slides. Tie these commands to a click event to let your visitors see the show as they wish.

The Cycle plugin works with two assumptions in creating slideshows. First, it assumes that a container object has been identified, usually via a class or id identifier, that will contain the slides for the slideshow. All children of the containing parent will become a slide.

Second, the slides must all be children of the container. Any object can be a child here, so textual content, images, anchors and divs can all be manipulated and viewed as slides in your slideshow. Don’t put anything else in the slideshow container unless you want it to become part of the slideshow.

Here’s the HTML markup that could be used for a simple slideshow of images:

<div id="show">
<img src="../images/pic1.jpg" alt="one" />
<img src="../images/pic2.jpg" alt="two" />
<img src="../images/pic3.jpg" alt="three" />
<img src="../images/pic4.jpg" alt="four" />
<img src="../images/pic5.jpg" alt="five" />
</div>

The images are contained in a specific container, div#show, which can be styled with CSS. Giving the container and the slides fixed dimensions works best, so make sure to specify the widths and heights.

The default behavior is to fade slides in and out of the container in a continuous and sequential manner, in a cyclical way. So, we’re going to ‘cycle’ through the slides in this slideshow. The javascript for a slideshow using default behavior is simple:

$('#show').cycle();

With Cycle plugin default settings the slideshow starts with the first image or slide and each slide takes one second, or 1000 milliseconds, to be faded in. Each slide is then paused for 4 seconds and then faded out in one second. The slideshow wraps around so that the first slide will be shown after the last one. The fading in and out action occurs continuously and indefinitely with the default settings, as below:

To alter the slideshow behavior pass an effect, other than fade, as a string to the cycle method, like so:

$('#show2').cycle('shuffle');

Check out all the effects that can be used to transition slides: blindX, blindY, blindZ, cover, curtainX, curtainY, fade, fadeZoom, growX, growY, scrollUp, scrollDown, scrollLeft, scrollRight, scrollHorz, scrollVert, shuffle, slideX, slideY, toss, turnUp, turnDown, turnLeft, turnRight, uncover, wipe, and zoom.

Several transitions can be combined in a comma-separated list if you can’t choose just one. Or, use the string ‘all’ to see all the slide transition effects in a random manner.

Alternatively, you can use an options object to set the fx option among others. The code below specifies fade, zoom and curtainY effects to bring the slides in and out of the container. Each slide will be brought in slowly (800 ms) and taken out quickly (400 ms) taking a total of 3 seconds for each complete transition. This is the code for the slideshow (#show3) at the top of this post.

$('#show3').cycle({
  fx: 'fade,zoom,curtainY',
    speedIn: 800,
    speedOut: 400,
    slideExpr: 'img'
    timeout: 3000,
    nowrap: true
});

The parameter slideExpr is given a string value of ‘img’ in order to produce a slideshow without long blank pauses in between slides when using WordPress. WordPress and other content management systems may introduce extraneous markup when preparing webpages. The markup may be incorrectly interpreted by different browsers used to view slideshows created with Cycle, so it’s become important to specify the elements that are supposed to be cycled in the slideshow. Thus, the addition of slideExpr: ‘img’ as an optional parameter is necessary for image slideshows in WordPress.

The slideshow just above will be shown only one time and end with the last slide because the nowrap option is set to true. This might be a good thing to remember for leaving a textual message on the screen with your last slide instead of having the slideshow run indefinitely.

If you get stuck or need a little help with figuring out how to work the Cycle plugin, visit the jQuery Forum.