Title: Using isotope with WordPress
Last modified: August 19, 2016

---

# Using isotope with WordPress

 *  [russco2](https://wordpress.org/support/users/russco2/)
 * (@russco2)
 * [15 years, 3 months ago](https://wordpress.org/support/topic/using-isotope-with-wordpress/)
 * Hello there,
 * I’m trying to get isotope up and running on my WordPress site.
 * Isotope works fine on its own: [http://bit.ly/hklkK1](http://bit.ly/hklkK1)
 * But for some reason, which I can’t quite fathom, it doesn’t work in WordPress:
   [http://bit.ly/hG5yTG](http://bit.ly/hG5yTG)
 * Does anyone have any idea what I’m doing wrong?
 * Thanks all,
 * Russ

Viewing 6 replies - 1 through 6 (of 6 total)

 *  Thread Starter [russco2](https://wordpress.org/support/users/russco2/)
 * (@russco2)
 * [15 years, 3 months ago](https://wordpress.org/support/topic/using-isotope-with-wordpress/#post-1957573)
 * Anyone? I really would love to get this working.
 *  [gearu](https://wordpress.org/support/users/gearu/)
 * (@gearu)
 * [15 years, 1 month ago](https://wordpress.org/support/topic/using-isotope-with-wordpress/#post-1957633)
 * 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>
       ```
   
 *  [tweed](https://wordpress.org/support/users/tweed/)
 * (@tweed)
 * [14 years, 11 months ago](https://wordpress.org/support/topic/using-isotope-with-wordpress/#post-1957681)
 * this is a terrific help. Nothings working yet though these are the only clues
   I’ve found so far on wordpress and isotope. Having done the ‘you know the one!’
   multi-day attempts, now am very keen to know a few things:
 * OBJECTIVE >> Create a new post and have it end up as an isotope box:
 * – does the loop stuff requre only two divs to be added?
 * – do the two surrounding divs (if only two needed) work with any template. bare
   bones templates like Handcrafted WP have entirely different loop.php obviously.
   Is there a beginner’s way to explain in some detail?
 * – the interest is to create a site that has the ability to have a one page site
   and when a new post (blog?) is created it gets published and looks like an isotope
   box.
 * – if only interested in the above (create post have it becomr isotope box) where
   does the html from the description noted in this post go? Is it that we don’t
   need to ad any html? EXCEPT whatever’s in the post? So just add the css stuff
   desired and alter the loop.php and add script (where?) and we’re good to go?
 * REALLY would like some guru details on this! Please.
 *  [tweed](https://wordpress.org/support/users/tweed/)
 * (@tweed)
 * [14 years, 11 months ago](https://wordpress.org/support/topic/using-isotope-with-wordpress/#post-1957683)
 * 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.
 *  [gearu](https://wordpress.org/support/users/gearu/)
 * (@gearu)
 * [14 years, 11 months ago](https://wordpress.org/support/topic/using-isotope-with-wordpress/#post-1957687)
 * see this other thread for more info on linking ISOTOPE to a nexgen gallery.
    
   [http://wordpress.org/support/topic/nextgen-gallery-adding-class-to-thumnail-based-on-tags?replies=2](http://wordpress.org/support/topic/nextgen-gallery-adding-class-to-thumnail-based-on-tags?replies=2)
 *  [rollyourowned](https://wordpress.org/support/users/rollyourowned/)
 * (@rollyourowned)
 * [14 years, 8 months ago](https://wordpress.org/support/topic/using-isotope-with-wordpress/#post-1957700)
 * 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/](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.

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Using isotope with WordPress’ is closed to new replies.

 * 6 replies
 * 4 participants
 * Last reply from: [rollyourowned](https://wordpress.org/support/users/rollyourowned/)
 * Last activity: [14 years, 8 months ago](https://wordpress.org/support/topic/using-isotope-with-wordpress/#post-1957700)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics