• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Using jQuery Isotope

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Using jQuery Isotope

This topic is: not resolved

Tagged: isotope, jquery

  • This topic has 13 replies, 10 voices, and was last updated 7 years, 9 months ago by RavenManiac.
Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • November 14, 2012 at 4:31 pm #147
    SoZo
    Member

    1. Download the isotope package then upload the jquery.isotope.min.js to a folder titled "lib" in the child theme's directory.

    2. Create a file and name it isotope-parameters.js and place the following into it.
    $(document).ready(function () {
    //Set your isotope area
    var $container = $('#container'),
    filters = {};
    //Set our items to be filtered, .post will work if you're using the post_class(); function
    $container.isotope({
    itemSelector : '.post'
    });
    // filter items when filter link is clicked
    $('#filters a').click(function(){
    var selector = $(this).attr('data-filter');
    $container.isotope({ filter: selector });
    return false;
    })
    });

    3. Upload that file to the child theme's lib folder

    4. Add this into the child theme's functions.php. Note I had to deregister WP's jquery and reload from google for some reason that I never worked out.
    // Load scripts
    add_action( ' wp_enqueue_scripts', 'child_load_scripts' );
    function child_load_scripts() {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' );
    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'isotope', CHILD_URL . '/lib/jquery.isotope.min.js', true );
    wp_enqueue_script( 'parameters', CHILD_URL . '/lib/isotope-parameters.js', true );
    }

    5. Create a page template and add this for the filter selector editing the "XXX" with the ID of the category whose children you want as filters
    <ul id="filters" data-filter-group="color">
    <li class="filter">Filter:</li>
    <li><a href="#filter-topic-any" data-filter="" class="selected">All</a></li>
    <?php
    //Grab the child categories
    $categories = get_categories( 'child_of=XXX' );
    foreach ( $categories as $category ) {
    //and format them for use as isotope filters
    echo '<li><a href="#filter-topic-' . $category->slug . '" class="" data-filter=".category-' . $category->slug . '" ' . '>' . $category->name . '</a></li>';
    }
    ?>
    </ul>

    6. Add your loop below that. The only important point here is to put the posts into a "<?php post_class(); ?>" div. For example something like
    <?php $recent = new WP_Query( 'category_name=REPLACE_WITH_PARENT_CAT_NAME&posts_per_page=999&orderby=rand' );
    while ( $recent->have_posts() ) : $recent->the_post(); ?>
    <div <?php post_class(); ?>>
    POST CONTENT STUFF
    </div><!-- end .post-class -->
    <?php endwhile;
    wp_reset_query(); ?>

    7. Add the isotope style rules to your style sheet along with any other rules you want
    /**** Isotope Filtering ****/
    .isotope-item {
    z-index: 2;
    }
    .isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;
    }
    /**** Isotope CSS3 transitions ****/
    .isotope,
    .isotope .isotope-item {
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
    }
    .isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    -o-transition-property: height, width;
    transition-property: height, width;
    }
    .isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    -o-transition-property: top, left, opacity;
    transition-property: transform, opacity;
    }
    /**** disabling Isotope CSS3 transitions ****/
    .isotope.no-transition,
    .isotope.no-transition .isotope-item,
    .isotope .isotope-item.no-transition {
    -webkit-transition-duration: 0s;
    -moz-transition-duration: 0s;
    -o-transition-duration: 0s;
    transition-duration: 0s;
    }

    Hope that helps you get Isotope running in your project!


    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

    November 14, 2012 at 4:42 pm #181
    SoZo
    Member

    Nice new avatar! Stay safe out there!


    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

    November 14, 2012 at 9:30 pm #168
    Jon Weiss
    Member

    Great tip, John! It's definitely one I'll add to my bookmarks 🙂


    View My Site – Two W Media.com | I’m a Recommended StudioPress Customizer

    November 14, 2012 at 11:11 pm #182
    Jen Baumann
    Participant

    Nice Tip. Thanks, John!

    November 15, 2012 at 12:35 pm #201
    Marco
    Member

    Great tip! If I may add a slight modification (we all want a faster page loading, don't we? )

    // Loading Isotope only on the Page Template
    function my_isotope()
    {
    if (is_page_template( 'my_page_template.php' )  && !is_admin() ) {
    wp_enqueue_script( 'isotope', CHILD_URL . '/lib/jquery.isotope.min.js', true ); // Enqueue it!
    wp_enqueue_script( 'parameters', CHILD_URL . '/lib/isotope-parameters.js', true ); // Enqueue it!
    }
    }
    add_action('wp_head', 'my_isotope');


    Neat & Plain – Genesis and WordPress specialist

    November 15, 2012 at 3:43 pm #224
    jasonhobbsllc
    Member

    WOW!! Absolutely awesome!

    November 15, 2012 at 4:04 pm #227
    SoZo
    Member

    Good point Marco!


    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

    November 15, 2012 at 4:06 pm #228
    Posh John
    Participant

    Nice tutorial, thanks!


    Thus the heavens and the earth were completed in all their vast array. Genesis 2

    November 15, 2012 at 5:49 pm #243
    3200 Creative
    Member

    We've found this link to come in extremely handy for all that is isotope!:)

    isotope.metafizzy.co/

     


    3200 Creative – Genesis design and development specialists | 3200 Goodies – Design and development blog

    November 15, 2012 at 10:13 pm #257
    wpsmith
    Member

    First and foremost, script loading should be done via wp_enqueue_scripts hook, not get_header.

    Also, unless you want (err, have) to have Google CDN jQuery, there is no need to deregister jquery. So feel free to delete these lines:

    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' );

    Often times, this method (switching to Google jQuery or otherwise) will break plugins (mainly because the Google CDN failed for this reason or that OR the person doesn't update the version of jQuery like WordPress does for you). If I use Google CDN jQuery, here is my prefer method (gist):

    So, here's what I would recommend as for the script loading (assuming the previous function exists in your child theme):

    https://gist.github.com/4504030


    Travis Smith | Recommended StudioPress Developer & Contributor
    WP Smith | @wp_smith | GitHub

    Due to the forums, please paste code using Pastebin, JS Fiddle (for JavaScript) or GitHub.
    How to use Firebug for Designers by SixRevisions

    November 16, 2012 at 8:48 am #289
    SoZo
    Member

    Great function Travis. Thanks for posting.


    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

    February 27, 2015 at 7:59 am #142522
    RavenManiac
    Participant

    Will this work with the Minimum Pro theme and its built-in Portfolio?

    June 1, 2015 at 5:32 am #154365
    soilland
    Member

    Hi RavenManiac

    If you are still looking a built-in Portfolio, Here it is https://llamapress.com/create-filterable-portfolio-in-genesis/#comment-37. I have been finding last few days the filterable portfolio that is not too complicate for someone who don't know about php and javascript. I've found one tutorial which works for my website. I use Executive Pro theme.

    June 1, 2015 at 7:55 am #154373
    RavenManiac
    Participant

    Thanks for your reply. Yes, unfortunately, I'm still screwing around with a filterable portfolio. I was testing Go Portfolio (http://codecanyon.net/item/go-responsive-portfolio-for-wp/5741904), and it seemed to be working well, but then a WP update broke it and I can't figure out what's wrong.

    Now, I'm thinking about using Sridhar Katakam's tutorial instead, in hopes that it'll be less prone to breakage with future WP updates. Can you post a link to your portfolio page so I can see what it looks like?

    Also, if anyone else has any advice on this subject I'd really love to hear it as I seem to be spinning my wheels with this particular problem.

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble