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="https://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="https://wordpress.stackexchange.com/questions/291047/<?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('&laquo; Older Entries', $my_posts->max_num_pages) ?></li>
  <li class="prvpost"><?php previous_posts_link('Newer Entries &raquo;') ?></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="https://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="https://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.

0

Tags:

Leave a Reply

Your email address will not be published. Required fields are marked *