date wise post filter as portfolio type

date wise post filter as portfolio type

=============custom css===============

#portfolio {  
    margin: 1rem 0;
    -webkit-column-count: 3; 
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 1rem;
    -moz-column-gap: 1rem;
    column-gap: 1rem;
    -webkit-column-width: 33.33333333333333%;
    -moz-column-width: 33.33333333333333%;
    column-width: 33.33333333333333%;
}
.tile { 
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transition: all 350ms ease;
    transition: all 350ms ease;

}
.tile:hover { 

}

.scale-anm {
  transform: scale(1);
}


p{ 
  padding:10px; 
  border-bottom: 1px #ccc dotted; 
  text-decoration: none; 
  font-family: lato; 
  text-transform:uppercase; 
  font-size: 12px; 
  color: #333; 
  display:block; 
  float:left;
}

p:hover { 
  cursor:pointer; 
  background: #333; 
  color:#eee; }

.tile img {
    max-width: 100%;
    width: 100%;
    height: auto;
    margin-bottom: 1rem;
  
}

.btn {
    font-family: Lato;
    font-size: 1rem;
    font-weight: normal;
    text-decoration: none;
    cursor: pointer;
    display: inline-block;
    line-height: normal;
    padding: .5rem 1rem;
    margin: 0;
    height: auto;
    border: 1px solid;
    vertical-align: middle;
    -webkit-appearance: none;
    color: #555;
    background-color: rgba(0, 0, 0, 0);
}

.btn:hover {
  text-decoration: none;
}

.btn:focus {
  outline: none;
  border-color: var(--darken-2);
  box-shadow: 0 0 0 3px var(--darken-3);
}

::-moz-focus-inner {
  border: 0;
  padding: 0;
}
================= custom js ==========

jQuery(function() {
    var selectedClass = "";
    jQuery(".fil-cat").click(function(){ 
    selectedClass = jQuery(this).attr("data-rel"); 
     jQuery("#portfolio").fadeTo(100, 0.1);
    jQuery("#portfolio div").not("."+selectedClass).fadeOut().removeClass('scale-anm');
    setTimeout(function() {
      jQuery("."+selectedClass).fadeIn().addClass('scale-anm');
      jQuery("#portfolio").fadeTo(300, 1);
    }, 300); 
    
  });  
});


========== function.php code=========

function setPostViews($postID) {
    $countKey = 'post_views_count';
    $viewdate = 'post_views_date';
    $count = get_post_meta($postID, $countKey, true);
    $date = get_post_meta($postID, $viewdate, true);
    if($count==''){
        $count = 0;
        delete_post_meta($postID, $countKey);
        add_post_meta($postID, $countKey, '1');
    }else{
        $count++;
        update_post_meta($postID, $countKey, $count);
    }
    
    if($date==''){
       $today = date("Y-m-d");
        delete_post_meta($postID, $viewdate);
        add_post_meta($postID, $viewdate, $today);
    }else{        
        $today = date("Y-m-d");
        update_post_meta($postID, $viewdate, $today);
    }
}
remove_action( 'wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0);
========== single.php code=========

add this line in while loop before template call
setPostViews(get_the_ID());

=========== custompaget1.php (Template file)============
<?php 
/* Template Name: CustomPageT1 */ 
function wptuts_scripts_with_the_lot_temp1()
{	
	if ( is_page_template( 'custompaget1.php' ) ) {
		wp_enqueue_script('jquery');
		wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/css/custom-style.css' );		
		wp_enqueue_style( 'owl-carousel-css', get_template_directory_uri() . '/css/owl.carousel.min.css' );
    	wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/js/custom-script.js', array(), '1.0.0', true );
    	wp_enqueue_script( 'owl-carousel-js', get_template_directory_uri() . '/js/owl.carousel.min.js', array(), '1.0.0', true );
	}	
}
add_action( 'wp_enqueue_scripts', 'wptuts_scripts_with_the_lot_temp1' );

get_header(); ?>
<div class="container">
	<div id="primary" class="content-area">
		<main id="main" class="site-main" role="main">
			<div class="entry-content" style="width:90%; text-align: center;float: none;">
			<div class="toolbar mb2 mt2">
			  <button class="btn fil-cat" href="" data-rel="yearly">Yearly</button>
			  <button class="btn fil-cat" data-rel="sixmonth">Six Month</button>
			  <button class="btn fil-cat" data-rel="quarterly">Quarterly</button>
			  <button class="btn fil-cat" data-rel="monthly">Monthly</button>
			  <button class="btn fil-cat" data-rel="webeekly">Weekly</button>
			</div> 
			<div style="clear:both;"></div>   
			<div id="portfolio">
			 

<?php 
	/* ============ Week =========== */
	
	$today = date("Y-m-d");		
	$week = date('Y-m-d', strtotime('-7 days'));	
	$args = array(
		'post_type' => 'post',		
	    'meta_key' => 'post_views_date',
	    'posts_per_page' => -1,	   
	    'orderby' => 'post_views_count',	 
	    'order' => 'DESC', 
		'meta_query' => array(			
		    array(
		        'key' => 'post_views_date',
		        'value' => array($week, $today),
		        'compare' => 'BETWEEN',
		        'type' => 'DATE',
		    )
		)
	);
	
	$the_query = new WP_query($args);

	if ( $the_query->have_posts() ) {
		
		while ( $the_query->have_posts() ) {

			$the_query->the_post();			
			$post_id = get_the_ID();			
			$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post_id ), 'single-post-thumbnail' );

			$one_month_image_url = $image['0'];			
			echo '<div class="tile scale-anm webeekly">';			
			echo '<img class="item" src="'.$one_month_image_url.'" alt="" />';
			echo $post_id;
			echo '</div>';
		}
					
		wp_reset_postdata();
	} else {
		// no posts found
	}

	$today = date("Y-m-d");	
	$month = date('Y-m-d', strtotime('-30 days'));
	$args = array(
		'post_type' => 'post',		
	    'meta_key' => 'post_views_date',
	    'posts_per_page' => -1,
	    'orderby' => 'post_views_count',	 
	    'order' => 'DESC',    
		'meta_query' => array(			
		    array(
		        'key' => 'post_views_date',
		        'value' => array($month, $today),
		        'compare' => 'BETWEEN',
		        'type' => 'DATE',
		    )
		)
	);				
	$the_query = new WP_query($args);		
	if ( $the_query->have_posts() ) {

		while ( $the_query->have_posts() ) {

			$the_query->the_post();			
			$post_id = get_the_ID();
			$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post_id ), 'single-post-thumbnail' );
			$one_month_image_url = $image['0'];
			echo '<div class="tile scale-anm monthly">';			
			echo '<img class="item" src="'.$one_month_image_url.'" alt="" />';
			echo $post_id;
			echo '</div>';	
		}	
					
		wp_reset_postdata();
	} else {
		// no posts found
	}

	/* ============ 3 - Monlth =========== */

	
	$today = date("Y-m-d");	
	$threemonth = date('Y-m-d', strtotime('-90 days'));	
	$args = array(
		'post_type' => 'post',		
	    'meta_key' => 'post_views_date',
	    'posts_per_page' => -1,
	    'orderby' => 'post_views_count',	 
	    'order' => 'DESC',    
		'meta_query' => array(			
		    array(
		        'key' => 'post_views_date',
		        'value' => array($threemonth, $today),
		        'compare' => 'BETWEEN',
		        'type' => 'DATE',
		    )
		)
	);				
	
	$the_query  = new WP_Query( $args );				
	if ( $the_query->have_posts() ) {

		while ( $the_query->have_posts() ) {

			$the_query->the_post();
			$post_id = get_the_ID();
			$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post_id ), 'single-post-thumbnail' );
			$three_month_image_url = $image['0'];
			echo '<div class="tile scale-anm quarterly">';				
			echo '<img class="" src="'.$three_month_image_url.'" alt="" />';
			echo $post_id;	
			echo '</div>';			
		}				
		wp_reset_postdata();
	} else {
		// no posts found
	}

	/* ============ 6 - Monlth =========== */

	$today = date("Y-m-d");	
	$sixmonth = date('Y-m-d', strtotime('-180 days'));	
	$args = array(
		'post_type' => 'post',		
	    'meta_key' => 'post_views_date',
	    'posts_per_page' => -1,
	    'orderby' => 'post_views_count',	 
	    'order' => 'DESC',    
		'meta_query' => array(			
		    array(
		        'key' => 'post_views_date',
		        'value' => array($sixmonth, $today),
		        'compare' => 'BETWEEN',
		        'type' => 'DATE',
		    )
		)
	);				
	
	$the_query  = new WP_Query( $args );				
	if ( $the_query->have_posts() ) {

		while ( $the_query->have_posts() ) {

			$the_query->the_post();
			$post_id = get_the_ID();
			$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post_id ), 'single-post-thumbnail' );
			$six_month_image_url = $image['0'];
			echo '<div class="tile scale-anm sixmonth">';			
			echo '<img class="" src="'.$six_month_image_url.'" alt="" />';	
			echo $post_id;
			echo '</div>';			
		}						
		wp_reset_postdata();
	// } else {
		
	}

	/* ============ Yearly =========== */

	$today = date("Y-m-d");	
	$oneyear = date('Y-m-d', strtotime('-364 days'));
	$args = array(
		'post_type' => 'post',		
	    'meta_key' => 'post_views_date',
	    'posts_per_page' => -1,
	    'orderby' => 'post_views_count',	 
	    'order' => 'DESC',   
		'meta_query' => array(			
		    array(
		        'key' => 'post_views_date',
		        'value' => array($oneyear, $today),
		        'compare' => 'BETWEEN',
		        'type' => 'DATE',
		    )
		)
	);				
	
	$the_query  = new WP_Query( $args );	
	//print_r($the_query);
	if ( $the_query->have_posts() ) {

		while ( $the_query->have_posts() ) {

			$the_query->the_post();
			$post_id = get_the_ID();
			$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post_id ), 'single-post-thumbnail' );
			$yearly_image_url = $image['0'];
			echo '<div class="tile scale-anm yearly">';			
			echo '<img class="" src="'.$yearly_image_url.'" alt="" />';
			echo $post_id;
			echo '</div>';			
		}	
						
		wp_reset_postdata();
	} else {
		// no posts found
	}

	
?>	

			  		
			  				  
			</div>
			<div style="clear:both;"></div>				
		</div><!-- #post-## -->	
		</main><!-- #main -->
	</div><!-- #primary -->
</div><!-- .wrap -->

<?php get_footer();