Isotope - show latest post within each category

Question

How it works right now:

• It shows the latest 6 projects as default
• When pressing the specific lists it shows the latest post within that category that are the latest 6 projects. E.g: It shows the 4 latest within Foto because 4 of the 6 are categories as Foto. This mean that if the 6 latest projects are in the category Foto, none of the posts within the other categories would show. Please see screenshow below if you don't understand.

How it should work:

• Show the latest 6 projects as default (this works)
• When press one category it should show the latest 6 posts within that category

See page here

Note: If you are using Chrome with Windows 10 the hover effect has for some reason stopped working. The bug has been reported to Chrome and Windows

<ul id="filters" class="whitetext whitelink myeluft">
    <li class="smoothtrans"><a href="#" data-filter="*" class="selected smoothtrans">Alle</a></li>
    <li class="smoothtrans"><a href='#' data-filter='.foto' class="smoothtrans">Foto</a></li>
    <li class="smoothtrans"><a href='#' data-filter='.video' class="smoothtrans">Video</a></li>
    <li class="smoothtrans"><a href='#' data-filter='.web' class="smoothtrans">Web</a></li>
</ul>

PHP

<?php

$args = array(
    'post_type' => (array( 'foto', 'video', 'web' )),
    'posts_per_page' => '6',
    'post_taxonomy' => 'any',
);

$the_query = new WP_Query($args); 


// Loop post_type
?>

<?php if ( $the_query->have_posts() ) : ?>
    <div id="isotope-list">
        <?php while ( $the_query->have_posts() ) : $the_query->the_post(); 

        $termsArray = get_the_terms( $post->ID, "category");  //Get the terms for this particular item
        $termsString = ""; //initialize the string that will contain the terms
            foreach ( $termsArray as $term ) { // for each term 
                $termsString .= $term->slug.' '; //create a string that has all the slugs 
            }
        ?> 
        <div class="<?php echo $termsString; ?> item col-md-4"> 
            <ul class="grid cs-style-3">
                <li>
                    <figure>
                        <?php if ( has_post_thumbnail() ) { 
                              the_post_thumbnail('frontpage_thumb');
                        } ?>
                        <figcaption class="lefttext">
                            <h3><?php the_title(); ?></h3>
                            <span class="offgrey"><?php echo(types_render_field( "produkt", array( 'raw' => true) )); ?> / <?php echo(types_render_field( "produsert", array( 'raw' => true) )); ?></span>
                            <a href="<?php the_permalink() ?>" title="Se prosjekt" rel="bookmark" class="smoothtrans">Se prosjekt</a>
                        </figcaption>
                    </figure>
                </li>
            </ul>             
        </div> <!-- end item -->
        <?php endwhile;  ?>
    </div> <!-- end isotope-list -->
    <script src="<?php bloginfo('stylesheet_directory'); ?>/js/toucheffects.js"></script>
<?php endif; ?>

JS

jQuery(function ($) {

    var $container = $('#isotope-list'); //The ID for the list with all the blog posts
    $container.isotope({ //Isotope options, 'item' matches the class in the PHP
        itemSelector : '.item', 
        layoutMode : 'masonry'
    });

    //Add the class selected to the item that is clicked, and remove from the others
    var $optionSets = $('#filters'),
    $optionLinks = $optionSets.find('a');

    $optionLinks.click(function(){
    var $this = $(this);
    // don't proceed if already selected
    if ( $this.hasClass('selected') ) {
      return false;
    }
    var $optionSet = $this.parents('#filters');
    $optionSets.find('.selected').removeClass('selected');
    $this.addClass('selected');

    //When an item is clicked, sort the items.
     var selector = $(this).attr('data-filter');
    $container.isotope({ filter: selector });

    return false;
    });

});

My thoughs (updated 13/07/15)

I have looked more into it, and when disabling the 'posts_per_page' and just using the custom wp settings, the problem is the same. So I guess that the problem is that when pressing each category it does not refresh or get any other posts than first shown.

I therefore believe that the args must be set another place, or the js must be modified to get newest posts. But this is not my expertise, and therefore I ask you if you have any solution. I have searched on both search engines and SO for this question, but I couldn't find it. However, I see that similar pages have the same problem. With that I believe that solving this problem would help other users aswell.

Answer 1

Your current code ask to the database for 6 recent posts only. Isotope plugin then filter them on the frontend.

This means that it can't show more post apart from this 6. When you click on the tags (foto, video, web) isotope filter this 6 posts to show only the ones that have the selected category. It doesn't ask for any more posts, it only filter the posts you already have.

You can make your code ask for more posts when you click on the filter tags, but you will need to use AJAX.