Posted 2 years ago #
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
But for some reason, which I can't quite fathom, it doesn't work in WordPress: http://bit.ly/hG5yTG
Does anyone have any idea what I'm doing wrong?
Thanks all,
Russ
Posted 2 years ago #
Anyone? I really would love to get this working.
Posted 2 years ago #
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>
Posted 1 year ago #
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.
Posted 1 year ago #
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.
Posted 1 year ago #
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
Posted 1 year ago #
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.
This topic has been closed to new replies.
