A perfect example of this can be found on this site through the use of the Nivo Slider and WP Attachments slideshow setup, which only gets loaded on the homepage and the individual work pages. I use two variations of the Nivo Slider script functionality, with the homepage slideshow having a different transition speed, pause time and randomizing the slides than the slideshow functionality used throughout the work section.

Using the tutorial on Using Nivo Slider and WordPress Attachments to Create an Easy to Use Slideshow, this example will show you how to load the script and functionality on your homepage only, but I will add the example used on this site for loading different variations on separate pages at the end of the post.

Let’s start by creating a new php file in your theme directory called “hp-slideshow.php” and paste in the following code:

<!-- jQuery Script -->
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/FILELOCATION/jquery-1.4.4.min.js"></script>
 
<!-- Nivo Slider Script -->
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/FILELOCATION/jquery.nivo.slider.pack.js"></script>
 
<!-- Nivo Slider Function -->
<script type="text/javascript">
$(window).load(function() {
	var total = $('#DIVNAME img').length;
	var rand = Math.floor(Math.random()*total);
	$('#DIVNAME').nivoSlider({
		effect:'fade', //Specify sets like: 'fold,fade,sliceDown'
		animSpeed:600, //Slide transition speed
		pauseTime:6000,
		directionNav:false, //Next and Prev
		controlNav:false, //1,2,3...
		pauseOnHover:false, //Stop animation while hovering
		captionOpacity:1, //Universal caption opacity
		startSlide:0 //Set starting Slide (0 index)
	});
});
</script>

Normally you would place this whole piece of code before the closing body tag in your themes footer.php file, but if I’m using variations of the same script function I like to create each as its own php file and use a php includes within the conditional statement, so I make sure that the script code does not exist in the footer. Instead, you will want to add the following conditional statement above the closing body tag:

<?php if (is_home()) {?>
	<?php include(TEMPLATEPATH . '/hp-slideshow.php'); ?>
<?php }?>

This statement will load the contents of the hp-slideshow.php file only if the user is on the site homepage, preventing it from loading throughout the rest of the site when not necessary.

If you want to load the script on multiple pages, or as this example shows, loading variations of the script on different pages, use the following conditional statement:

<!-- load script on homepage -->
<?php if (is_home()) {?>
	<?php include(TEMPLATEPATH . '/hp-slideshow.php'); ?>
<?php }?>
 
<!-- load script on single post pages -->
<?php if (is_single()) {?>
	<?php include(TEMPLATEPATH . '/post-slideshow.php'); ?>
<?php }?>

To view more WordPress conditional tags that can be used, please visit the WordPress Codex.

The end result is pretty simple: create a post, upload some images and order them, then publish. The images that have been attached to the post will be put into a slideshow which you can modify with a few simple edits to Nivo Sliders options. The sizes of the images also conform to what you have specified in the media settings in the WordPress dashboard, so you should take that into consideration when planning your slideshow.

Let’s take a look at how I’ve set this up for my work portfolio.

Adding jQuery and Nivo Slider to Your Theme

First off, you need to download jQuery and Nivo Slider. I would recommend reading through the usage documentation for Nivo Slider, and maybe building an HTML example to see how it all works.

After downloading and copying the scripts into my theme folder, I added it to the footer right before the closing body and html tags. There are quite a few options available to customize how Nivo Slider acts, try them out and see what works for you. The following code is how I have things setup. Be sure to change the FILELOCATION and DIVNAME in two areas to match up with the path to your scripts as well as the div that your slideshow will be placed within.

<!-- jQuery Script -->
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/FILELOCATION/jquery-1.4.4.min.js"></script>
 
<!-- Nivo Slider Script -->
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/FILELOCATION/jquery.nivo.slider.pack.js"></script>
 
<!-- Nivo Slider Function -->
<script type="text/javascript">
$(window).load(function() {
	var total = $('#DIVNAME img').length;
	var rand = Math.floor(Math.random()*total);
	$('#DIVNAME').nivoSlider({
		effect:'fade', //Specify sets like: 'fold,fade,sliceDown'
		animSpeed:600, //Slide transition speed
		pauseTime:6000,
		directionNav:false, //Next and Prev
		controlNav:false, //1,2,3...
		pauseOnHover:false, //Stop animation while hovering
		captionOpacity:1, //Universal caption opacity
		startSlide:0 //Set starting Slide (0 index)
	});
});
</script>

Creating the Function

Once you have the two scripts added into your footer.php file we can create the function need. This can be added into your functions.php file, or directly into the page or post template that you want to use your slideshows.

<?php
 
function nivo_get_images($size = 'large', $limit = '0', $offset = '0') {
	global $post;
 
	$images = get_children( array('post_parent' => $post->ID, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => 'ASC', 'orderby' => 'menu_order ID') );
 
	if ($images) {
 
		$num_of_images = count($images);
 
		if ($offset > 0) : $start = $offset--; else : $start = 0; endif;
		if ($limit > 0) : $stop = $limit+$start; else : $stop = $num_of_images; endif;
 
		$i = 0;
		foreach ($images as $image) {
			if ($start <= $i and $i < $stop) {
			$img_title = $image->post_title;   // title.
			$img_description = $image->post_content; // description.
			$img_caption = $image->post_excerpt; // caption.
			$img_url = wp_get_attachment_url($image->ID); // url of the full size image.
			$preview_array = image_downsize( $image->ID, $size );
 			$img_preview = $preview_array[0]; // thumbnail or medium image to use for preview.
 
 			?>
 
			<img src="<?php echo $img_preview; ?>" alt="<?php echo $img_caption; ?>" />
 
			<?
 
			}
			$i++;
		}
 
	}
}
?>

Adding the Slideshow to Your Template

Once you have created the function, all that’s left to do is add a small line of php into the area in which you want your slideshow to appear. You can set the size of the image by replacing ‘large’ in the example with ‘medium’ or ‘thumb’ and it will resize based on your media settings.

<?php nivo_get_images('large','0','0'); ?>

Once you have all of this done, you should be able to create a new post or page, and when uploading images, drag and drop them into your preferred order, give them title or alt tags, and let the scripts and functions handle the rest.

UPDATE: Styling the Slideshow with CSS

I realized late last night that I completely forgot to add the styling. If you had gone through the usage documentation on the Nivo Slider website you would have gone through this step already. If not, here’s an example of the simple CSS that I use for my slideshow. The third item (#DIVNAME img) is used to prevent all the images from displaying as the page loads, and adds a loading image, which you can replace with your own customized animated GIF.

#DIVNAME-bg {
	margin-top:8px;
	padding:5px;
	background-image:url(PATHTOTHEMEIMAGES/filename.png);
	background-repeat:repeat;
}
 
#DIVNAME {
	width:620px;
	height:620px;
}
 
#DIVNAME img {
	display:none;
	background:url(PATHTONIVOIMAGES/loading.gif) no-repeat 50% 50%
}

One thing that kept coming to mind were taxonomies. I’ve seen several sites do a great job at using them to allow a user to browse content in a variety of different ways, and that was something I knew that I wanted for visitors of my site as well. Several large company sites that I’ve visited over the years offer ways to browse their work by color schemes, layout type and more, and I always liked the idea of being able to view things based on those terms.

My portfolio was setup using three basic taxonomies: Design Styles, Layout Styles and Tools and Methods. Each of these main categories allows for infinite ways to further breakdown the organization of the content. So when a user visits my site and wants to view the work I’ve done that uses the color blue, then they can. If they want to view two or three column layouts, they can.

The selection of content that is currently available in the portfolio is small, but is just a start. In the coming weeks I plan on digging through the work I’ve done over the last 10 years and adding pieces that I really like, enjoyed working on, or that I feel has pushed me creatively.

Please take a look through my work and feel free to leave a comment here, or send me some website feedback by filling out this form.

This new theme is nowhere near complete. I’m currently working through ideas and concepts for how my portfolio would functions, while looking to dig deeper into some of the new features of WordPress 3.0, and the soon to be released 3.1. The first round of development focused primarily on the blog and site pages, and the next round will be all about my portfolio.

For now, the portfolio will have to wait for a short time while I work on some other projects. In the meantime, I’m going to try and make a better effort on blogging more, trying to share more resources and hopefully learn more from readers. So enjoy the new site, and feel free to send me your feedback.

A comparison of last years blog, and the new one

The idea of a whole new Macbook Air had particularly peaked my interest, as I was doing my own bit of speculation as to where they would go with it. Was there really a specific market that they hadn’t tapped into somewhere in between their Macbook and iPad line-up?

I was initially impressed with the new and improved Air product, but on my way out of the office I ran into a friend who had also been interested in this product as he was contemplating purchasing his first Macbook, and he said something to me that I never fully contemplated in my initial excitement. He simply said something along the lines of “I would want at least the 256GB model, and $1600 is a little steep”. This statement got me thinking more about the price point and overall specs of the Air on my drive home, and I started to think about what a consumer actually got at that price point in comparison to the other Macbook options.

As nice as it sounds to have this ultra thin, extremely light, beautiful looking machine, I think Apple has yet to hit the right mark on this product line. For the base model at a $1049 price point you get a slick 11.6 inch machine with 2GB of ram, 64GB of flash storage, a 1.4GHz Intel Core 2 Duo processor, and up to hours of battery life, all weighing in at a mere 2.3 pounds (view all tech specs). Sounds pretty good right?

Compare that to the Macbook. The sexy little white machine features a 13.3 inch display, 2GB of ram, 250GB of storage space, a 2.4GHz Intel Core 2 Duo processor, up to 10 hours of battery life, and weighs 4.7 pounds (view all tech specs). The price point? Equally priced at $1049.

The new Macbook Air comes in two sizes; 11.6 inch and 13.3 inch

Now, I know some people will quickly point out a few features of the Air that are not available on the Macbook, such as the instant-on and up-to 30 day standby mode, or the face time camera, but are they enough to swing a purchasing decision away from what I feel is a better bang for the buck option in the Macbook? Maybe for some, but I still feel that the majority of users would opt for the slightly larger screen size, and more specifically the significant amount of additional storage space.

Sure the boot-up time may be better, but after using my 17 inch Macbook Pro for the last year, I have no reason to complain about the quick startup time. My machine is booted up and ready to go in about the time it would take me to pour a coffee and get comfortable in my office chair, and that includes automatic loading of my most used software such as Photoshop, Firefox, Suitcase Fushion, Mail, Coda and iTunes.

When I take into consideration the amount of storage space that I would required, even the 256GB option would be a hard thing to deal with, as my current Macbook Pro has 500Gb, 230 of which is currently being used for photos, music, and other work related files, let alone having to settle with 64GB. This would require me to carry an external hard drive for all that stuff.

And I don’t think the difference in the weight of each machine should be an issue. I carry around a 6.6 pound, 17 inch model, and have no complaints (I went from a monsterous Dell machine that feels like a behemoth in comparison), and if the difference between carrying 2.3 pounds versus 4.7 pounds is a big factor, I would recommend investing your hard earned money into a yearly gym membership instead.

At the end of the day, what was an initially high level of excitement for a new Apple product turned into the realization that for most consumers there was already a much better machine available in the Macbook at the exact same price point. I still think there’s a very small market for the new Air, but it’s not something that I could see people lining up in hopes to get one right away.

I’d love to hear your thoughts on the Macbook Air, so please leave a comment below.

There are a few good functions out there to help in hiding some of those areas, but I recently came across an incredible post at Six Revisions that has allowed me to further customize what individuals can and can’t do in the administration area, so be sure to check out the full post, as it provides some great resources.

Removing Post and Page Modules

I’m currently working on a new project that involves lots of automation, and there are quite a number of modules on both the post and page editing areas that are not required. Instead of going into the screen options each time a new user account is created, I’m using the following function to hidden certain modules on all accounts in the system.

The following piece of code includes all the modules that can be hidden from each editor, nicely commented so you can customize your function to suit your specific needs.

function customize_meta_boxes() {
 
	/* Removes meta boxes from Posts */
	remove_meta_box('categorydiv','post','normal'); // remove categories module
	remove_meta_box('tagsdiv-post_tag','post','normal'); // remove tags module
	remove_meta_box('postexcerpt','post','normal'); // remove excerpt module
	remove_meta_box('trackbacksdiv','post','normal'); // remove trackbacks module
	remove_meta_box('postcustom','post','normal'); // remove custom fields module
	remove_meta_box('commentstatusdiv','post','normal'); // remove discussions module
	remove_meta_box('commentsdiv','post','normal'); // remove comments module
	remove_meta_box('authordiv','post','normal'); // remove author module
	remove_meta_box('revisionsdiv','post','normal'); // remove revisions module
 
	/* Removes meta boxes from pages */
	remove_meta_box('postcustom','page','normal'); // remove custom fields module
	remove_meta_box('trackbacksdiv','page','normal'); // remove trackbacks module
	remove_meta_box('commentstatusdiv','page','normal'); // remove discussion module
	remove_meta_box('commentsdiv','page','normal'); // remove comments module
	remove_meta_box('authordiv','page','normal'); // remove author module
}
 
add_action('admin_init','customize_meta_boxes');

Again, a big thanks to Six Revisions for this incredible post. The information provided there will be a big help in created a much easier administration experience for clients, which was already pretty great to begin with!

Internal Linking

While I’m surprised that it took this long to have this feature added to the core of WordPress, I’m excited that this will now finally be a standard feature. This is a standard feature of just about every other CMS product that I’ve used, and even though the options, customization and general ease of use within WordPress is far superior than any other product I’ve used, this was one significant area in which WordPress failed.

Sure, there are plugins that can add this functionality, but I’m always looking for ways to cut down on the amount of plugins I use, and would much rather have features in the core, or add it through the functions.php file. I’ve used plugins for this feature in the past, but the problem was that when pages were moved around in the navigation, particularly when making them child pages, the linking often times broke. I’m sure the team working on these features will accommodate for this and use this feature to take one large step towards a better CMS option.

Admin Bar

Having a toolbar on the front-facing website is one big step towards a more simple content creation and site administration system. Much like the toolbar available if you run a blog on WordPress.com, users will have the ability to access the main administration area sections if they are logged in.

With this feature, I’m hoping that the development team gives administrators the ability to determine which areas of the admin area are visible in this toolbar, as often times when building themes for clients I will hide items from the admin navigation for users roles below admin in a effort to prevent accidental setting changes, or to avoid confusion for those who simply want to edit and create content and will not understand the purpose of the other areas.

When Can We Expect 3.1?

The tentative release date for WordPress version 3.1 is mid-December, which is perfect for me. With a little time off from work between Christmas and New Years, I hope they make the planned release date and I can have plenty of time to get my feet wet with these new features.

To read more details about all the plans for WordPress 3.1 features read this post by WP Beginner, and for all future updates and news, check in on the WordPress Development Updates blog.

<?php $excerpt = strip_tags(get_the_excerpt());
// Limit $summary to how many characters?
 
$title_len = strlen($post->post_title); //get length of title
 
if($title_len <= 30){
	$limit=270; //calc space remaining for excerpt
}
else if($title_len <= 60){
	$limit=230; //calc space remaining for excerpt
}else if($title_len <= 75){
	$limit=180;
}
 
$summary = substr($excerpt, 0, strrpos(substr($excerpt, 0, $limit), ' ')) . '...';
echo '
 
'.$summary,'
 
';  ?>
<div class="da-more-link"><a href="<?php the_permalink(); ?>" title="Read Full Post: <?php the_title(); ?>">Read Full Post &raquo;</a></div>

The way this works is rather simple. The $title_len represents the length of the post title, while the $limit represents the excerpt length limit. In the first if statement, the title_len is less than 30 characters, then the excerpt will output 270 characters.

The next series of else if statement function in the same way, reducing the size of the excerpt as the title character counts increases. This example only displays 3 possible sizes, but add more else if’s if required.

The second portion of the code will create a summary by stripping the post and apply the conditional statement values, which will then be output onto the page wrapped in p tags. The first line of the summary also end with three periods, this can be changed to whatever you wish to output to end the excerpt text.

The read more link is the last line of the code, simply change the READ MORE LINK portion of the code to set the text for viewing the full post.

Often times a WordPress plugin will use a javascript, but the plugins load them into the wp_head tag. Moving a plugin javascript into the footer area requires a simple function, but is dependent on the plugin authors inclusion of the wp_print_scripts action. Search the plugins main php file for the wp_print_scripts item, and it will be closely followed by the script name.

The following piece of code uses a sample to move the javascript from the WP-Codebox plugin:

add_action('wp_enqueue_scripts', 'wp_codebox_scripts');
function wp_codebox_scripts() {
	wp_enqueue_script('codebox', plugins_url('wp-codebox/js/codebox.js'), array('jquery'), '2.50', true);
	wp_localize_script('codebox', 'codebox', array(
		'ajax_url' => plugins_url('wp-codebox/wp-codebox.php'),
		'text_wait' => __('Your last request is still being processed. Please wait a while ...', 'codebox'),
	));
}

Before inserting the code into the functions.php file of the WordPress theme, open your theme footer.php and check to see if it contains the following line of code, if not, then add it above the closing body tag. Note: both the wp_header and wp_footer are used by a plugin file to insert CSS and javascript code into your theme.

<?php wp_footer(); ?>

On lines one and two of the full function, the first line will add an action to hook into the wp_enqueue_script, and replace it with an action of your own choosing, in this case wp_codebox_scripts. Then on line two, you specify the name of your newly created action to register it as a function, as seen in the following example:

add_action('wp_enqueue_scripts', 'wp_codebox_scripts');
function wp_codebox_scripts() {

Navigate into the plugin folder and open the main php file and do a search for wp_print_scripts. This function will only be possible if it is available in the plugin structure. In the wp-codebox.php file, the print scripts action can be found on line 61, and a little further down on line 67 we see the line of code that includes the wp_enqueue_script which also contains the script name and the path to the plugin javascript file:

wp_enqueue_script('codebox', get_bloginfo ( 'wpurl' ) . '/wp-content/plugins/wp-codebox/js/codebox.js', array('jquery'), '0.1');

Make note of the script name and path to the javascript file and insert it into line 3 of the full function code (note: because the function uses a plugin_url reference, you should not add the wp-content and plugins slugs as part of the path to the javascript file):

wp_enqueue_script('codebox', plugins_url('wp-codebox/js/codebox.js'), array('jquery'), '2.50', true);

On line 4 there is two areas that you would need to insert the script name, as seen in the following example. Line five also requires you to insert the plugin directory, as well as the main php file name:

wp_localize_script('codebox', 'codebox', array(
	'ajax_url' => plugins_url('wp-codebox/wp-codebox.php'),

Once you’ve added the proper script names and paths in the final function, refresh your site and take a look at the source code. You should see that the call to the plugin javascript is located in the footer, as opposed to the header.

Disabling the plugin CSS allows you to copy it directly into the main theme style sheet, effectively removing one or more HTTP requests on your site. Although a handful of recent WordPress plugins have begun to offer the option to disable its CSS through its configuration, most plugins still place a call to its CSS file inside the wp_header tag. Disabling the default CSS file requires a simple function, but is dependent on the plugin authors inclusion of the wp_print_styles action.

Search the plugins main php file in the plugin folder for the wp_print_styles item, and it will be closely followed by the script name. The following piece of code uses a sample to disable the default CSS file for the wp-pagenavi plugin:

add_action( 'wp_print_styles', 'my_deregister_styles', 100 );
function my_deregister_styles() {
	wp_deregister_style( 'wp-pagenavi' );
}

Setting Up the Function

Before inserting the code into the functions.php file of the WordPress theme, open your theme header.php and check to see if it contains the following line of code, if not, then add it in the header tag. Note: the wp_header tag is used by plugins to load resources and is required for them to function.

<?php wp_header(); ?>

Navigate into the plugin folder and open the main php file and do a search for wp_enqueue_style. This function will only be possible if it is available in the plugin structure. In the wp-pagenavi.php file, the print scripts action and style name can be found on line 204:

wp_enqueue_style('wp-pagenavi', $css_file, false, '2.70');

In the first argument in the enqueue for the plugin, the name of the style is wp-pagenavi. Copy this name and paste it into the wp_deregister_style line of the full function, as shown in the following example:

wp_deregister_style( 'wp-pagenavi' );

Deregistering Multiple Plugin CSS Files

If you have multiple plugins that use the wp_enqueue_style action, you can add multiple instances of the wp_deregister_style in one single function with the following sample:

add_action( 'wp_print_styles', 'my_deregister_styles', 100 );
function my_deregister_styles() {
	wp_deregister_style( 'wp-pagenavi' );
	wp_deregister_style( 'NextGEN' );
	wp_deregister_style( 'codebox' );
}