Breaking News: Grepper is joining You.com. Read the official announcement!

AJAX Load more button wordpress

Victorious Vole answered on May 5, 2022 Popularity 7/10 Helpfulness 3/10

answer AJAX Load more button wordpress

AJAX Load more button wordpress

Comment

// functions.php
function offers_article_loop() {
  ob_start();
  
  echo '<div class="article_item">';
    $offer_btn = get_field('offer_button_label');

    if ( has_post_thumbnail( get_the_ID() ) ) {
      echo get_the_post_thumbnail( get_the_ID(), 'medium', array('class' => 'article_featured'));
    }

    echo '<h2 class="article_title"><a href="'.get_the_permalink(get_the_ID()).'">' . get_the_title() . '</a></h2>';
    echo get_excerpt( 120, isset($offer_btn) ? $offer_btn : 'view offer' );
  echo '</div>';

  $loop = ob_get_clean();
	return $loop;
}

function md_offers_loop() {
  ob_start();

  $paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
  $args = array(
    "post_type"         => "offers",
    "posts_per_page"    => 3,
    "paged"             => $paged
  );

  $the_query = new WP_Query($args);

  if ( $the_query->have_posts() ) {
    echo '<div class="offers_blg" data-article>';
      while ( $the_query->have_posts() ) {
        $the_query->the_post();
        echo offers_article_loop();
      }

    if (  $the_query->max_num_pages > 1 ) 
      echo '<div class="more_btn"><div class="et_pb_button v1 md_loadmore">Load more offers</div></div>';
    echo '</div>';
  } else {
    echo '<p>No offers added for the website.</p>';
  }

  wp_reset_postdata();
  $output = ob_get_clean();
	return $output;

}
add_shortcode('md_offers_blog', 'md_offers_loop');


function md_my_load_more_scripts() {
  $paged = get_query_var( 'paged' ) ? get_query_var('paged') : 1;
  $args = array(
    "post_type"         => "offers",
    "posts_per_page"    => 3,
    "post_status"       => 'publish'
  );

  $the_query = new WP_Query($args);

	wp_enqueue_script('jquery');
	wp_register_script( 'my_loadmore', get_stylesheet_directory_uri() . '/lib/js/myloadmore.js', array('jquery') );
 
	wp_localize_script( 'my_loadmore', 'md_loadmore_params', array(
		'ajaxurl' => site_url() . '/wp-admin/admin-ajax.php',
		'posts' => json_encode( $the_query->query_vars ), 
		'current_page' => $paged,
		'max_page' => $the_query->max_num_pages
	) );
 
 	wp_enqueue_script( 'my_loadmore' );
}
add_action( 'wp_enqueue_scripts', 'md_my_load_more_scripts' );


function md_loadmore_ajax_handler(){
	$args = json_decode( stripslashes( $_POST['query'] ), true );
	$args['paged'] = $_POST['page'] + 1; // we need next page to be loaded
 
	query_posts( $args );
 
	if( have_posts() ) :
		while( have_posts() ): the_post();
      echo offers_article_loop();
		endwhile;
	endif;
	die; 
}
add_action('wp_ajax_loadmore', 'md_loadmore_ajax_handler'); 
add_action('wp_ajax_nopriv_loadmore', 'md_loadmore_ajax_handler'); 


// js file
jQuery(function($) {

  $('.md_loadmore').click(function() {
    const btnText = $(this).text()
    const btnParent = $(this).parent()

    var button = $(this),
      data = {
        'action': 'loadmore',
        'query': md_loadmore_params.posts, // that's how we get params from wp_localize_script() function
        'page': md_loadmore_params.current_page
      };

    $.ajax({
      url: md_loadmore_params.ajaxurl,
      data: data,
      type: 'POST',
      beforeSend: function(xhr) {
        button.text('Loading...');
      },
      success: function(data) {
        if (data) {
          $(data).insertBefore(btnParent)
          button.text(btnText)

          md_loadmore_params.current_page++;

          if (md_loadmore_params.current_page == md_loadmore_params.max_page)
            button.remove();
        } else {
          button.remove();
        }
      }
    });
  });
});

Popularity 7/10 Helpfulness 3/10 Language php

Source: Grepper

Tags: ajax button load php wordpress

Link to this answer
Share Copy Link

Contributed on May 05 2022

Victorious Vole

0 Answers Avg Quality 2/10

AJAX Load more button wordpress

Contents

More Related Answers

AJAX Load more button wordpress

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.