I have a code, which loads wordpress posts via ajax. Works great on all templates. Index, tag, categories, etc. What I notice in this code is that apparently the loading is done through the divs, I do not know how to explain, just know that only with this code js it is possible to load the posts with ajax just by clicking on the Load More button. I've done several experiments, in other subjects and I've seen that it's quite the same. 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 this same code to upload custom Querys posts on one page. Imagine, for example, three boxes, which list posts from 3 different categories.
Here's how:
Iwanttoreusethiscodetodoitthere.
PS:Iwasthinking...Iknowthe.attroperationbutIdonotknowhowIcouldapplyitincaseofthese.IfthebuttonthatloadsthepostswasusedfirsttogettheIDoftheboxes,applyittothecode,andloadtheposts(".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(); ?>IMAGE HTML 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--><h2class="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--><h2class="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--><h2class="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--><h2class="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--><h2class="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--><h2class="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--><h2class="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--><h2class="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--><h2class="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 -->