Last active
September 11, 2018 09:56
-
-
Save malek1316/bbdf16486178beebe92834267a55afae to your computer and use it in GitHub Desktop.
Ajax load more button for WordPress post
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- Front End Code - start --> | |
<div class="related-post"> | |
<h3 class="title-small mb-30">related posts</h3> | |
<div class="row"> | |
<ul class="ul-li-block portfolio-load"> | |
<?php | |
$tags = wp_get_post_terms( get_queried_object_id(), 'post_tag', ['fields' => 'ids'] ); | |
$args = [ | |
'post__not_in' => array( get_queried_object_id() ), | |
'posts_per_page' => 1, | |
'ignore_sticky_posts' => 1, | |
'orderby' => 'rand', | |
]; | |
$my_query = new wp_query( $args ); | |
if( $my_query->have_posts() ) { | |
while( $my_query->have_posts() ) { | |
$my_query->the_post(); | |
?> | |
<li class="col-lg-6"> | |
<div class="post-img"> | |
<?php the_post_thumbnail(); ?> | |
</div> | |
<div class="post-contant"> | |
<a href="<?php the_permalink(); ?>"> | |
<?php the_title(); ?> | |
</a> | |
<small><?php echo get_the_date(); ?></small> | |
</div> | |
</li> | |
<?php } } wp_reset_postdata(); ?> | |
</ul> | |
</div> | |
<!-- <button id="loadMore" class="loadMore"> --> | |
<a href="#" id="loadMore" class="loadMore"><?php esc_html_e( 'See More', 'vidco' ) ?></a> | |
<!-- </button> --> | |
</div> | |
<!-- related-post - end --> | |
<?php | |
/*------------------------------------------------------------------------------------------------------------------*/ | |
/* Loading Function | |
/*------------------------------------------------------------------------------------------------------------------*/ | |
add_action( "wp_ajax_load_more_portfolio", "bdcrictime_load_more_portfolio_func" ); // when logged in | |
add_action( "wp_ajax_nopriv_load_more_portfolio", "bdcrictime_load_more_portfolio_func" );//when logged out | |
//function return new posts based on offset and posts per page value | |
function bdcrictime_load_more_portfolio_func() { | |
$numPosts = (isset($_GET['numPosts'])) ? $_GET['numPosts'] : 0; | |
$page = (isset($_GET['pageNumber'])) ? $_GET['pageNumber'] : 0; | |
$tags = wp_get_post_terms( get_queried_object_id(), 'post_tag', ['fields' => 'ids'] ); | |
$args = [ | |
'post__not_in' => array( get_queried_object_id() ), | |
'posts_per_page' => $numPosts, | |
'post_status' => 'publish', | |
'paged' => $page, | |
'post_type' => 'post', | |
'orderby' => 'rand', | |
'tax_query' => [ | |
[ | |
'taxonomy' => 'post_tag', | |
'terms' => $tags | |
] | |
] | |
]; | |
$my_query = new wp_query( $args ); | |
if( $my_query->have_posts() ) { | |
while( $my_query->have_posts() ) { | |
$my_query->the_post(); | |
?> | |
<li class="col-lg-6"> | |
<div class="post-img"> | |
<?php the_post_thumbnail(); ?> | |
</div> | |
<div class="post-contant"> | |
<a href="<?php the_permalink(); ?>"> | |
<?php the_title(); ?> | |
</a> | |
<small><?php echo get_the_date(); ?></small> | |
</div> | |
</li> | |
<?php } } wp_reset_postdata(); | |
die(); | |
} | |
?> | |
<!-- JavaScript Function for load more --> | |
<script> | |
//load more | |
var page = 1; | |
$(document).on( 'click', '#loadMore', function( event ) { | |
event.preventDefault(); | |
jQuery('#loadMore').addClass('ion-ios-reload'); | |
var $container = jQuery('.portfolio-load'); | |
$.ajax({ | |
type : "GET", | |
data : { | |
action: 'load_more_portfolio', | |
numPosts : 2, | |
pageNumber: page | |
}, | |
dataType : "html", | |
url : ajaxpagination.ajaxurl, | |
success : function(html){ | |
var $data = jQuery(html); | |
if ($data.length) { | |
$container.append( html ); | |
jQuery('#loadMore').removeClass('ion-ios-reload'); | |
} else { | |
jQuery("#loadMore").remove(); | |
jQuery("#loadMore").html("No More Portfolio"); | |
} | |
}, | |
}) | |
page++; | |
}) | |
</script> | |
<?php | |
wp_enqueue_script('ghar-script', GHAR_JS . 'ghar-custom.js', array('jquery'), '1.0.0', true); | |
wp_localize_script( 'ghar-script', 'ajaxpagination', array( | |
'ajaxurl' => admin_url( 'admin-ajax.php' ) | |
)); | |
// Button style | |
// ============================================================================= | |
// a.loadMore { | |
// display: table; | |
// margin: auto; | |
// text-align: center; | |
// border: 1px solid; | |
// padding: 16px 33px; | |
// min-width: 170px; | |
// border-radius: 26px; | |
// background: #ffbf00; | |
// color: #fff; | |
// margin-top: 50px; | |
// position: relative; | |
// } | |
// a.loadMore.ion-ios-reload:before { | |
// opacity: 1; | |
// right: 8px; | |
// top: 17px; | |
// text-align: center; | |
// color: #111; | |
// position: absolute; | |
// -webkit-animation-name: spin; | |
// -webkit-animation-duration: 2000ms; | |
// -webkit-animation-iteration-count: infinite; | |
// -webkit-animation-timing-function: linear; | |
// -moz-animation-name: spin; | |
// -moz-animation-duration: 2000ms; | |
// -moz-animation-iteration-count: infinite; | |
// -moz-animation-timing-function: linear; | |
// -ms-animation-name: spin; | |
// -ms-animation-duration: 2000ms; | |
// -ms-animation-iteration-count: infinite; | |
// -ms-animation-timing-function: linear; | |
// /* animation-name: spin; */ | |
// animation-duration: 2000ms; | |
// animation-iteration-count: infinite; | |
// animation-timing-function: linear; | |
// font-size: 1.4em !important; | |
// } | |
// @-ms-keyframes spin { | |
// from { | |
// -ms-transform: rotate(0deg); | |
// } | |
// to { | |
// -ms-transform: rotate(360deg); | |
// } | |
// } | |
// @-moz-keyframes spin { | |
// from { | |
// -moz-transform: rotate(0deg); | |
// } | |
// to { | |
// -moz-transform: rotate(360deg); | |
// } | |
// } | |
// @-webkit-keyframes spin { | |
// from { | |
// -webkit-transform: rotate(0deg); | |
// } | |
// to { | |
// -webkit-transform: rotate(360deg); | |
// } | |
// } | |
// @keyframes spin { | |
// from { | |
// transform: rotate(0deg); | |
// } | |
// to { | |
// transform: rotate(360deg); | |
// } | |
// } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment