Filterable Portfolio With WordPress And JQuery

In this topic, We are going to see How to Create a Filterable Portfolio using Post Category for your post Using WordPress And jQuery.

First of all, you need to create some posts with a category in your site with featured images. After Creating a post you need to get the post featured image and post title. In this example, I have created a shortcode.
Copy and paste this code into your functions.php file.

function filterable_portfolio(){ ?>
  <div class="blog-post-main">
    <?php  $args = array(
          'post_type'  => 'post',
          'post_status'  => 'publish',
          'orderby'     => 'title',
          'order'         => 'asc'
        );
    $the_query = new WP_Query( $args );
    while ($the_query -> have_posts()) : $the_query -> the_post(); 
    $cats =  get_the_category();
    $cat_slug = $cats[0]->slug; ?>
    <div class="blog-post-wrap" data-slug="<?php echo $cat_slug; ?>">
      <div class="blog-thumb"><a href="<?php the_permalink() ?>"><?php the_post_thumbnail('medium'); ?></a></div>
      <div class="blog-title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></div>
    </div><?php 
    endwhile;
    wp_reset_postdata(); ?>
  </div><?php
}
add_shortcode('blog-post', 'filterable_portfolio');

Now you can add a shortcode on the page where you want to display these posts.
Copy this below shortcode and paste it into your page.

[blog-post]

Now you can see that all posts are displayed.

Now for filter Category wise post, you need to create buttons. With the use of a button click, you can get the post from categories.

For example, You have created a category named “Test” then you need to create a button for “Test” title. So when you click on the “Test” button you can see the post which has a “test” Category.

So here I have added these few lines of code for that.

function filterable_portfolio(){
$all_cat = get_categories('portfolio');?>
<div class="btn-wrap">
  <a href="#" data-slug="" class="all active">All</a>
  <?php
  foreach($all_cat as $cat)
  {
    $cat_name = $cat-> name;
    $cat_slug = $cat-> slug;
  ?>
    <a href="#" data-slug="<?php echo $cat_slug ?>"> <?php echo $cat_name ?> </a>
  <?php 
  }
  ?>
</div>
}

Kindly refer to this full source code. I have attached below with CSS.

function filterable_portfolio(){
$all_cat = get_categories('portfolio'); ?>
<div class="btn-wrap">
  <a href="#" data-slug="" class="all active">All</a>
  <?php
  foreach($all_cat as $cat)
  {
    $cat_name = $cat-> name;
    $cat_slug = $cat-> slug;
  ?>
    <a href="#" data-slug="<?php echo $cat_slug ?>"> <?php echo $cat_name ?> </a>
  <?php 
  }
  ?>
</div>
<div class="blog-post-main">
<?php 
$args = array(
      'post_type'  => 'post',
      'post_status'  => 'publish',
      'orderby'     => 'title',
      'order'   => 'asc'
    );
$the_query = new WP_Query( $args );
while ($the_query -> have_posts()) : $the_query -> the_post(); 
$cats =  get_the_category();
$cat_slug = $cats[0]->slug;
?>

<div class="blog-post-wrap" data-slug="<?php echo $cat_slug; ?>">
<div class="blog-thumb"><a href="<?php the_permalink() ?>"><?php the_post_thumbnail('medium'); ?></a></div>
<div class="blog-title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></div>
</div>
<?php 
endwhile;
wp_reset_postdata();
?>
</div><?php
}
add_shortcode('blog-post', 'filterable_portfolio');  ?>
<style>
@keyframes fadeInAnimation { 
    0% { 
        opacity: 0; 
    } 
    100% { 
        opacity: 1; 
     } 
}
.btn-wrap a {
  text-decoration: none ;
    padding: 5px 15px;
    width: auto;
    background: rgba(0,0,0,0.5);
    color: #fff ;
    border-radius: 10px;
    margin-right: 10px;
}
.btn-wrap a.active {
  background: #0073aa;
}
.blog-post-main {
  display: flex;
    flex-wrap: wrap;
    max-width: 1200px ;
} 
.blog-post-wrap {
  padding: 0 15px 15px;
  position: relative;
  animation: fadeInAnimation ease 3s;
}
.blog-post-wrap .blog-title {
  position: absolute;
    top: 0;
    left: 15px;
    right: 15px;
    text-align: center;
    background: rgba(0,0,0,0.5);
}
.blog-post-wrap .blog-title a {
  color: #fff;
  text-decoration: none ;
}
</style>

After adding this code It Looks like this. Kindly Refer to this Image.

Now for Filter Functionality, you need to use jQuery.
you need to create one file with a .js extension. Here for example I have created a “custom.js” file.

After creating that js file you need to include this file into your functions.php
Here I have mentioned the file path where I have added the “custom.js” file.

/wp-content/themes/twentynineteen/js/custom.js

Kindly follow this path so you can easily include the js file in your function.php file

Use this line of code to include the file.

wp_enqueue_script( 'custom-js', get_theme_file_uri( '/js/custom.js' ), array(), '', true );

Then Copy this code and paste it into the “custom.js” file and you are done with this functionality easily.

jQuery(document).ready(function() {
  jQuery( '.btn-wrap a' ).click(function(){
    jQuery( '.btn-wrap a' ).removeClass('active');
    jQuery( this ).addClass('active');
    var btn = jQuery(this).data('slug');
    console.log (btn);
    jQuery( '.blog-post-wrap' ).hide();
    jQuery( '.blog-post-wrap' ).each(function(){
      if(jQuery(this).data('slug') == btn )
      {
        jQuery(this).show();
      }
    }); 
  });
  jQuery( '.btn-wrap a.all' ).click(function(){ 
    jQuery( '.blog-post-wrap' ).show().animate({});
  });
});

Here is the video of working functionality.

Thank you. Hope You have achieved something from this.