Search and Replace Thumbnails

The default setting when using the controlNavThumbs setting in the Nivo Slider uses the controlNavThumbsSearch and controlNavThumbsReplace settings to generate the thumbnail url’s. Basically it takes the url for each image, looks for whatever is defined in controlNavThumbsSearch (default “.jpg”) and replaces it with whatever is defined in controlNavThumbsReplace (default “_thumb.jpg”) and uses this new url for the thumbnail.

So for example if you have “images/slide1.jpg” as your image, the Nivo Slider script will generate the thumbnail url as “images/slide1_thumb.jpg”. This is the default functionality anyway and can be changed to your liking. So let’s see it in action. The HTML:

<div id="slider">
    <img src="images/up.jpg" alt="" />
    <img src="images/monstersinc.jpg" alt="" />
    <img src="images/nemo.jpg" alt="" />
    <img src="images/walle.jpg" alt="" />
</div>

Default HTML there. Nothing to worry about. Then we would use this setting in the Javascript:

$('#slider').nivoSlider({
    controlNavThumbs:true
});

Finally the most important bit. The CSS required to make the thumbnails is where most people trip up (by default the thumbnail images are hidden):

#slider .nivo-controlNav {
	position:absolute;
	bottom:-70px; /* Put the nav below the slider */
}
#slider .nivo-controlNav img {
	display:inline; /* Unhide the thumbnails */
	position:relative;
	margin-right:10px;
}

Note that these CSS styles will conflict with the “bullet” styles used in the “style-pack”. So only use one or the other, not both.

Using the image “rel” Attribute

The other option when using thumbnails with the Nivo Slider (v2.0+) is to use the controlNavThumbsFromRel setting. This simply generates the thumbnail url from the “rel” attribute in your images. So for exmaple:

<div id="slider">
    <img src="images/up.jpg" alt="" rel="images/up_thumb.jpg" />
    <img src="images/monstersinc.jpg" alt="" rel="images/monstersinc_thumb.jpg" />
    <img src="images/nemo.jpg" alt="" rel="images/nemo_thumb.jpg" />
    <img src="images/walle.jpg" alt="" rel="images/walle_thumb.jpg" />
</div>

Then in your Javascript you would do the following:

$('#slider').nivoSlider({
    controlNavThumbs:true,
    controlNavThumbsFromRel:true
});

Now you can have even more control over your thumbnails. Note that the CSS above applies for both ways of using thumbnails.

Conclusion

So that’s how you use thumbnail control navigation in the Nivo Slider. If you need any more help then let me know in the comments.

Download and Setup

First off download the Nivo Slider and put it in your WordPress theme folder somewhere (for instance in “scripts/nivoslider”). You can put the CSS file in a separate folder if you wish but for simplicity I am just going to leave the contents of the download in the same folder. I’m also assuming here that you have your images in the “images” folder in your theme.

The HTML

Setting up the HTML for the slider is almost exactly the same as doing it in a normal HTML page. Something like the following:

<div id="slider">
	<img src="<?php bloginfo("template_url"); ?>/images/slide_1.jpg" alt="" />
	<img src="<?php bloginfo("template_url"); ?>/images/slide_2.jpg" alt="" />
	<img src="<?php bloginfo("template_url"); ?>/images/slide_3.jpg" alt="" title="This is an example of a caption" />
	<img src="<?php bloginfo("template_url"); ?>/images/slide_4.jpg" alt="" />
</div>

Note that images can have links and captions come from the images “title” attribute. We use the WordPress bloginfo() function to make sure we have the proper path to our images.

The PHP & Javascript

On to the fun part. Here is the code first for you “copy & pasters”.

<!-- Include jQuery -->
<?php wp_enqueue_script('jquery'); ?>
<?php wp_head(); ?>
<!-- Include the Nivo Slider CSS file -->
<link rel="stylesheet" href="<?php bloginfo("template_url"); ?>/scripts/nivoslider/nivo-slider.css" type="text/css" media="screen" />
<!-- Include the Nivo Slider JS file -->
<script src="<?php bloginfo("template_url"); ?>/scripts/nivoslider/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<!-- Set up the Nivo Slider -->
<script type="text/javascript">
jQuery(window).load(function() {
	jQuery('#slider').nivoSlider();
});
</script>

First off we are going to include jQuery the right way by using the WordPress wp_enqueue_script() function. Note that this has to be done before the wp_head() function.

Next we include the Nivo Slider CSS and JS files using the bloginfo() function to ensure the correct paths are used. Remember to alter the paths if the folder structure is different in your theme.

Finally we set up the jQuery script to load the Nivo Slider. Note that we need to use “jQuery” rather than just “$” as jQuery is in “no-conflict” mode. Now you should have a lovely slider on your WordPress site.

HTML Forms

One of the main problems with “AJAXifying” a form is that it doesn’t degrade nicely. If a user has Javascript turned off, all of a sudden your form’s are unusable. So what we ideally want to do is have perfectly normal working HTML forms that submit things to a PHP script, then drop some Javascript on top so that only users with Javascript turned on will get the benefit without punishing the minority. For those who are technically educated we want the Javascript to be completely decoupled from the HTML and PHP.

So when creating our HMTL forms we just create a bog standard working form:

<form id="some_form" method="post" action="process.php">
    <input type="text" id="data" name="data" value="" />
    <input type="submit" value="Submit" />
</form>

The PHP

The only downside to the process we are going to create here is that messaging has to be done in two different ways. This means the PHP has to account for both AJAX and non-AJAX requests and the different ways they pass data. Unfortunately at the moment there is no easy solution for this so we just have to work through it.

if(empty($_SERVER['HTTP_X_REQUESTED_WITH']) || strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest')
{
    //Do non AJAX processing here...
} else {
    //Do AJAX processing here...
}

The one thing we do want to do if we are processing an AJAX request is make the data format we return as easy to use as possible. So I recommend using JSON. Not only does jQuery have built in parsing ability for JSON but PHP also makes it very easy to format and return a JSON response.

$response = array();
$response['error'] = true;
$response['message'] = '';
 
//Do some processing. If there is an error...
$response['message'] = 'This is an Error returned by the server';
 
//... else ...
$response['data'] = $data;
$response['error'] = false;
 
echo json_encode($response);

Here we use a simple array with an “error” boolean value and a “message”. You can add any other data you want to the array (like the “data” we added above) and echo an output using PHP’s json_encode function. It’s that simple. You’ll see why it’s worth doing this when we get into the Javascript below.

The Javascript

Remember what we are trying to do here is make the Javascript completely decoupled from the HTML and PHP. So what we are going to do is rig up all of the forms on the page to automatically be submitted using AJAX and fire off events for each form when something happens. This way we can simply hook into these form events to process what is happening.

Note that below we are using the jQuery Form plugin which provides us with the lovely ajaxSubmit function.

$("form").submit(function(e) {
	e.preventDefault();
	var form = $(this);
	form.ajaxSubmit({
		dataType: 'json',
		beforeSubmit: function() {
			var event = jQuery.Event('form:beforeSubmit');
			form.trigger(event);
			if(event.isPropagationStopped())
				return false;
		},
		beforeSend: function() {
			form.trigger('form:beforeSend');
		},
		success: function(json) {
			form.trigger('form:success', [json]);
		},
		error: function(response, status, error) {
			form.trigger('form:error', [response, status, error]);
		},
		complete: function() {
			form.trigger('form:complete');
		}
	});
	return false;
});

As you can see this small piece of Javascript rigs up all the forms on the page to be submitted using AJAX and trigger certain events during the process. The beforeSubmit event is a bit more complex as we want to be able to cancel the AJAX request in the event of form validation failing. So this is the Javascript we just drop into the page. Totally decoupled.

“But what do we do with it?” I hear you asking. Well it means that now all you have to do is hook in to those events for each form if you want to do some something with it. For example:

$('#some_form')
	.bind('form:beforeSubmit', function(event){
		//Do your validation here...
		if(!validated){
			event.stopPropagation();
		}
	})
	.bind('form:beforeSend', function(){
		//Show a loading message...
	})
	.bind('form:success', function(event, response){
		if(response.error){
			alert('<strong>Error:</strong> ' + response.message);
		} else {
			//Update UI...
		}
	})
	.bind('form:error', function(event, response, status, error){
		alert('<strong>Error:</strong> An error occurred while trying to save');
	})
	.bind('form:complete', function(){
		//Hide loading message...
	});

How cool is that? As you can see this makes attaching and processing form submissions via AJAX far easier. You don’t even have to use all of the events, only use the ones you need.

Two things to note. We use the event.stopPropagation() function in the “:beforeSubmit” event if we need to cancel the request. Also in the “:success” event we can use response.error and response.message. This is because we formatted our response in JSON in the PHP above. Any data that you put the PHP response array can now be access in the Javascript using “response.{data}”.

Conclusion

I would encourage all serious web developers using AJAX in their web apps to consider using a streamlined approach like the one outlined here when “AJAXifying” their forms. Clean, maintainable, reusable and elegant.

Credit where credit is due, this article builds upon the jQuery Evented Programming Primer article over at orderedlist.com and would not be here if it wasn’t for amazing guys like them helping us out by sharing their knowledge.

I’m aware there are already some good plugins for adding breadcrumbs in WordPress but I’m going to show you how to do it the good old fashioned way.

function get_breadcrumbs()
{
	global $wp_query;
 
	if ( !is_home() ){
 
		// Start the UL
		echo '<ul class="breadcrumbs">';
		// Add the Home link
		echo '<li><a href="'. get_settings('home') .'">'. get_bloginfo('name') .'</a></li>';
 
		if ( is_category() ) 
		{
			$catTitle = single_cat_title( "", false );
			$cat = get_cat_ID( $catTitle );
			echo "<li> &raquo; ". get_category_parents( $cat, TRUE, " &raquo; " ) ."</li>";
		}
		elseif ( is_archive() && !is_category() ) 
		{
			echo "<li> &raquo; Archives</li>";
		}
		elseif ( is_search() ) {
 
			echo "<li> &raquo; Search Results</li>";
		}
		elseif ( is_404() ) 
		{
			echo "<li> &raquo; 404 Not Found</li>";
		}
		elseif ( is_single() ) 
		{
			$category = get_the_category();
			$category_id = get_cat_ID( $category[0]->cat_name );
 
			echo '<li> &raquo; '. get_category_parents( $category_id, TRUE, " &raquo; " );
			echo the_title('','', FALSE) ."</li>";
		}
		elseif ( is_page() ) 
		{
			$post = $wp_query->get_queried_object();
 
			if ( $post->post_parent == 0 ){
 
				echo "<li> &raquo; ".the_title('','', FALSE)."</li>";
 
			} else {
				$title = the_title('','', FALSE);
				$ancestors = array_reverse( get_post_ancestors( $post->ID ) );
				array_push($ancestors, $post->ID);
 
				foreach ( $ancestors as $ancestor ){
					if( $ancestor != end($ancestors) ){
						echo '<li> &raquo; <a href="'. get_permalink($ancestor) .'">'. strip_tags( apply_filters( 'single_post_title', get_the_title( $ancestor ) ) ) .'</a></li>';
					} else {
						echo '<li> &raquo; '. strip_tags( apply_filters( 'single_post_title', get_the_title( $ancestor ) ) ) .'</li>';
					}
				}
			}
		}
 
		// End the UL
		echo "</ul>";
	}
}

We then include the following code on any pages you want breadcrumbs to appear:

<?php get_breadcrumbs(); ?>

The CSS Code

The CSS code is just adding some simple styling so that the links appear inline. This can be styled as you wish.

ul.breadcrumbs {
	list-style: none;
	padding: 0;
	margin: 0;
	font-size:12px;
}
ul.breadcrumbs li {
	float: left;
	margin: 0 5px 0 0;
	padding: 0;
}

The Explanation

So what are we doing here? Well lets start at the start.

• First off don’t show breadcrumbs if it’s the homepage. If it’s not we add our first link which is to the top level homepage.
• We then have a simple set of elseif statements which cover us for all the different situations we might find ourselves in. Some are fairly self explanatory like the seach, 404 and archive sections.
• If it is a category we simply find the category ID then get list the parents of the current category. WordPress helps us with this by providing a “get_category_parents()” function.
• If we are on a single page it gets a bit more in-depth. We have to find the category ID but in a slightly different way to above. However once you get the category ID it’s just the same method as above plus the addition of the title of the page you are on.

Now pages are slightly more in depth but nothing too complex:

• First off get the page title. Easy.
• We then find the ancestors of the page and reverse the order of them. Thankfully WordPress has a get_post_ancestors() function making our life much easier. The next line just adds the current post to the array of ancestors.
• Finally we use a “foreach” loop to cycle through all of the ancestors and output them. The if statement in the loop makes sure that the last ancestor (the current page) doesn’t have a link.

So there you have it. Fully customizable, valid breadcrumbs in WordPress.