Isotope - show latest post within each category - php

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">Alle</li>
<li class="smoothtrans">Foto</li>
<li class="smoothtrans">Video</li>
<li class="smoothtrans">Web</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>
Se prosjekt
</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.

Answer 2

Two Things I don't understand
Why their are two navigation/choice
2.First one work correct but second does not have any link or function it has link to just back to same using # hyper reference.
3.video and web have same thing did you put it knowingly if not check assigned category

Answer 3

one thing you can do is fetch all the posts at once and show only 6 using something like this
jQuery('#isotope-list').isotope({
filter: ':nth-child(-n+3)'
});

Answer 4

Filter will work only on available items on page.
When pressing one category it should show the latest 6 posts within that category if available, in your case (http://www.vekvemedia.no/) total item are 6 and 5 item belongs to "foto" category so when pressing "foto" category it will show 5 items.
Solution-1: if you have "All" option then you have to load all the available items in first load after that filter will work and show all the items of matching category.
Solution-2: By using ajax, fetch 6 records that match category(like "foto")