Filter posts by categories in WordPress

Here is the task: to show the works from portfolio, which belong to WordPress category only, while clicking on the WordPress link in the menu, i.e. to filter the posts by categories:

Obviously, when you click on PrestaShop, you should see the works that belong only to the PrestaShop category, etc.

Solution
Actually, here are our links:

1
2
3

<div id="works">
<p class="links"><a href="/category/all/">All</a><a href="/category/wordpress/">WordPress</a><a href="/category/prestashop/">PrestaShop</a><a href="/category/cakephp/">CakePHP</a><a href="/category/mobile/">Mobile</a></p>
</div>

Here is the loop body:

<section class="swiper-container">
 <ul id="da-thumbs">
  <?php
   $my_posts = get_posts('numberposts=16&category_name="all"');
    foreach ($my_posts as $post) :
     setup_postdata($post);
  ?>
   <li class="<?php the_category_unlinked(' '); ?> " style="background-image: url(<?php
    if ( has_post_thumbnail()) {
     $full_image_url = wp_get_attachment_image_src(get_post_thumbnail_id(), 'full');
     echo ''.$full_image_url[0] . '';
    }
   ?>)">
    <a href="<?php the_permalink() ?>">
     <div class="hover">
      <h3><?php the_title(); ?></h3>
     </div>
    </a>
   </li>
  <?php endforeach; ?>
 </ul>
</section>

We need to pay attention to the next string only:

1	<li class="<?php the_category_unlinked(' '); ?> "

Body of the function the_category_unlinked() is located in the file functions.php:

<?php
 function the_category_unlinked($separator = ' ') {
  $categories = (array) get_the_category();
  $thelist = '';
  foreach($categories as $category) {    // concate
   $thelist .= $separator . $category->category_nicename;
  }
  echo $thelist;
}
?>

What do we get as a result? We request the corresponding categories for each post in the cycle and add them to the class of the tag we need. In our case, we get the following output HTML:

Next we`ll need a JS or jQuery-script like this:

$('#works .links a').on( "click", function(event) {
 event.preventDefault();
 var $attrName = $(this).attr('href');
 $('#works #da-thumbs li').each(function(index, element){
  $(element).removeClass("worktohide");
  if(!$(element).hasClass($attrName)) {
   $(this).addClass("worktohide");
  }
 })
})

Script logic:, read the link`s attribute href (for example, wordpress) when clicking on it and check the entire array of posts (our works from the portfolio) for the condition: if this post does not have a wordpress class, then it needs to be hidden. In our case, we hide the posts by adding the class with the corresponding styles:

.worktohide {
 opacity: 0.15;
 filter: grayscale(100%); /* Current draft standard */
 -webkit-filter: grayscale(100%); /* New WebKit */
 -moz-filter: grayscale(100%);
 -ms-filter: grayscale(100%); 
 -o-filter: grayscale(100%); /* Not yet supported in Gecko, Opera or IE */ 
 filter: url(resources.svg#desaturate); /* Gecko */
 filter: gray; /* IE */
 -webkit-filter: grayscale(1); /* Old WebKit */
}

Finally we get this result (I duplicate the first image of this article):

Presented algorithm allows to avoid AJAX use for showing the necessary category posts only and allows to tune the styles more flexible!

SOFTSPRINT

Filter posts by categories in WordPress

SOFT
SPRINT