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:
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!