SOFT
SPRINT

softsprint.net
shop

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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:

1
2
3
4
5
6
7
8
9
10
<?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:
html-code

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

1
2
3
4
5
6
7
8
9
10
$('#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:

1
2
3
4
5
6
7
8
9
10
11
.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!

CONTACT US
Cookies | Privacy Policy | Terms and ConditionsSoftSprint ©