Blog: Tutorials, tips & Tools

Sortable design portfolio with WordPress 3.0, tags and jQuery

If you have many design projects, it is good to let your clients sort them by some criteria like type, industry etc.

This tutorial tells you how to build sortable portfolio like PROWEBDESIGN’s. We will also cover how to optionally add jQuery animation effects to the sorting script.

PROWEBDESIGN portfolio is made with WordPress 3.0.3 and is built upon Twenty Ten theme, so this is what we will refer to in this tutorial.

This tutorial assumes that you are fairly familiar with WordPress, FTP clients and web design.

Step 1: Install latest version of WordPress which includes Twenty Ten default theme on your server.

Step 2: After everything is in place and working, go to the wp-content -> themes folder, make a copy of Twenty Ten theme and rename it e.g. “myTheme”

Step 3: Activate myTheme (in your blog’s admin -> appearance -> themes section). Now any changes you make to myTheme files will show up in your browser.

Step 4:
First we will make sure that our portfolio gets sorted, and style it afterwards. So, let’s begin with creating a link to jQuery. The correct way to add jQuery to WordPress is called enqueue-ing. You can enqueue jQuery either from default location (it is already distributed with WordPress) or grab it from Google CDN. In this tutorial we will enqueue it from default location.

Open header.php file (remember that we are working on myTheme!).
Paste this code somewhere between <head> and </head>, but take care to past it BEFORE wp_head(); hook:

<?php if (!is_admin()) { wp_enqueue_script("jquery"); }?>

This bit of code enqueues jQuery outside of admin area. Upload header.php to the server (if you were editing it locally).

Reload your theme in the browser, and view source to make sure that a link to jQuery did appear in the head section.

Step 5:
Open footer.php file and paste this code somewhere after </footer> tag, but before wp_footer(); hook.

<script type="text/javascript">
jQuery(document).ready(function($) {
		$('#filters a').click(function(e){
		e.preventDefault();
		var filter = $(this).attr('id');
		$('#sortable-portfolio div').show();
		$('#sortable-portfolio div:not(.' + filter + ')').hide();
	});
});
</script>

Upload footer.php to the server.

Step 6:
In admin panel of your blog create a Portfolio category. Then create several posts in this new category. To style posts nicely (later on) we will be using custom excerpts. So, for now just type a paragraph of “Lorem ipsum” in excerpt field of each post of Portfolio category.

Step 7:
Assign tags to each post in Portfolio category. Tags should reflect your sorting criteria. In this tutorial we will sort web design projects from logo design projects. So, add tags ” web design” to some posts and “logo design” to other posts. Now, if you look at the source code of Portfolio category, you’ll see that every post has tag-web-design or tag-logo-design in its class attribute

Step 8:
Now we will insert the actual sorting links into category page. Open category.php and insert this code under the page title:

<?php	if(is_category(1)){?>
<div id="filters">
	<a href="#">all projects</a> | <a href="#" id="tag-web-design">web design</a> | <a  href="#" id="tag-logo-design">logo design</a>
</div>
<?php } ?>

Take care to change category ID in if(is_category(1)) to the actual ID you have on your category!!

Then, also in category.php change exactly this line of code

get_template_part( 'loop', 'category' );
				?>

into this:

?>
<div id="sortable-portfolio">
<?php
	get_template_part( 'loop', 'category' );
?></div>

Upload category.php to your server.

Step 9:
Now we will rearrange the way excerpts are shown in Portfolio category. Open loop.php
Right under the loop

<?php while ( have_posts() ) : the_post(); ?>

insert this code:

<?php if (is_category(1)) : // How to display posts in Portfolio CATEG ?>
	<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
		<h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
		<?php the_excerpt(); ?>
	</div><!-- #post-## -->

Right below inserted code you should have the following statement that shows posts in Gallery category:

<?php /* How to display posts in the Gallery category. */ ?>
<?php if ( in_category( _x('gallery', 'gallery category slug', 'twentyten') ) ) : ?>

You should change it into this, otherwise you will get an unexpected T_ENDWHILE error:


<?php /* How to display posts in the Gallery category. */ ?>
<?php elseif ( in_category( _x('gallery', 'gallery category slug', 'twentyten') ) ) : ?>

*Note elseif instead of if.
Upload loop.php to the server.
At this point you should be able to do the sorting!

Step 10:
Next step is to add some CSS styling to the excerpts and sorting links.
You can style excerpts using values of body class attribute. Your category page will have category-portfolio value in its body class. So, you can write a style for your excerpts like this:


.category-web-design .post {
   background:#F2EFEC;
   border:1px solid #CFCBB1;
   float:left;
   margin-right:20px;
   padding:10px;
   width:320px;
}

This style will give you 2 columns of project excerpts. If you want to show them one per row, or 3 per row – just change the width.
You can also easily insert pictures in the excerpts from any location on the web, or from your wp-uploads.

You can also display your sorting links in an unordered list, instead of inline.

Step 10 (optional):
You can also add jQuery animation to the sorting script.
Click here to open jQuery documentation. There you have a list of possible animation effects. Applying them is very easy. In footer.php, where we have pasted the sorting script, just substitute for starters

$('#sortable-portfolio div').show();

with

$('#sortable-portfolio div').fadeIn();

and

$('#sortable-portfolio div:not(.' + filter + ')').hide();

with

$('#sortable-portfolio div:not(.' + filter + ')').fadeOut();

Go to your browser and play with it. You can use other animation effects, set duration, easing, etc.

Have fun.