0
I have a code, which loads wordpress posts via ajax. Works very well in all templates. Index, tag, categories, etc. What strikes me in this code is that apparently the upload is done through the Divs, I can not explain well, just know that only with this code js it is possible to load the posts with ajax just by clicking the Load More button. I have done several experiments, in other subjects and I saw that this is well. I thought if it is based on the classes/id of the elements that the call of the posts is made. So I think it would be possible to use that same code to load custom Querys posts on the same page. Imagine for example three boxes, which list posts from 3 different categories.
Like this here:
I want to reuse this code to do it there.
PS: I was thinking... I know how the .attr but I don’t know how I could apply it in such a case. If the button that loads the posts was used first to get the pit ID, apply it to the code, and load the posts (".minha-classe-ajax").attr('id').
With the code below, applied to any wordpress theme, you can see the result.
jQuery(function($) {
$body = jQuery('body');
var load_ajax_new_count = 0;
$("body").on('click', '.ajax-load-button a', function(e) {
e.preventDefault();
var $link = $(this);
var page_url = $link.attr("href");
$link.addClass('ajax-loader');
$body.addClass('opt-pagination-loading');
$('.ajax-pagination-ajax').addClass('ajax-ajaxpagination-active');
$("<div>").load(page_url, function() {
var n = load_ajax_new_count.toString();
var $wrap = $link.closest('.ajax-primary-main').find('.ajax-primary-content');
var $new = $(this).find('.ajax-primary-content .ajax-post').addClass('animated fadeInUp ajax-poajax-new-' + n);
var $this_div = $(this);
$new.hide().appendTo($wrap).fadeIn(400);
if ($this_div.find('.ajax-load-button').length) {
$link.closest('.ajax-primary-main').find('.ajax-load-button').html($this_div.find('.ajax-load-button').html());
$body.removeClass('opt-pagination-loading');
$('.ajax-pagination-ajax').removeClass('ajax-ajaxpagination-active');
} else {
$link.closest('.ajax-primary-main').find('.ajax-load-button').fadeOut('fast').remove();
}
if (page_url != window.location) {
window.history.pushState({
path: page_url
}, '', page_url);
}
load_ajax_new_count++;
return false;
});
});
});<?php get_header(); ?>
<div class="container">
<div id="box-latest" class="box-container ajax-primary-main">
<h1 class="box-title">BOX LATEST</h1>
<div class="ajax-primary-content">
<?php while ( have_posts() ) : the_post();?>
<article class="ajax-post">
<h1 class="post-title">
<a itemprop="url" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php the_title();?>
</a>
</h1>
<p class="post-meta">
<span class="category"><?php the_category();?></span>
<span class="date"><?php $post_date = get_the_date(); echo $post_date;?></span>
<span class="author"><a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) );?>"><?php echo get_the_author();?></a></span>
</p>
</article>
<?php endwhile;?>
</div><!-- ajax-primary-content -->
<div id="ajax-pagination" class="ajax-load-button">
<div class="ajax-pagination-ajax">
<?php echo $more_link = get_next_posts_link('<span class="pagination-load">Load More</span>'); ?>
</div>
</div><!-- #ajax-pagination -->
</div><!-- ajax-primary-main -->
</div> <!-- .container -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>HTML IMAGE EXAMPLE.
.main-layout {
margin: 0px auto;
max-width: 761px;
}
.main-box h2,
.main-box h3 {
margin: 0;
padding: 0;
}
.box-title {
padding: 10px;
margin-left: -10px;
color: #fff
}
#main-box-1 .box-title h3 {
background:#325
}
#main-box-2 .box-title h3 {
background: #000
}
#main-box-3 .box-title h3 {
background: #333
}
.box-title h3 {
padding: 10px;
}
.main-box-title {
font-size: 16px;
}
.main-box-title a {
text-decoration: none;
}
.main-box-title a:hover {
color: #333
}
.main-box {
max-width: 761px;
margin: 0px auto;
margin-bottom: 30px;
}
.main-box-loop {
display: inline-block;
position: relative;
vertical-align: top;
zoom:-1px;
margin: 0;
max-width: 32.5%;
}
.main-load-more {
position: relative;
text-align: center;
}
.main-load-more a {
margin: 10px auto;
text-decoration: none;
padding: 10px;
display: inline-block;
background: #ddd;
text-align: center;
} <div class="main-layout">
<div id="main-box-1" class="main-box">
<div class="box-title">
<h3>Esportes</h3>
</div>
<div class="main-box-container">
<div class="main-box-loop">
<div class="main-box-image">
<img src="http://via.placeholder.com/250x150">
</div><!-- .main-box-image -->
<h2 class="main-box-title">
<a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
</h2>
</div> <!-- .main-box-loop -->
<div class="main-box-loop">
<div class="main-box-image">
<img src="http://via.placeholder.com/250x150">
</div><!-- .main-box-image -->
<h2 class="main-box-title">
<a href="#">Vivamus at eleifend leo. Praesent eu ex ligula. </a>
</h2>
</div> <!-- .main-box-loop -->
<div class="main-box-loop">
<div class="main-box-image">
<img src="http://via.placeholder.com/250x150">
</div><!-- .main-box-image -->
<h2 class="main-box-title">
<a href="#">Aenean hendrerit pretium odio, nec pretium nisl ornare vitae.</a>
</h2>
</div> <!-- .main-box-loop -->
<div class="main-load-more">
<a href="#">Load More</a>
</div>
</div> <!-- .main-box-container -->
</div> <!-- #main-box-1 -->
<div id="main-box-2" class="main-box">
<div class="box-title">
<h3>Science</h3>
</div>
<div class="main-box-container">
<div class="main-box-loop">
<div class="main-box-image">
<img src="http://via.placeholder.com/250x150">
</div><!-- .main-box-image -->
<h2 class="main-box-title">
<a href="#">Sed tristique tempor arcu sit amet facilisis.</a>
</h2>
</div> <!-- .main-box-loop -->
<div class="main-box-loop">
<div class="main-box-image">
<img src="http://via.placeholder.com/250x150">
</div><!-- .main-box-image -->
<h2 class="main-box-title">
<a href="#">Cras accumsan condimentum urna id tincidunt.</a>
</h2>
</div> <!-- .main-box-loop -->
<div class="main-box-loop">
<div class="main-box-image">
<img src="http://via.placeholder.com/250x150">
</div><!-- .main-box-image -->
<h2 class="main-box-title">
<a href="#">Sed sem eros, cursus in dapibus a, viverra id lorem.</a>
</h2>
</div> <!-- .main-box-loop -->
<div class="main-load-more">
<a href="#">Load More</a>
</div>
</div> <!-- .main-box-container -->
</div> <!-- #main-box-2 -->
<div id="main-box-3" class="main-box">
<div class="box-title">
<h3>Tec</h3>
</div>
<div class="main-box-container">
<div class="main-box-loop">
<div class="main-box-image">
<img src="http://via.placeholder.com/250x150">
</div><!-- .main-box-image -->
<h2 class="main-box-title">
<a href="#">Aenean eget justo eu turpis auctor gravida. </a>
</h2>
</div> <!-- .main-box-loop -->
<div class="main-box-loop">
<div class="main-box-image">
<img src="http://via.placeholder.com/250x150">
</div><!-- .main-box-image -->
<h2 class="main-box-title">
<a href="#">Mauris in metus vitae libero laoreet malesuada vel a turpis.</a>
</h2>
</div> <!-- .main-box-loop -->
<div class="main-box-loop">
<div class="main-box-image">
<img src="http://via.placeholder.com/250x150">
</div><!-- .main-box-image -->
<h2 class="main-box-title">
<a href="#">Sed tincidunt, arcu quis commodo auctor, purus erat egestas metus, luctus tempor orci quam sed augue. </a>
</h2>
</div> <!-- .main-box-loop -->
<div class="main-load-more">
<a href="#">Load More</a>
</div>
</div> <!-- .main-box-container -->
</div> <!-- #main-box-3 -->
</div> <!-- .main-layout -->
The code you posted is incomplete. This JS only counts how many posts were uploaded. There is no AJAX calling there. Today the best way to make this call is to use the REST API. You search for the json posts and insert the content into the HTML. Put the HTML of that image up there that I make an example for you...
– Ricardo BRGWeb
@Ricardobrgweb did as you requested, I added the html of the image above. It’s in the question and also in the codepen. https://codepen.io/johnquimera/pen/yEaNjL
– John Quimera