- Custom query loop block that can select specific post-type, categories, and tags.
- Have “Read More” posts.
- Count posts per tag
- Pinned post
<?php
/**
** Block Name: Query Loop Block
**/
$posttype = $attributes['post-type'];
$category = $attributes['category'];
$tags = $attributes['tags'];
?>
<style>
.display_querybox {
display: flex !important;
}
.wp-block-lazyblock-query-loop-block{
position:relative;
}
.query_all_box{
display: flex;
align-items: center;
margin-bottom: 60px;
position:relative;
}
.as-img{
width: 450px;
height: 263px;
margin-bottom: -10px;
object-fit: cover;
}
.query-content{
padding-left: 60px;
}
.query-content h2{
margin:0;
line-height: 25px;
margin-bottom: 20px;
}
.query-content h2 a{
color:#3A3A3A;
font-size: 25px;
font-style: normal;
font-weight: 500;
}
.query-content h2 a:hover{
color: #1eb6e0 !important;
}
.query-content p{
font-size:16px;
color:#3A3A3A;
margin:0;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.custom_post_count{
padding-top: 85px;
padding-bottom: 60px;
font-size:30px;
margin:0;
color:#16192B;
}
/* Sticky Post */
.sticky-post .query-content::before{
content:'Pinned';
font-size:20px;
font-weight:500;
color:#333333;
text-transform: uppercase;
position: absolute;
top: 10px;
}
/* PAGINATION */
.pagination{
position:absolute;
bottom:-3em;
text-align:center;
width:100%;
}
.pagination a,
.pagination .current{
border-radius: 5px;
padding: 5px 1em;
text-decoration:none;
}
.pagination .current{
background-color:#FF7900;
}
/* RESPONSIVENESS */
@media all and (max-width:1024px){
.query-inner-image img{
width:300px;
}
}
@media all and (max-width:781px){
.query_all_box {
display: block;
}
.query-inner-image img {
width: 100%;
}
.sticky-post .query-content::before {
position: relative;
}
.query-content h2{
margin-top: 1em;
}
.query-content {
padding-left: 0;
}
}
</style>
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array(
'post_type' => $posttype,
'posts_per_page' => -1,
'paged' => $paged,
'order' => 'DESC',
'tax_query' => array(
'relation' => 'AND',
array(
'taxonomy' => 'category',
'field' => 'slug',
'terms' => $category,
),
array(
'taxonomy' => 'post_tag',
'field' => 'slug',
'terms' => $tags,
),
),
);
$sticky_args = array(
'post_type' => $posttype,
'posts_per_page' => -1,
'post__in' => get_option( 'sticky_posts' ),
'ignore_sticky_posts' => 1,
'tax_query' => array(
array(
'taxonomy' => 'category',
'field' => 'slug',
'terms' => $category,
),
array(
'taxonomy' => 'post_tag',
'field' => 'slug',
'terms' => $tags,
),
),
);
$sticky_loop = new WP_Query( $sticky_args );
$loopb = new WP_Query( $args );
$count = $loopb->found_posts;
$countquery = $loopb->found_posts($tags, $category);
echo '<h3 class="custom_post_count ' . implode(' ', explode(' ', $tags['value'])) . ' ' . $category . '">' . $tags['label'] . ' [' . $count . ']</h3>';
$ctr = 0;
if ( $sticky_loop->have_posts() ) {
while ( $sticky_loop->have_posts() ) : $sticky_loop->the_post();
$post_ID = get_the_id();
$content = get_the_content();
$thumb_image_arr = wp_get_attachment_image_src(get_post_thumbnail_id(),'full');
$thumb_image = $thumb_image_arr[0];
?>
<div id="posts-container" class="query-box query_all_box sticky-post <?php echo implode(' ', explode(' ', $tags['value'])); echo ' '.$category ?>">
<div class="query-inner-image">
<a href="<?php the_permalink(); ?>"><img class="as-img" src="<?php echo $thumb_image; ?>" /></a>
</div>
<div class="query-content">
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php the_excerpt(); ?>
</div>
</div>
<?php
endwhile;
wp_reset_postdata();
}
if ( $loopb->have_posts() ) {
while ( $loopb->have_posts() ) : $loopb->the_post();
$post_ID = get_the_id();
$content = get_the_content();
$thumb_image_arr = wp_get_attachment_image_src(get_post_thumbnail_id(),'full');
$thumb_image = $thumb_image_arr[0];
// Check if current post ID is in the sticky posts array
if ( in_array( $post_ID, get_option( 'sticky_posts' ) ) ) {
continue; // Skip this post and move to the next one
}
// Add CSS class if it's a regular post
$post_class = 'query-box query_all_box';
if ( $sticky_loop->post_count > 0 ) {
$post_class .= ' regular-post'; // Add a CSS class to style it differently
}
?>
<div class="<?php echo implode(' ', explode(' ', $tags['value'])) . ' ' . $category . ' ' . $post_class; ?>">
<div class="query-inner-image">
<a href="<?php the_permalink(); ?>"><img class="as-img" src="<?php echo $thumb_image; ?>" /></a>
</div>
<div class="query-content">
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php the_excerpt(); ?>
</div>
</div>
<?php
endwhile;
wp_reset_postdata();
}
?>
<button class="load-more-btn <?php echo implode(' ', explode(' ', $tags['value'])); echo ' '.$category ?>" id="load-more-btn">Load More</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
jQuery(document).ready(function( $ ){
var tags = "<?php echo $tags['value']; ?>";
var category = "<?php echo $category; ?>";
var $queryBoxes = $('.wp-block-lazyblock-query-loop-block :not(.load-more-btn).' + tags + '.' + category);
var count = $queryBoxes.filter('.query-box').length;
$queryBoxes.each(function(index) {
if (index < 6) {
$(this).show();
} else {
$(this).hide();
}
if (count > 5){
$('.load-more-btn.' + tags + '.' + category).show();
}else{
$('.load-more-btn.' + tags + '.' + category).hide();
}
});
// Show all query boxes when the "Load More" button is clicked
$('.load-more-btn.' + tags + '.' + category).on('click', function() {
$queryBoxes.show();
$(this).hide();
});
let page = 1;
$('#load-more-btn').on('click', function() {
page++;
$.ajax({
type: 'POST',
url: '<?php echo admin_url('admin-ajax.php'); ?>',
dataType: 'html',
data: {
'action': 'load_more_posts',
'paged': page,
'category': '<?php echo $category; ?>',
},
success: function(response) {
$('#query-posts-container').append(response);
}
});
});
});
</script>
by 