We Keep Coding

Wordpress How to add infinite on scroll pagination for post which are displayed on homepage

Below is the code from home.php template which displays posts. Not sure how can I add ajax on scroll pagination. Once page is loaded 5-6 posts must be displayed and when user scrolls down, then loader icon must come and must show other remaining post.
I have created a page in wordpress and i have selected template as home.
<?php
/**
* Genesis Sample.
*
* This file adds the landing page template to the Genesis Sample Theme.
*
* Template Name: Home
*
* #package Genesis Sample
* #author StudioPress
* #license GPL-2.0-or-later
* #link https://www.studiopress.com/
*/
get_header();
get_template_part( 'content-archive' );
?>
<div class="body-container">
<div class="blogs-banner">
<?php
$image = get_field('image');
if (!empty($image)) : ?>
<img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" class="img-main" />
<?php endif; ?>
</div>
<div class="about-container">
<div class="blog-list">
<div class="row-same-height">
<?php
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
wp_reset_query();
$post_ids = (array) get_query_var('post_ids');
$args = array(
'post_type' => array('post'),
'post_status' => 'publish',
'posts_per_page' => 1500,
'paged' => $paged,
);
$query = new WP_Query( $args );
if ( $query->have_posts() ) :
while ( $query->have_posts() ) : $query->the_post(); ?>
<a href="" class="link-post">
<div class="col-same-height">
<div class="content">
<div class="TopArticleCard-Container">
<div class="img-container">
<?php
$thumbnail = get_post_meta(get_the_id(), 'large_img', true);
if ( $thumbnail ) { ?>
<img src="<?php echo $thumbnail; ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" loading="lazy"/>
<?php } else if ( has_post_thumbnail() ) {
the_post_thumbnail('large', ['title' => get_the_title()], ['alt' => get_the_title()]); ?>
<?php
} else { ?>
<img src="<?php echo get_site_url(); ?>/wp-content/uploads/2020/09/default.jpg" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" loading="lazy"/>
<?php } ?>
</div>
<div class="article-description">
<div class="article-tag">
<?php $cat = get_the_category(); echo $cat[0]->cat_name; ?>
</div>
<div class="content">
<div class="article-title">
<?php the_title(); ?>
</div>
</div>
</div>
</div>
</div>
</div>
</a>
<?php endwhile;
endif;
wp_reset_postdata();
?>
</div>
</div>
</div>
</div>
<?php get_footer();

How to add a button to submit a form?

I'm completly newbie with javascript but I was able to get this script that I found to work partially. I mean if I type in the first form field and hit 'Enter' the form perform the http request with my options.
I think the script part at the bottom is not working or missing something. Since is using jQuery.
So I want to make this script more simple, just add a button or link to call a action do the search and show the results page.
?><section class="content-page page-produtos">
<div class="wrp-content">
<div class="container box-content">
<h1>Engates</h1>
<form id="form_filtro_produto" action="<?php echo home_url( '/produtos/' ); ?>" method="GET" class="src-group">
<label for="pesquisar">
<p>Pesquisar</p>
<input type="text" name="engate" value="<?php echo $_GET['engate']; ?>" />
</label>
<label for="montador">
<p>Montadora</p>
<select name="montadora">
<option value="">Selecione uma Montadora</option>
<?php
$args = array (
'post_type' => 'engates',
'posts_per_page' => -1,
'meta_key' => 'montadora',
'meta_compare' => 'EXISTS',
'orderby' => 'meta_value',
'order' => 'ASC'
);
$query = new WP_Query($args);
$montadoras = array();
while ($query->have_posts()): $query->the_post();
if(!in_array(get_field('montadora'), $montadoras) && get_field('montadora') != ""){
array_push($montadoras, get_field('montadora'));
?>
<option value="<?php the_field('montadora'); ?>"<?php if($_GET['montadora'] == get_field('montadora')){ ?> selected="selected"<?php } ?>><?php the_field('montadora'); ?></option>
<?php
}
endwhile;
wp_reset_query();
?>
</select>
</label>
<label for="modelo">
<p>Modelo</p>
<select name="modelo">
<option value="">Selecione um Modelo</option>
<?php
$args = array (
'post_type' => 'engates',
'posts_per_page' => -1,
'meta_key' => 'modelo',
'meta_compare' => 'EXISTS',
'orderby' => 'meta_value',
'order' => 'ASC'
);
$query = new WP_Query($args);
$modelos = array();
while ($query->have_posts()): $query->the_post();
if(!in_array(get_field('modelo'), $modelos) && get_field('modelo') != ""){
array_push($modelos, get_field('modelo'));
?>
<option value="<?php the_field('modelo'); ?>"<?php if($_GET['modelo'] == get_field('modelo')){ ?> selected="selected"<?php } ?>><?php the_field('modelo'); ?></option>
<?php
}
endwhile;
wp_reset_query();
?>
</select>
</label>
</form>
</div>
</div> <!-- fim wrp-content -->
<div class="container box-content">
<?php//do_shortcode('[facetwp template="example"]');?>
<?php
$filtro = array();
if($_GET['montadora'] != ""){
$montadora = array(
'key' => 'montadora',
'value' => $_GET['montadora'],
'compare' => '=',
);
array_push($filtro, $montadora);
}
if($_GET['modelo'] != ""){
$modelo = array(
'key' => 'modelo',
'value' => $_GET['modelo'],
'compare' => '=',
);
array_push($filtro, $modelo);
}
if($_GET['ano'] != ""){
$ano = array(
'key' => 'ano',
'value' => $_GET['ano'],
'compare' => '=',
);
array_push($filtro, $ano);
}
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
query_posts(
array(
'post_type' => 'engates',
'posts_per_page' => 8,
'paged' => $paged,
'meta_query' => array($filtro),
's' => $_GET['engate'],
'orderby' => 'meta_value',
'meta_key' => 'modelo',
'order' => 'ASC'
)
);
if(have_posts()):
while(have_posts()): the_post();
?>
<article>
<img width="270" src="<?php echo wp_get_attachment_url(get_post_thumbnail_id(get_the_ID())); ?>" class="attachment-full size-full wp-post-image" alt="" />
<div class="paragraph-group">
<p><em>cod: <?php the_field('codigo'); ?></em></p>
<p><?php the_field('modelo'); ?></p>
<p><?php the_field('montadora'); ?></p>
<p><?php the_field('ano'); ?></p>
<!-- Saiba Mais -->
</div>
</article>
<?php
endwhile;
?>
<div style="clear:both"></div>
<?php
wp_paginate();
else:
echo "<p>Nenhum produto foi encontrado.</p>";
endif;
?>
</div> <!-- fim container -->
</section>
<script>
jQuery(function($){
$('#form_filtro_produto input, #form_filtro_produto select').on('change', function(){
$('#form_filtro_produto').submit();
});
});
</script>

All you need to do is include <button>Submit</button> within the <form> element and it will trigger the form's submit event to your form's action.

Get taxonomy description when filtering custom post type

I'm using a custom post-type and I am doing the filtering using categories.
Each category has a description and I would like to show the description of the category when the category is selected like here
I found a way to show the description of the taxonomy from here
Html used:
<div class="col-lg-9">
<div class="lista-portofoliu">
<div class="row">
<?php while ($pquery->have_posts()) : $pquery->the_post();
$term_obj_list = get_the_terms(get_the_id(), 'portfolio_category');
$term_classes_a = array();
$img_data = array();
$img_string = ""; ?>
<?php foreach ($term_obj_list as $term) {
$term_classes_a[] = $term->slug;
$meniu_triggers[] = $term->slug;
$meniu_labels[] = $term->name;
$img_key = 'imagine_' . $term->slug;
$img_src = wp_get_attachment_image_src(get_field($img_key, get_the_id()), 'thumbnail');
if ($img_src) {
$img_data[] = 'data-' . $img_key . '="' . $img_src[0] . '"';
} else {
$img_data[] = 'data-' . $img_key . '="' . wp_get_attachment_image_src(get_field($img_key, get_the_id()), 'full') . '"';
}
foreach ($img_data as $imagine) :
$img_string .= $imagine;
endforeach;;
} ?>
<?php $term_classes = implode(" ", $term_classes_a); ?>
<div class="col-lg-4 p-1 m-0 item toate <?php echo $term_classes; ?>">
<div class=" item-content" <?php echo $img_string; ?> data-imagine_toate="<?php echo get_the_post_thumbnail_url(get_the_id(), 'thumbnail', true); ?>" style="background-image:url('<?php echo get_the_post_thumbnail_url(get_the_id(), 'thumbnail', true); ?>')">
<a href="<?php the_permalink(); ?>" class=" item-overlay">
<span class="item-title">
<?php the_title(); ?>
<br>
<br>
</span>
</a>
</div>
</div>
<?php endwhile;
?>
<?php
wp_reset_postdata(); ?>
</div>
<button type="button" id="more_posts" class="btn btn-dark loadMore center-block btn-pachete">Mai mult</button>
</div>
</div>
Thank you!

If you want to order everything by portfolio category, then you should first loop over each term in the portfolio_category taxonomy.
With each term, create a new query where you use the tax_query to only get the posts related to the current term we're looping over.
The result will be that each loop contains the category data and the posts related to that category.
You can output the category description by echoing the $term->description value.
<?php
$terms = get_terms('portfolio_category');
if (!is_wp_error($terms)) :
foreach ($terms as $term) : ?>
<div class="row">
<?php
$args = [
'post_type' => 'YOUR_CUSTOM_POST_TYPE',
'post_status' => 'publish',
'posts_per_page' => -1,
'tax_query' => [
[
'taxonomy' => 'portfolio_category',
'field' => 'term_id',
'terms' => $term->term_id
]
]
];
$query = new WP_Query($args);
if ($query->have_posts()) : ?>
<div class="col-lg-4">
<?= $term->name; ?>
<?= $term->description; ?>
</div>
<?php
while ($query->have_posts()) :
$query->the_post(); ?>
<div class="col-lg-4">
<?php the_title(); ?>
</div>
<?php
endwhile
wp_reset_postdata();
endif; ?>
</div>
<?php
endforeach;
endif;

How I can create a responsive image carousel and slides custom post type content in WordPress

I want to create a responsive image carousel and slides custom post type content like featured image, title, etc.
I had created custom post type as banner in the following way:
function create_banners_post_type() {
$labels = array(
'name' => __( 'Banners' ),
'singular_name' => __( 'banner' ),
'add_new' => __( 'New banner' ),
'add_new_item' => __( 'Add New banner' ),
'edit_item' => __( 'Edit banner' ),
'new_item' => __( 'New banner' ),
'view_item' => __( 'View banner' ),
'search_items' => __( 'Search banners' ),
'not_found' => __( 'No banners Found' ),
'not_found_in_trash' => __( 'No banners found in Trash' ),
);
$args = array(
'labels' => $labels,
'has_archive' => true,
'public' => true,
'hierarchical' => false,
'supports' => array(
'title',
'editor',
'excerpt',
'custom-fields',
'thumbnail',
'page-attributes'
),
'taxonomies' => array( 'post_tag', 'category'),
);
register_post_type( 'banner', $args );
}
add_action( 'init', 'create_banners_post_type' );
and to display the output on the front page:
// function to show home page banner using a query of banner post type
function home_page_banner() {?>
<?php
$query = new WP_Query( array(
'post_type' => 'banner',
));
if ( $query->have_posts() ) { ?>
<ul>
<?php while ( $query->have_posts() ) : $query->the_post(); ?>
<li>
<div>
<div id="post-<?php the_ID(); ?>" <?php post_class( 'bg-image' ); ?>><?php the_post_thumbnail(); ?></div>
<div class="content-wrap">
<h1><?php the_title(); ?></h1>
<?php the_content(); ?>
Read More
</div>
</div>
</li>
<?php
endwhile;?>
</ul>
</div>
<?php
}
wp_reset_postdata();
}
in front page I had inserted this code:
<header id="showcase" class="grid">
<?php
if ( is_front_page() ) {
home_page_banner();
}
?>
</header>
which is creating a ul list and in ul list, each post is coming in li, following is inspect element screenshot:

Try this code
// function to show home page banner using a query of banner post type
function home_page_banner() {?>
<div class="carousel" data-transition="slide">
<?php
$query = new WP_Query( array(
'post_type' => 'banner',
));
if ( $query->have_posts() ) { ?>
<?php while ( $query->have_posts() ) : $query->the_post(); ?>
<div>
<div id="post-<?php the_ID(); ?>" <?php post_class( 'bg-image' ); ?>><?php the_post_thumbnail(); ?></div>
<div class="content-wrap">
<h1><?php the_title(); ?></h1>
<?php the_content(); ?>
Read More
</div>
</div>
<?php
endwhile;?>
</div>
<?php
}
wp_reset_postdata();
}

I've never used Owl Carousel before, but any time I have to do a carousel I go to either Slick or Flickity - has basically everything you could ever need.
Flickity JS Carousel
The below is an example of how to include your post content inside of a carousel.
Create the initial query:
<?php
// the query
$recent_posts = new WP_Query( array(
'category_name' => 'posts',
'posts_per_page' => 3,
));
?>
Create your slider
<div class="posts-slider"> <? // this is your wrapper div ?>
<?php if ( $recent_posts->have_posts() ) : ?>
<?php while ( $recent_posts->have_posts() ) : $recent_posts->the_post(); ?>
<div class="recent-post-slide">
<div class="recent-post-content">
<div class="row">
<div class="col-12">
<div>
<div id="post-<?php the_ID(); ?>" <?php post_class( 'bg-image' ); ?>><?php the_post_thumbnail(); ?></div>
<div class="content-wrap">
<h1><?php the_title(); ?></h1>
<?php the_content(); ?>
Read More
</div>
</div>
</div>
</div>
</div>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php endif; ?>
</div>
Add some jQuery to make Flickity work:
<script>
jQuery(document).ready(function() {
var slider = jQuery('.posts-slider'); // The class name of the wrapper div
slider.flickity({
cellAlign: 'left',
contain: true
});
});
</script>

How to stop a Wordpress ajax load more button from continuously loading the last two posts repeatedly

I set up an ajax load more button in Wordpress. How do I detect that there are no more posts to call and to not reload the same posts? On click it repeatedly grabs the last two posts and loads those. I was having an issue with when posts 3, 4, 5, and 6 were showing initially on the page then clicking the load more button it would call posts 3, 2, and 1 instead of just post 2 and 1. I added an offset of 4. That seems to fix that but it still calls the last two posts if I keep clicking load more. Also is there a way to hide the button if no more posts are detected?
// the pages post query
<?php
$args = array(
'post_type' => 'financial-news',
'post_status' => 'publish',
'posts_per_page' => '4',
'orderby' => 'post_date',
'order' => 'DESC',
'paged' => 1,
);
?>
<?php $my_posts = new WP_Query( $args ); ?>
<?php if ( $my_posts->have_posts() ) : ?>
<?php $wp_query = new WP_Query(); $wp_query->query( $args ); ?>
<?php while ( $my_posts->have_posts() ) : $my_posts->the_post(); ?>
<div class="blog-post-wrapper one-column">
<div class="post-inner">
<div class="article-image"><img src="<?php the_field('thumb_image'); ?>"/></div>
<div class="article-copy match-height">
<span class="date"><?php the_time('F j, Y'); ?></span>
<h1><?php the_title(); ?></h1>
<p><?php echo wp_trim_words( get_the_content(), 25, '' ); ?></p>
<p><a class="read_more" href="<?php the_permalink(); ?>">Read More</a></p>
</div><!--article-copy-->
</div>
</div><!--blog-post-wrapper-->
<?php endwhile; ?>
</div><!--blog-content-->
<?php endif; ?>
<?php wp_reset_postdata(); // reset the query ?>
<div class="center-link"><div class="loadmore btn orange-btn-outline">Load More</div></div>
// The jS for the load button
<script type="text/javascript">
var ajaxurl = "<?php echo admin_url( 'admin-ajax.php' ); ?>";
var page = 2;
jQuery(function($) {
$('body').on('click', '.loadmore', function() {
var post_type = 'financial-news';
var posts_per_page = 3;
var data = {
'action': 'load_posts_by_ajax',
'page': page,
'security': '<?php echo wp_create_nonce("load_more_posts"); ?>',
'type' : 'post',
'post_type' : post_type,
'posts_per_page': posts_per_page,
};
$.post(ajaxurl, data, function(response) {
$('.blog-content').append(response);
page++;
});
});
});
// the functions.php code to load the posts
// blog load more button
add_action('wp_ajax_load_posts_by_ajax', 'load_posts_by_ajax_callback');
add_action('wp_ajax_nopriv_load_posts_by_ajax', 'load_posts_by_ajax_callback');
function load_posts_by_ajax_callback() {
check_ajax_referer('load_more_posts', 'security');
$paged = $_POST['page'];
$post_type = $_POST['post_type'];
$posts_per_page = $_POST['posts_per_page'];
$lay_out = $_POST['lay_out'];
$args = array(
'post_type' => $post_type,
'post_status' => 'publish',
'orderby' => 'post_date',
'order' => 'DESC',
'posts_per_page' => $posts_per_page,
'offset' => 4,
'paged' => $paged,
);
$my_posts = new WP_Query( $args );
if ( $my_posts->have_posts() ) :
?>
<?php while ( $my_posts->have_posts() ) : $my_posts->the_post(); ?>
<div class="blog-post-wrapper" >
<div <?php post_class('post-inner'); ?> id="post-<?php the_ID(); ?>">
<div class="article-image"><img src="<?php the_field('thumb_image'); ?>"/></div>
<div class="article-copy match-height">
<span class="date"><?php the_time('F j, Y'); ?></span>
<h1><?php the_title(); ?></h1>
<p><?php echo wp_trim_words( get_the_content(), 25, '' ); ?></p>
<p><a class="read_more" href="<?php the_permalink(); ?>">Read More</a></p>
</div><!--article-copy-->
</div>
</div><!--blog-post-wrapper-->
<?php endwhile; ?>
<?php
endif;
wp_die();
}