Add link to show more posts without refreshing page WordPress

You can view the page I'm referencing here: http://theseattlevine.com/wordpress2013/

Specifically, I'm talking about the grid of 6 posts at the bottom of the page.

I want to add a link under those that says "load more" which will load 2 more rows of posts without refreshing the page. I assume this should be done with Ajax, but I am woefully unfamiliar with it.

Here is the code used to display the posts in the grid:

<div id="homegrid">
<?php $gridargs = array(
'posts_per_page' => '6',
'post_type' => array(
'user_article','user_video','user_audio','user_image' ,
),
); ?>
<?php query_posts( $gridargs ) ?>
<?php if (have_posts()) { ?>
<?php $count = 1; ?>
<?php while (have_posts()) { the_post(); ?>
<?php $count++; ?>
<?php if ($count % 3 == 0) { //For every third iteration, give the box a class of "middle" to get the spacing right
$position = 'middle';
} else {
$position = 'sides';
}
?>

<?php
if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
$imageid = get_post_thumbnail_id();
$imageattr = wp_get_attachment_image_src($imageid, 'home-grid'); //get an array with url[0], width[1], and height[2]
$imagelink = $imageattr[0];
} elseif (get_field('featured_image')) {
$imageid = get_field('featured_image');
$imageattr = wp_get_attachment_image_src($imageid , 'home-grid');
$imagelink = $imageattr[0];
} else {
$imagelink = get_bloginfo('stylesheet_directory') . '/images/default-100x100.jpg' ;
}
?>


<div class="third section <?php echo $position; ?>" style="background-image:url(<?php echo $imagelink; ?>);">
<div class="third-flag">
<?php pretty_post_types(); ?>
</div>
<div class="third-slide wrap">
<div class="third-slide preview">
<div class="third-slide title">
<?php the_title(); ?>
</div>
<div class="third-slide authordate">
By <a href="<?php echo get_author_posts_url($authorid); ?>"><?php echo $authorname; ?></a> | <?php the_time('m-d-Y'); ?>
</div>
</div>
</div>
<a href="<?php the_permalink(); ?>" class="linkspan"><span></span></a>
</div>


<?php }; //endwhile ?>
<?php }; //endif ?>
<?php wp_reset_query(); ?>




<div style="clear:both;"></div>
</div>

Answers (2)

2013-04-16

Daniel Yoen answers:

try this :

jQuery(document).ready(function() {

jQuery(document).on("click", ".linkspan", function(e) {

e.preventDefault();

var varurl = jQuery(this).attr("href");

jQuery.ajax({
type: 'POST',
url: varurl,
dataType: 'html',
success: function (response) {
jQuery("body").html(response);

window.history.pushState(null, null, varurl); // push url

}
});

});

});

---

Zac Eckstein comments:

Thanks. How would I implement that into the page? What would my <a> tag look like to properly call this?

---

Daniel Yoen comments:

I got this on your script :

<a href="<?php the_permalink(); ?>" class="linkspan"><span></span></a>

so, I triggered with :

jQuery(document).on("click", ".linkspan", function(e) {

you can change this with your own. :-)

Put the code on footer.php //simple method

<script type="text/javascript">

jQuery(document).ready(function() {

jQuery(document).on("click", ".linkspan", function(e) {
e.preventDefault();
var varurl = jQuery(this).attr("href");

jQuery.ajax({
type: 'POST',
url: varurl,
dataType: 'html',
success: function (response) {
jQuery("body").html(response);

window.history.pushState(null, null, varurl); // push url

}
});
});
});
</script>

I have advance method for this action, just tested and let you know soon, demo link send via PM :-)

best,
Daniel

---

Daniel Yoen comments:

ref:

jQuery(document).ready(function() {

jQuery(document).on("click", ".linkspan", function(e) {
e.preventDefault();
var varurl = jQuery(this).attr("href");

jQuery.ajax({
type: 'POST',
url: varurl,
dataType: 'html',
success: function (response) {
jQuery("body").html(jQuery(response).find("body"));

window.history.pushState(null, null, varurl); // push url

}
});
});
});

2013-04-16

Yakir Sitbon answers:

Why you are not using with simple .load() method by jQuery (reference: http://api.jquery.com/load/).

---

Zac Eckstein comments:

I'm open to using it, but I don't know how. Can you show me?

---

Yakir Sitbon comments:

Put it in your functions.php file:

add_action('admin_footer', 'my_custom_admin_footer');
function my_custom_admin_footer() {
?>
<script type="text/javascript">
(function($) {
$('a.linkspan', '#homegrid').live('click', function(e) {
e.preventDefault();
$('#homegrid')
.css('opacity', '0.75')
.load( $(this ).attr('href') + ' #homegrid' );
window.history.pushState( null, null, $(this ).attr('href') );
});
})(jQuery);
</script>
<?php
}