Adding this feature to a site is quite easy, but for those of you who are not comfortable modifying your WordPress theme files can use a plugin called Dynamic To Top by Matt Varone, who also released the jQuery plugin that we’ll use in the following tutorial to add this functionality manually.

To add this manually to your site instead of using a plugin visit Matt’s site and download the script, which also includes your CSS, image and the optional jQuery Easing plugin. When adding the easing plugin the page will quickly scroll up the page in a nice, fluid motion whereas without it the page will make an instantaneous jump back to the top.

Be sure to make note of where you are placing these and the other files in the theme as you’ll want to change the source path throughout this tutorial to match yours.

Let’s start by copying the 2 script files into your theme folder. Open your footer.php file and add the following 2 lines somewhere just above the closing body tag:

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/library/scripts/easing.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/library/scripts/jquery.ui.totop.min.js"></script>

<!-- Scroll to Top Function -->
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$().UItoTop({ easingType: 'easeOutQuart' });

});
</script>

Next, copy the three classes from the ui.totop.css file and add it to your themes style.css file or any other stylesheet that you’ve created and are using. Update the background image URL to the where you copied it within your theme.

#toTop {
display:none;
text-decoration:none;
position:fixed;
bottom:10px;
right:10px;
overflow:hidden;
width:51px;
height:51px;
border:none;
text-indent:100%;
background:url(library/images/ui.totop.png) no-repeat left top;
}

#toTopHover {
background:url(library/images/ui.totop.png) no-repeat left -51px;
width:51px;
height:51px;
display:block;
overflow:hidden;
float:left;
opacity:0;
-moz-opacity:0;
filter:alpha(opacity=0);
}

#toTop:active, #toTop:focus {
outline:none;
}

That’s it! Now as visitors browse through your site they will have a quick way to get back to the top, no matter how long your page is. Big thanks to Matt Varone for a nice light weight script that adds a great piece of functionality!

Version 1: August 2009

My very first design of this site, complete with portfolio screenshots displayed on Apple hardware, a common occurrence around this time. I learned a lot about WordPress while developing this one, but it never saw the light of day outside of a local development environment.

Version 2

Although there are some extremely basic design files for this version, they are quite bare and lacking in areas. I contemplated adding them, but decided against it.

Version 3: December 2009

The third iteration of my site, and the first one to make it to a live version. A lot of work and learning happened while trying to finds new and better ways to handle image galleries within WordPress. If I remember correctly the NextGen Gallery plugin was being used here.

Version 4: April 2010

This design came about after designing the logo itself. I wanted something considerably lighter than my past designs, but after a while I felt that I over killed the paint splashes and never took the design into a development area.

Version 5: May 2010

After learning more about variable excerpt lengths based on post title character counts I did this dark design, allowing for more posts to be visible by flowing them in a 2 column layout. The original idea here was to have a theme switcher for users, allowing them to browse using this theme, or the one shown in version 6.

Version 6: July 2010

A variation of version 5 that would have been 1 of 2 theme switcher options for users visiting my site. This design was fully developed and used to power this site for a while, however I never implemented the theme switcher option as I wanted to.

Version 7: October 2010

I would venture to guess that this design has had the most work put into it, and every now and then as I look through these past design I seem to want to refine it and actually use it for the site, however I don’t think I have a sufficient amount of content to do it justice. Given that it’s been two years since I designed this one and still like it, I may go back and touch it up, build in some nice user options and release it as a free theme.

Version 8: January 2011

This design was intended to be something fairly clean and easy to read while incorporating some grunge elements. This design powered my site for the last year and a bit, but I failed to continue to evolve it, and add new work items and content.

Version 9, 10, 11, 12, 13, 14 & 15: September 2011 – March 2012

The next seven version of my design are all quite similar to one another, mostly minor tweeks here and there, and sometimes changing between a light color scheme, to a dark one. I continued to modify the look of this one until I felt completely happy with it, then I could focus on adding more to my growing portfolio as well as blog about all the things I’ve learned about developing for WordPress along the way.

Version 9a

Version 9b

Version 10

Version 11

Version 12

Version 13

Version 14

Version 15

Version 16: April 2012

After being so close to completing and launching version 15 I had the idea to reduce the width of the content area and add a floating navigation, so this design came about. This was designed and developed in about a weeks time. I really liked the work and blog sections of the site, but struggled with the homepage, and as I was working on that design, the current version of my site came about.

Version 17

This is the current version of the site that you are now browsing. This one came out of nowhere, it originally started as redesign of the homepage of version 16. I moved the navigation back into the header, reduced the width of the content area to 840px, and have the header element float down the page as a user navigates through. Different than designs of the past, I started with the homepage, as this was an area that I always had difficulty with in the past as I always left it until the end. For the first time in a long time I am completely happy with how this theme came out, and have plans on adding new elements and evolving the site over time, especially as the content grows.

Let’s say you wanted to load jQuery on only your category and post pages, it would be like the following sample. The is_category will add it to any category on your site, while the is_singular will load it on the type specified, in this case, post.

<?php if( is_category() || is_singular('post') ) { ?>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<?php } ?>

The is_singular above is different from using the more often seen is_single. By using is_single, the script will be loaded onto all single pages types, this includes any custom post types you may be using.

A good example of this would be the script I’m using for my portfolio custom post type called PrettyPhoto which creates the gallery style images of my work. I only plan on using PrettyPhoto for my portfolio so I would want to create a conditional statement like this (be sure to change the source path to you script location):

<?php if( is_post_type_archive('portfolio') || is_singular('portfolio' ) ) { ?>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/FILELOCATION/jquery.prettyPhoto.js"></script>
<?php } ?>

The is_post_type_archive and is_singluar above have portfolio specified, which is the name of the custom post type as it is registered in my functions. PrettyPhoto will now only load when a visitor goes to my portfolio.

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 you can set this up.

Note: any reference to this being active on my site no longer apply, this post was written while using another theme which has since been replaced.

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 <a href="http://www.php.net/rand">rand</a> = Math.<a href="http://www.php.net/floor">floor</a>(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( <a href="http://www.php.net/array">array</a>('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 = <a href="http://www.php.net/count">count</a>($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%
}

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());
$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,'

';  ?>

<a href="<?php the_permalink(); ?>" title="Read Full Post: <?php the_title(); ?>">More&nbsp;&raquo;</a>

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' );
}

// Create the function to output the contents of our Dashboard Widget
function example_dashboard_widget_function() {

// Display whatever it is you want to show
echo ' INSERT SOMETHING HERE ';
}

// Create the function use in the action hook
function example_add_dashboard_widgets() {
wp_add_dashboard_widget('example_dashboard_widget', 'Site Documentation', 'example_dashboard_widget_function');
}

// Hoook into the 'wp_dashboard_setup' action to register our other functions
add_action('wp_dashboard_setup', 'example_add_dashboard_widgets' );

In the following example I have created a 2 column table with inline styles that features an unordered list that I normally use to create a tutorials and documentation module for each of my clients.

// Create the function to output the contents of our Dashboard Widget
function example_dashboard_widget_function() {

// Display whatever it is you want to show
echo '
<div id="docs-left" style="float:left;width:48%;">
<p style="font-size:12px;font-weight:bold;margin-top:0;color:#333333">Basic Tutorials
<ul style="padding: 0 0 0 18px">
<li style="list-style-type:disc"><a href="#" target="_blank">Basic Tutorial 1</a>
<li>
<li style="list-style-type:disc"><a href="#" target="_blank">Basic Tutorial 2</a>
<li>
<li style="list-style-type:disc"><a href="#" target="_blank">Basic Tutorial 3</a>
<li>
<li style="list-style-type:disc"><a href="#" target="_blank">Basic Tutorial 4</a>
<li>
</ul>
</div>
<div id="docs-right" style="float:right;width:48%;">
<p style="font-size:12px;font-weight:bold;margin-top:0;color:#333333">Advanced Tutorials
<ul style="padding: 0 0 0 18px">
<li style="list-style-type:disc"><a href="#" target="_blank">Advanced Tutorial 1</a>
<li>
<li style="list-style-type:disc"><a href="#" target="_blank">Advanced Tutorial 2</a>
<li>
<li style="list-style-type:disc"><a href="#" target="_blank">Advanced Tutorial 3</a>
<li>
<li style="list-style-type:disc"><a href="#" target="_blank">Advanced Tutorial 4</a>
<li>
</ul>
</div>
<div style="clear:both"></div>

';
}

// Create the function use in the action hook
function example_add_dashboard_widgets() {
wp_add_dashboard_widget('example_dashboard_widget', 'Site Documentation', 'example_dashboard_widget_function');
}

// Hoook into the 'wp_dashboard_setup' action to register our other functions
add_action('wp_dashboard_setup', 'example_add_dashboard_widgets' );