load more post on front-page template

  • Hi!

    I’ve made a front-page template that displays my selected pages and the 3 latest posts on the same page. Also comments are forced showing on each post.
    I want to be able to load the next 3 posts by clicking a button without reloading the page.
    I know about the pbd-ajax-load-post plugin and the infinite-scroll plugin but can’t get those to work with my template.
    Can someone please help me get this to work using the front-page template below? 

    <?php
/*
Template Name: Front
*/
get_header(); ?> 

<?php $args=array('orderby' =>'order','order' =>'asc','post_type' =>'page','post__in' => array(4,6,9,765)); $page_query = new WP_Query($args); ?>
<?php while ($page_query->have_posts()) : $page_query->the_post(); ?>

<section id="<?php echo $post->post_name;?>" class="post_page jumpAnchor"><a>">.</a>
<article class="container" id="<?php echo $post->post_name;?>_content">
<?php the_content(); ?>

</article><!--end article-->
</section><!--end section-->

<?php endwhile; ?>

<?php
$args = array( 'numberposts' => 3 );
$lastposts = get_posts( $args );
foreach($lastposts as $post) : setup_postdata($post); ?>
<section id="<?php echo $post->post_name;?>" class="post jumpAnchor"><a>">.</a>
<article class="container" id="<?php echo $post->post_name;?>_content">

<div class="post-meta">
<?php $categories = get_the_category(); $cat_slug = $categories[0]->slug; echo "<div class='post $cat_slug'>";   ?><?php foreach((get_the_category()) as $cat) { echo $cat->cat_name . ' '; } ?></div><p class="small">Skrivet den <?php the_time('j F, Y') ?> av <?php the_author_posts_link() ?></p>
</div><!-- .post-meta -->

<h3><?php the_title(); ?></h3>
<?php the_content(); ?>

<?php
$withcomments = 1; // force comments form and comments to show on front page
comments_template();
?>

</article><!--end article-->
</section><!--end section-->

<?php endforeach; ?>

<?php get_footer(); ?>

    [Please post code or markup between backticks or use the code button. Or better still – use a pastebin. Your posted code may now have been permanently damaged/corrupted by the forum’s parser.]

Viewing 1 replies (of 1 total)
  • Moderator bcworkz

    (@bcworkz)

    First be sure you have a container in which to manipulate the content via jQuery. The main div in header and footer may suffice, or you could add one to your template. The page’s javascript will need to maintain an offset into the main query of which posts to request next.

    The button would initiate an AJAX request that includes the offset into the query and any other pertinent information the server might need. The AJAX action hook on the server functions very much like a template in that it queries and outputs all the necessary HTML to add into the current container to display the next 3 posts from the received offset.

    Your jQuery script that sent the request receives this output and either appends or replaces it in the main container. The offset number is incremented by 3 and then we await the next user event.

    There is of course much more detail that needs to be addressed, but this is a general outline of what should happen.

Viewing 1 replies (of 1 total)
  • The topic ‘load more post on front-page template’ is closed to new replies.