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>
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.
Arnav Joy answers:
Please check this link
http://www.codeinwp.com/blog/load-old-wordpress-posts-on-the-same-page-with-ajax/
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.