Ask your WordPress questions! Pay money and get answers fast! (more info)

Custom post type - load more posts onto page WordPress

I have set up a custom post type which displays 6 posts on the page, what I am trying to do is that when the "load more" button is clicked it will load another 6 posts onto the page everytime it is clicked. Does anyone know a solution on how to do this?


<ul class="video-listing">
<?php
$args = array( 'post_type' => 'video', 'posts_per_page' => 6 );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();

$attachment_id = get_field('video_image', $child->ID);
$size = "video-carousel-medium";
$image = wp_get_attachment_image_src( $attachment_id, $size );
?>


<li>
<video id="1" class="video-js vjs-default-skin" controls preload="auto" poster="<?php echo $image[0]; ?>" data-setup='{"example_option":true}'>
<source src="<?php the_field('video_webm'); ?>" type='video/webm' />
</video>
<h3><?php the_field('video_sub_title'); ?></h3>
<?php the_field('video_decscription'); ?>
</li>


<?php endwhile; ?>
</ul><!--// .video-listing-->


<div class="load-more">
<a href="#">Load more...</a>
</div>

Answers (3)

2014-08-31

Fahad Murtaza answers:

Try this plugin: https://wordpress.org/plugins/ajax-load-more/


Fahad Murtaza comments:

Use your code as repeater template in above plugin and there is also a way where you can write HTMl for your load more area.

The screenshots explain it it detail: https://wordpress.org/plugins/ajax-load-more/screenshots/

So assuming you used above code as repeater template and named it video_template (I can see your post type is video), the following short code should do the job for you.

[ajax_load_more post_type="video" repeater="default" posts_per_page="5" transition="fade" button_label="Load more..."]


tekdz comments:

Thanks for the reply but when I use that plugin the only thing it pulls in from the post type is this for example:

<li>
<h3>
<a title="7" href="http://localhost/mysite/?video=7">7</a>
</h3>
<p class="entry-meta">August 31, 2014</p>
</li>


Its not pulling in any of the advanced custom fields or markup


Fahad Murtaza comments:

Did you create a new template?


tekdz comments:

Ah nope I didnt! I see the template section I will give that a go now


Fahad Murtaza comments:

Yeah, please try that. Since the free version doesn't support more than one template, change the default one as you can see in the screenshot here.

https://s.w.org/plugins/ajax-load-more/screenshot-2.png?r=976169


Fahad Murtaza comments:

Use the shortcut builder once you are done with the template.

2014-08-31

Arnav Joy answers:

Please check this link

http://www.codeinwp.com/blog/load-old-wordpress-posts-on-the-same-page-with-ajax/

2014-09-01

Ian Lincicome answers:

tekdz,
I would not use a plugin for such a simple task. I have added code to your above code that should be the solution you are seeking. Let me know if you require further modifications. Here is your edited code:

<ul class="video-listing">

<?php
if(isset($_GET['ppp'])){
$ppp = $_GET['ppp'];//gets the no. of posts per page
}else{
$ppp = 6;
}

$args = array( 'post_type' => 'video', 'posts_per_page' => $ppp );

$loop = new WP_Query( $args );

while ( $loop->have_posts() ) : $loop->the_post();



$attachment_id = get_field('video_image', $child->ID);

$size = "video-carousel-medium";

$image = wp_get_attachment_image_src( $attachment_id, $size );

?>





<li>

<video id="1" class="video-js vjs-default-skin" controls preload="auto" poster="<?php echo $image[0]; ?>" data-setup='{"example_option":true}'>

<source src="<?php the_field('video_webm'); ?>" type='video/webm' />

</video>

<h3><?php the_field('video_sub_title'); ?></h3>

<?php the_field('video_decscription'); ?>

</li>





<?php endwhile; ?>

</ul><!--// .video-listing-->





<div class="load-more">

<a href="#?ppp=<?php echo $ppp+6; ?>">Load more...</a>

</div>


tekdz comments:

Thank you for the reply, I tried the above code but it didnt work - pressing load more didnt seem to do anything

There was no console errors either


Ian Lincicome comments:

I would need to see it live to solve this issue, but I suspect it is something with the link if it is not doing anything. Do you have a link you can show me? If so, I will try to fix it.