function task_enqueue_scripts() {/*JavaScript Localizetion For call the url in js “admin_ajax.php”;*/wp_enqueue_script( 'Your_jsFilename', get_stylesheet_directory_uri().'/load_more.js', array('jquery'), null, true );wp_localize_script( 'Your_jsFilename', 'ajax_object',array( 'ajaxurl' => admin_url( 'admin-ajax.php' )));}add_action( 'wp_enqueue_scripts', 'task_enqueue_scripts' );// handel req of wpadmin request here and send a responsadd_action("wp_ajax_my_action", "my_callback_function"); //no need to loginadd_action('wp_ajax_my_action', 'my_callback_function');function my_callback_function() {$argPost = array('post_type' => 'post','post_status' => 'publish',//'category_name' => 'news_media','posts_per_page' =>999,'offset' => 3,'orderby'=>'ASC',);$the_query = new WP_Query( $argPost );while ($the_query -> have_posts()) : $the_query -> the_post();?><div class="news-block col-xl-6 col-lg-6 col-md-6 col-sm -12"><div class="featureimg"> <?phpif ( has_post_thumbnail() ) :the_post_thumbnail();endif;?> </div><!-- <img src="wp-content/themes/usa-clinics/assets/images/blog-2.png" class="featureimg"/> --></div><div class="col-xl-6 col-lg-6 col-md-6 col-sm -12"><h5 class="date"><?php the_time( 'd / m / y' ); ?></h5><a href="<?php the_permalink() ?>"><h3 class="inner-title"><?php the_title(); ?></h3></a><p><?php the_excerpt(); ?></p><a href="<?php the_permalink() ?>" class="news-more">Continue Reading</a></div></div><?php// the_excerpt(__('(more…)'));endwhile; wp_reset_postdata();wp_die();}
And this is the JavaScript code - अब जावास्क्रिप्ट का code add करने के लिए आप को एक फाइल क्रिएट करना for Exmple - Your_jsFilename.js
अब एस js फाइल में हमे अपना ये code ऐड करना है -
jQuery(document).ready(function($) {
$("#load_more_btn").click(function() {
var data = {
'action': 'my_action',
'content': "Hi I am WordPress Ajax Responce", // We pass php values differently! id pass kiya hai
};
// We can also pass the url value
//separately from ajaxurl for front end AJAX implementations
jQuery.post(ajax_object.ajaxurl, data, function(response) {
$(".listOfPost").append(response);
//alert(response);
console.log(response);
});
$("#load_more_btn").hide();
});
});
Add load more button in your template file ---
<button id="load_more_btn" class="">Load More Stories</button>
<?php get_header();$argFeaturpost=array('post_type'=>'post','post_status'=>'publish','posts_per_page'=>1,'orderby'=>'ASC',); ?><section class="latest-media-news"><div class="container"><h2 class="main-heading"style="text-align:center">News & Media</h2><div class="row"><?php $the_query=new WP_Query($argFeaturpost);while($the_query->have_posts()):$the_query->the_post(); ?><div class="-12 col-sm col-lg-6 col-md-6 col-xl-6 Media-block"><div class="featureimg"><?php if(has_post_thumbnail()):the_post_thumbnail();endif; ?></div></div><div class="-12 col-sm col-lg-6 col-md-6 col-xl-6 right-side"><h5 class="date"><?php the_time('d / m / y'); ?></h5><a href="<?php the_permalink() ?>"><h3 class="inner-title"><?php the_title(); ?></h3></a><p><?php the_excerpt(); ?></p><div class="continue-btn"><a href="<?php the_permalink() ?>"class="news-more">Continue Reading</a></div></div></div><?php endwhile;wp_reset_postdata(); ?></div></section><?php if(!empty($_GET['no_posts'])&&isset($_GET['no_posts'])){$no_posts=$_GET['no_posts'];}else{$no_posts=5;}$args=array('post_type'=>'post','post_status'=>'publish','posts_per_page'=>$no_posts,'orderby'=>'ASC','offset'=>1); ?><section class="latest-news latest-news-media"><div class="container"><div class="row"><?php $the_query=new WP_Query($args);while($the_query->have_posts()):$the_query->the_post(); ?><div class="col-md-4 news-block"><div class="featureimg"><a href="<?php the_permalink() ?>"><?php if(has_post_thumbnail()):the_post_thumbnail('news-media-thumb');endif; ?></a></div><h5 class="date"style="margin-top:50px"><?php the_time('d / m / y'); ?></h5><a href="<?php the_permalink() ?>"><h3><?php the_title(); ?></h3></a><p><?php the_excerpt(); ?></p><a href="<?php the_permalink() ?>"class="news-more">Continue Reading</a></div><?php $index++;endwhile;wp_reset_postdata(); ?><div class="-12 col-sm col-lg-4 col-md-4 col-xl-4 news-block-sidebar"><div class="contact-info-sidebar"><h3>Looking to mention us in a story?<br><a href="contact-us"class="contact-us-link">Contact Us <i aria-hidden="true"class="fa fa-arrow-right"></i></a></h3></div></div></div></div><?php if($no_posts>0){ ?><div class="load-more-btn"><a href="?no_posts=99"class=""id="load_more">Load More Stories</a></div><?php } ?></section><section class="latest-news-media-mobile latest-news-mobile"><div class="container"><div class="row"><div class="col-xl-12"><div class="latestnews owl-carousel"><?php $the_query=new WP_Query('posts_per_page=100');while($the_query->have_posts()):$the_query->the_post(); ?><div class="news-block"><div class="featureimg"><?php if(has_post_thumbnail()):the_post_thumbnail();endif; ?></div><h5 class="date"><?php the_time('d / m / y'); ?></h5><a href="<?php the_permalink() ?>"><h3><?php the_title(); ?></h3></a><p><?php the_excerpt(); ?></p><a href="<?php the_permalink() ?>"class="news-more">Continue Reading</a></div><?php endwhile;wp_reset_postdata(); ?></div></div></div></div></section><?php get_footer(); ?>
Tags --how to add load more button in wordpress without plugin how to add load more button in wordpress how to add button in wordpress without plugin how to add load more button in elementor how to create load more button in wordpress load more button wordpress no plugin how to add load more posts button in wordpress load more button wordpress add load more button wordpress divi load more button elementor load more button how to add a read more button in wordpress.
0 Comments