Currently pulling in my posts on to a static page via ajax and a wp page template.
<?php get_header(); ?>
<div class="row">
<div class="col-md-6 feed-left">
<div id="post-list"></div>
</div>
<div class="col-md-6 feed-right">
<div id="post">Stuff</div>
</div>
</div>
<script>
var $b = jQuery.noConflict();
$b(document).ready(function() {
$b("#post-list").load("http://localhost/feed2/post-list/");
$b("#post-list").html('<img src="http://localhost/feed2/wp-content/uploads/2018/01/loader.gif">');
$b.ajaxSetup({ cache: false });
});
</script>
<?php get_footer(); ?>
post-list.php
<?php
/*
Template Name: Post List
*/
?>
<div class="my-posts-outer" id="refresh">
<?php
$paged = get_query_var('paged') ? get_query_var('paged') : 1;
$args = array(
'post_type' => 'post',
'post_status' => 'publish',
'paged' => $paged
);
$my_posts = new WP_Query( $args );
if ( $my_posts->have_posts() ) :
?>
<?php while ( $my_posts->have_posts() ) : $my_posts->the_post() ?>
<div class="my-posts-inner">
<a class="post-link" rel="<?php the_ID(); ?>" href="<?php the_permalink(); ?>"><span class="time-ago">[ <?php echo meks_time_ago(); ?>]</span> <?php the_title(); ?></a>
<?php
if (is_syndicated()) :
$feedtitle = get_feed_meta('feedtitle');
if (!is_null($feedtitle)) :
?><a class="source-link float-right text-right" rel="<?php print $feedtitle; ?>" href="<?php the_syndication_source_link(); ?>" target="_blank"><?php print $feedtitle; ?></a><?php
endif;
endif;
?>
</div>
<?php endwhile ?>
<?php endif ?>
</div>
<ul id="entries-pages">
<li class="nxtpost"><?php next_posts_link('« Older Entries', $my_posts->max_num_pages) ?></li>
<li class="prvpost"><?php previous_posts_link('Newer Entries »') ?></li>
</ul>
<script>
jQuery(function($) {
$.ajaxSetup({cache:false});
$("li.nxtpost a,li.prvpost a").click(function(){
var post_url = $(this).attr("href");
var post_id = $(this).attr("rel");
$("#post-list").html('<img src="http://localhost/feed2/wp-content/uploads/2018/01/loader.gif">');
$("#post-list").load(post_url);
return false;
});
});
</script>
<script>
jQuery(function($) {
$.ajaxSetup({cache:false});
$("a.post-link").click(function(){
var post_url = $(this).attr("href");
var post_id = $(this).attr("rel");
$("#post").html('<img src="http://localhost/feed2/wp-content/uploads/2018/01/loader.gif">');
$("#post").load(post_url);
return false;
});
});
</script>
This all works great for what it is but id like to bring in/append "new" posts automatically to the top of the loaded loop without refreshing the loop.
If someone could get me pointed in the right direction id appreciate it.