Using isotope with WordPress

There is probably a more ‘correct’ way to do this, but this I what I did to get ISOTOPE working. I have not figure out all of the ins and outs yet, but this got it working in a WordPress install.

Add the javascript files into your theme
Put the jquery and isotope javascript files in a folder called “js” in your theme.

Including the Javascript in the HEADER
Then put the following code in your header.php file, just before the </head> tag. Obviously, you will need to make sure that the file names and location match the files you have used.

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery-1.5.2.min.js"></script>
  <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.isotope.min.js"></script>

Note: isotope would not work until i included the <?php bloginfo(‘template_url’); to get the full path to these scripts. I am not sure why, but this was the missing link that took me a while to figure out.

ISOTOPE
On the page where you want isotope to work, you need to do the following:

Wrap all the items with one parent div ( have have used #container here), and ensure that each ‘item’ is also wrapped in a div (.box in the example below. note that the .box1, .box2 classes are just used to add some additional style to give the boxes different colours).

I added this code into the page.php file, just after the content. but this will work on any of the .php files used to represent a page or post:

<div id="container">
    <div class="box box1">a box</div>
    <div class="box box2">a box</div>
    <div class="box box3">a box</div>
    <div class="box box4">a box</div>
    <div class="box box2">a box</div>
    <div class="box box3">a box</div>
    <div class="box box1">a box</div>
</div> 

  <script type="text/javascript">
    $(function(){

      var $container = $('#container');

      $container.isotope({
        itemSelector: '.box'
      });

    });
  </script>

The CSS:

#container{position:relative; width:100%; overflow:hidden;}
.box{position:relative; width:100px; height:100px; margin: 10px;
     float:left; overflow: hidden; position: relative;}
.box1{background-color:Red;}
.box2{background-color:blue;}
.box3{background-color:orange;}
.box4{background-color:purple;}

ISOTOPE for blog posts
if you want to make this work for blog post layout, then you will need to edit loop.php. Wrap the whole of the loop with a parent div and then wrap each ‘post’ with the div class which can be passed to isotope.

This code below is a loop which has had this done. Whole thing wrapped with #content, and teh posts wrapped with .post-box. Note: i have only wrapped the main output of posts, and have not done it for all the output for archives etc.

<?php
/**
 * The loop that displays posts.
 *
 * The loop displays the posts and the post content.  See
 * http://codex.wordpress.org/The_Loop to understand it and
 * http://codex.wordpress.org/Template_Tags to understand
 * the tags used in it.
 *
 * This can be overridden in child themes with loop.php or
 * loop-template.php, where 'template' is the loop context
 * requested by a template. For example, loop-index.php would
 * be used if it exists and we ask for the loop with:
 * <code>get_template_part( 'loop', 'index' );</code>
 *
 * @package WordPress
 * @subpackage Starkers
 * @since Starkers 3.0
 */
?>

<div id="content">

<?php /* Display navigation to next/previous pages when applicable */ ?>
<?php if ( $wp_query->max_num_pages > 1 ) : ?>
		<?php next_posts_link( __( '← Older posts', 'twentyten' ) ); ?>
		<?php previous_posts_link( __( 'Newer posts →', 'twentyten' ) ); ?>
<?php endif; ?>

<?php /* If there are no posts to display, such as an empty archive page */ ?>
<?php if ( ! have_posts() ) : ?>
		<h1><?php _e( 'Not Found', 'twentyten' ); ?></h1>
		<p><?php _e( 'Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post.', 'twentyten' ); ?></p>
		<?php get_search_form(); ?>

<?php endif; ?>

<?php
	/* Start the Loop.
	 *
	 * In Twenty Ten we use the same loop in multiple contexts.
	 * It is broken into three main parts: when we're displaying
	 * posts that are in the gallery category, when we're displaying
	 * posts in the asides category, and finally all other posts.
	 *
	 * Additionally, we sometimes check for whether we are on an
	 * archive page, a search page, etc., allowing for small differences
	 * in the loop on each template without actually duplicating
	 * the rest of the loop that is shared.
	 *
	 * Without further ado, the loop:
	 */ ?>
<?php while ( have_posts() ) : the_post(); ?>

<?php /* How to display posts in the Gallery category. */ ?>

	<?php if ( in_category( _x('gallery', 'gallery category slug', 'twentyten') ) ) : ?>
			<h2><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 twentyten_posted_on(); ?>

<?php if ( post_password_required() ) : ?>
				<?php the_content(); ?>
<?php else : ?>
<?php
	$images = get_children( array( 'post_parent' => $post->ID, 'post_type' => 'attachment', 'post_mime_type' => 'image', 'orderby' => 'menu_order', 'order' => 'ASC', 'numberposts' => 999 ) );
	$total_images = count( $images );
	$image = array_shift( $images );
	$image_img_tag = wp_get_attachment_image( $image->ID, 'thumbnail' );
?>
					<a href="<?php the_permalink(); ?>"><?php echo $image_img_tag; ?></a>

				<p><?php printf( __( 'This gallery contains <a %1$s>%2$s photos</a>.', 'twentyten' ),
						'href="' . get_permalink() . '" title="' . sprintf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ) . '" rel="bookmark"',
						$total_images
					); ?></p>

				<?php the_excerpt(); ?>
<?php endif; ?>

				<a href="<?php echo get_term_link( _x('gallery', 'gallery category slug', 'twentyten'), 'category' ); ?>" title="<?php esc_attr_e( 'View posts in the Gallery category', 'twentyten' ); ?>"><?php _e( 'More Galleries', 'twentyten' ); ?></a>
				|
				<?php comments_popup_link( __( 'Leave a comment', 'twentyten' ), __( '1 Comment', 'twentyten' ), __( '% Comments', 'twentyten' ) ); ?>
				<?php edit_post_link( __( 'Edit', 'twentyten' ), '|', '' ); ?>

<?php /* How to display posts in the asides category */ ?>

	<?php elseif ( in_category( _x('asides', 'asides category slug', 'twentyten') ) ) : ?>

		<?php if ( is_archive() || is_search() ) : // Display excerpts for archives and search. ?>
			<?php the_excerpt(); ?>
		<?php else : ?>
			<?php the_content( __( 'Continue reading →', 'twentyten' ) ); ?>
		<?php endif; ?>

				<?php twentyten_posted_on(); ?>
				|
				<?php comments_popup_link( __( 'Leave a comment', 'twentyten' ), __( '1 Comment', 'twentyten' ), __( '% Comments', 'twentyten' ) ); ?>
				<?php edit_post_link( __( 'Edit', 'twentyten' ), '| ', '' ); ?>

<?php /* How to display all other posts. */ ?>

	<?php else : ?>

     <div class="post-box">

			<h2><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 twentyten_posted_on(); ?>

	<?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?>
			<?php the_excerpt(); ?>
	<?php else : ?>
			<?php the_content( __( 'Continue reading →', 'twentyten' ) ); ?>
			<?php wp_link_pages( array( 'before' => '' . __( 'Pages:', 'twentyten' ), 'after' => '' ) ); ?>
	<?php endif; ?>

				<?php if ( count( get_the_category() ) ) : ?>
					<?php printf( __( 'Posted in %2$s', 'twentyten' ), 'entry-utility-prep entry-utility-prep-cat-links', get_the_category_list( ', ' ) ); ?>
					|
				<?php endif; ?>
				<?php
					$tags_list = get_the_tag_list( '', ', ' );
					if ( $tags_list ):
				?>
					<?php printf( __( 'Tagged %2$s', 'twentyten' ), 'entry-utility-prep entry-utility-prep-tag-links', $tags_list ); ?>
					|
				<?php endif; ?>
				<?php comments_popup_link( __( 'Leave a comment', 'twentyten' ), __( '1 Comment', 'twentyten' ), __( '% Comments', 'twentyten' ) ); ?>
				<?php edit_post_link( __( 'Edit', 'twentyten' ), '| ', '' ); ?>

		<?php comments_template( '', true ); ?>

   </div><!-- close post-box-->

	<?php endif; // This was the if statement that broke the loop into three parts based on categories. ?>

<?php endwhile; // End the loop. Whew. ?>

<?php /* Display navigation to next/previous pages when applicable */ ?>
<?php if (  $wp_query->max_num_pages > 1 ) : ?>
				<?php next_posts_link( __( '← Older posts', 'twentyten' ) ); ?>
				<?php previous_posts_link( __( 'Newer posts →', 'twentyten' ) ); ?>
<?php endif; ?>

</div><!--close content-->

  <script type="text/javascript">
    $(function(){

      var $container = $('#content');

      $container.isotope({
        itemSelector: '.post-box'
      });

    });
  </script>

Got the basics. Was able to get it working basically by finding the right spot to put <div class=”post-box”> in loop.php

Whatever your isotope script says is what you’d use of course.
itemSelector: ‘.box’,

Obviously interested in any finer points though happy it’s working. Often the way, insn’t it. write a post, then find the answer! thanks.

Hey guys, I’ve gotten Isotope working on two WordPress blogs if you want to check it out, I’ve posted an article on how I did it here. http://rollyourowncreative.com/2011/09/using-isotope-jquery-plugin-in-wordpress-a-better-way-to-implement-isotope-in-wordpress/

There are links to both sites that I’ve got it working on there. One of them is a work in progress so will be down from time to time. Let me know if what I’ve written doesn’t help you and i’ll do my best to explain more clearly, I really like this plugin.