wordpress ajax load more WordPress

• SOLVED

wordpress ajax load more
I need a "Load More" functionality in my site.
in a blog page templates and also later in "resources" custom post type.
here is my custom query code:

<div id="wrap-posts" class="row wrap-posts">
<?php
$sticky = get_option( 'sticky_posts' );
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array(
'post_type' => 'post',
'posts_per_page' => '9',
'post__not_in' => $sticky,
'paged' => $paged
);

// The Query
$query = new WP_Query( $args );
$i = 0;

// The Loop
if ( $query->have_posts() ) {
while ( $query->have_posts() ) {
$query->the_post();
$i++;
//Get post thumbnail
$post_id = get_the_ID();
$category_object = get_the_category($post_id);
$category_name = $category_object[0]->name;
$term_id = $category_object[0]->term_id;
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'blog-post-thumb' );
// $post_thumbnail_alt = get_post_meta ( get_post_thumbnail_id(), '_wp_attachment_image_alt', true );
// Start post
echo '<div class="col-md-6 col-xl-4">';
echo '<div class="card">';
echo '<a class="card-img" href="'. get_the_permalink() .'">';
if($image){
echo '<img src="'. $image[0] .'" class="img-fluid" alt="">';
}
echo '</a>';
echo '<div class="card-body">';
echo '<a href="'. get_term_link($term_id) .'" class="category-name '. strtolower(str_replace(' ', '', $category_name)) .'">'. $category_name .'</a>';
echo '<a href="'. get_the_permalink() .'">';
echo '<h2 class="card-title">'. get_the_title() .'</h2>';
echo '</a>';
echo '<p>';
echo __('Blog Post','dbm');
// echo get_the_excerpt();
echo '</p>';
echo '<small>' . get_the_author_meta('display_name') . ' | ' . get_the_time('F j, Y') . '</small>';
echo '</div>';
echo '</div>';
echo '</div>';
// End post
}
} else {
// no posts found
}
// Restore original Post Data
wp_reset_postdata();
?>
</div>
<div class="load-more">
<button class="load-more-btn"><?php echo __('Load more','dbm'); ?></button>
</div>

* At the bottom - button load more needs to load a flexible number which I can play with
and change later (not depanding on wordpress settings)

* WHen there are no more posts button should disappear of course

* I need to be able to extand this code and add it to another places in the site

Answers (3)

2021-07-15

Arnav Joy answers:

why don't you try this plugin: https://wordpress.org/plugins/ajax-load-more/
its good and will work in your case.

---

hamergil comments:

I tried it. didn't like it. too many options and hard to integrate in my case.
I prefer custom code. thanks

2021-07-15

Monit Jadhav answers:

You need to create a function to do that and place it in functions.php

It would look something like below


function loadmore_articles(){

// prepare our arguments for the query

$args = json_decode( stripslashes( $_POST['query'] ), true );
$args['paged'] = $_POST['page'] + 1; // we need next page to be loaded
$args['post_status'] = 'publish';
$args['posts_per_page']=5; // Set number of posts here



query_posts( $args );

if( have_posts() ) :

// run the loop
while( have_posts() ): the_post();




get_template_part( 'template-parts/content', get_post_format() );



endwhile;

else: ?>

<style>
.load-more-btn{
display:none !important;
}
</style>

<?php
endif;
die;
}


$args['posts_per_page']=5; // Set number of posts here as you wish


Let me know if it helps

Thanks

---

hamergil comments:

I need full working functionality. that's why I posted and willing to pay.
Thanks

---

Monit Jadhav comments:

Sure let me know how we work it out.

Thanks

Monit

2021-07-16

Mohamed Ahmed answers:

Hi Hamergil,
Could you send me a temporary login details credentials that you can change/delete once this topic is resolved.
So I will do it.
email : [email protected]

---

hamergil comments:

Unfortunately not because it's my client's website
you have any other idea?