Create Ajax Navigation on my home page WordPress
- SOLVED
First of all, here is the homepage of the site I need this done on: http://theseattlevine.com/wordpress2013/
The part I'm talking about is the "Previous" and "Next" buttons below the set of 6 posts at the top. I want those buttons to advance to the next 6 posts without refreshing the page (ajax, I'm assuming). I also want the "Previous" button to be hidden when on the first page and the "Next" button to be hidden when on the last page. Plus, I would like to display the page number in the middle based on what page they are on.
I am skilled with PHP and CSS but I'm a dummy when it comes to JS or jquery or ajax stuff so I'm hoping to get someone to help me out here.
Here is the part of the home page template that renders the 6 posts:
<div id="home-featured">
<?php $gridargs = array(
'posts_per_page' => '6',
'post_type' => 'post',
'offset' => '1'
); ?>
<?php
// The Query
$the_query = new wp_query( $gridargs );
$count = 1;
// The Loop
while ( $the_query->have_posts() ) :
$the_query->the_post();
$count++;
$authid = get_the_author_meta('ID');
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-image-home.jpg' ;
}
?>
<div onclick="location.href='<?php echo get_permalink(); ?>';" style="cursor:pointer; background-image:url(<?php echo $imagelink; ?>);" class="third section">
<div class="third-flag">
<?php pretty_post_types(get_the_id()); ?>
</div>
<div class="third-title">
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</div>
<div class="third-date">
<?php the_time('m-d-Y'); ?>
</div>
</div>
<?php endwhile; //endwhile ?>
<?php wp_reset_query(); ?>
<div style="clear:both;"></div>
</div>
And here is the code for the nav box:
<div class="short-third section" id="user-posts">
<a class="home-nav left button">
⇐ Previous
</a>
<div class="short-message-nav">
Page XX
</div>
<a class="home-nav right button">
Next ⇒
</a>
</div>
Thanks in advance!
Answers (3)
tong chen answers:
Step 1: jquery code. add the following code to the footer.php
<script type="text/javascript">
var ajax_url = '<?php echo admin_url(); ?>admin-ajax.php'; //ajax url
$("#user-posts a.left").hide(); //hide the Previous button
jQuery(document).ready(function($) {
$('#user-posts a').bind("click",function(){
var paged = $(this).attr( 'rel' );
$.ajax({
url:ajax_url,
type:'get',
data:'action=home_nav&&paged=' + paged,
success:function(data){
var posts = $(data).find(".block"); //find block
$('#home-featured').html(posts);
var pre_page = $(data).find(".pre_page").text(); //get pre page number
if(pre_page){
$("#user-posts a.left").show();
$("#user-posts a.left").attr("rel",pre_page);
}else{
$("#user-posts a.left").hide();
}
var current_pge = $(data).find(".current_page").text(); //get current page number
$(".page_number").html(current_pge);
var next_page = $(data).find(".next_page").text();
if(next_page){
$("#user-posts a.right").show();
$("#user-posts a.right").attr("rel",next_page); //get next page number
}else{
$("#user-posts a.right").hide();
}
}
});
});
});
</script>
Step 2：change your home.php :
<div id="home-featured">
<?php $gridargs = array(
'posts_per_page' => 6,
'ignore_sticky_posts' => 1, //ignore sticky
'post_status' => array('publish'), //post_status
'paged' => 1 //paged 1
); ?>
<?php
// The Query
$the_query = new wp_query( $gridargs );
$count = 1;
// The Loop
while ( $the_query->have_posts() ) :
$the_query->the_post();
$count++;
$authid = get_the_author_meta('ID');
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-image-home.jpg' ;
}
?>
<div onclick="location.href='<?php echo get_permalink(); ?>';" style="cursor:pointer; background-image:url(<?php echo $imagelink; ?>);" class="third section">
<div class="third-flag">
<?php pretty_post_types(get_the_id()); ?>
</div>
<div class="third-title">
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</div>
<div class="third-date">
<?php the_time('m-d-Y'); ?>
</div>
</div>
<?php endwhile; //endwhile ?>
<?php wp_reset_query(); ?>
<div style="clear:both;"></div>
</div>
Step 3:change you nav code
<div class="short-third section" id="user-posts">
<?php
$totalpages = $the_query->max_num_pages;
?>
<a class="home-nav left button" href="javascript:void(0);" rel="1">
⇐ Previous
</a>
<div class="short-message-nav">
Page <span class="page_number">1</span> <!--add a span-->
</div>
<?php if($totalpages > 1){ ?>
<a class="home-nav right button" href="javascript:void(0);" rel="2">
Next ⇒
</a>
<?php } ?>
</div>
Step 4:add following code to the functions.php
add_action("wp_ajax_home_nav", "home_page_ajax");
add_action("wp_ajax_nopriv_home_nav", "home_page_ajax");
function home_page_ajax() {
if( isset($_GET['action']) && ($_GET['action'] == 'home_nav') ){
$page = (int)$_GET['paged'];
if(!$page)
$page = 1;
$gridargs = array(
'posts_per_page' => 6,
'ignore_sticky_posts' => 1,
'post_status' => array('publish'),
'paged' => $page
);
$the_query = new wp_query( $gridargs );
echo '<div class="posts">';
while ( $the_query->have_posts() ) :
$the_query->the_post();
$authid = get_the_author_meta('ID');
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-image-home.jpg' ;
}
?>
<div onclick="location.href='<?php echo get_permalink(); ?>';" style="cursor:pointer; background-image:url(<?php echo $imagelink; ?>);" class="third section">
<div class="third-flag">
<?php pretty_post_types(get_the_id()); ?>
</div>
<div class="third-title">
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</div>
<div class="third-date">
<?php the_time('m-d-Y'); ?>
</div>
</div>
<?php endwhile;
echo '</div><div>';
$totalpages = $the_query->max_num_pages;
if($page>1){
$pre_page = $page - 1;
if($pre_page){
?>
<span class="pre_page"><?php echo $pre_page; ?></span>
<?php } } ?>
<span class="current_page"><?php echo $page; ?></span>
<?php
if($page<$totalpages){
$next_page = $page+1;
?>
<span class="next_page"><?php echo $next_page; ?></span>
<?php }
echo '</div>';
}
die();
}
Step 5：Is OK...
Zac Eckstein comments:
Thank you for your great answer! This seems to be on the right track, but the content doesn't seem to be loading on the pages. I have your code implemented now, you can take a look at what I mean.
Zac Eckstein comments:
I have to go to bed, but I will check back in the morning. Thanks again!
tong chen comments:
I am sorry,I am not enough careful.
Step 4:
add_action("wp_ajax_home_nav", "home_page_ajax");
add_action("wp_ajax_nopriv_home_nav", "home_page_ajax");
function home_page_ajax() {
if( isset($_GET['action']) && ($_GET['action'] == 'home_nav') ){
$page = (int)$_GET['paged'];
if(!$page)
$page = 1;
$gridargs = array(
'posts_per_page' => 6,
'ignore_sticky_posts' => 1,
'post_status' => array('publish'),
'paged' => $page
);
$the_query = new wp_query( $gridargs );
echo '<div class="posts">';
while ( $the_query->have_posts() ) :
$the_query->the_post();
$authid = get_the_author_meta('ID');
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-image-home.jpg' ;
}
?>
<div onclick="location.href='<?php echo get_permalink(); ?>';" style="cursor:pointer; background-image:url(<?php echo $imagelink; ?>);" class="block third section">
<div class="third-flag">
<?php pretty_post_types(get_the_id()); ?>
</div>
<div class="third-title">
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</div>
<div class="third-date">
<?php the_time('m-d-Y'); ?>
</div>
</div>
<?php endwhile;
echo '</div><div>';
$totalpages = $the_query->max_num_pages;
if($page>1){
$pre_page = $page - 1;
if($pre_page){
?>
<span class="pre_page"><?php echo $pre_page; ?></span>
<?php } } ?>
<span class="current_page"><?php echo $page; ?></span>
<?php
if($page<$totalpages){
$next_page = $page+1;
?>
<span class="next_page"><?php echo $next_page; ?></span>
<?php }
echo '</div>'
}
die();
}
Zac Eckstein comments:
Your code worked the best so the prize money is yours! Thanks again!
Arnav Joy answers:
i am working on it.
Arnav Joy comments:
if you are still looking for solution then you can try it:-
here is new code of your home page
<?php
/**
Template Name:Page Ajax
*/
get_header(); ?>
<div id="home-featured" data-ajax="<?php echo get_bloginfo('url');?>/wp-admin/admin-ajax.php">
<?php $gridargs = array(
'posts_per_page' => '6',
'post_type' => 'post',
'offset' => '1'
); ?>
<?php
// The Query
$the_query = new wp_query( $gridargs );
$count = 1;
// The Loop
while ( $the_query->have_posts() ) :
$the_query->the_post();
$count++;
$authid = get_the_author_meta('ID');
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-image-home.jpg' ;
}
?>
<div onclick="location.href='<?php echo get_permalink(); ?>';" style="cursor:pointer; background-image:url(<?php echo $imagelink; ?>);" class="third section">
<div class="third-flag">
<?php pretty_post_types(get_the_id()); ?>
</div>
<div class="third-title">
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</div>
<div class="third-date">
<?php the_time('m-d-Y'); ?>
</div>
</div>
<?php endwhile; //endwhile ?>
<?php wp_reset_query(); ?>
<div style="clear:both;"></div>
</div>
<div class="short-third section" id="user-posts">
<!--<a class="home-nav left button" data-type="prev">
⇐ Previous
</a>
-->
<div class="short-message-nav" data-page="1" >
Page 1
</div>
<a class="home-nav right button" data-type="next">
Next ⇒
</a>
</div>
<script>
jQuery(document).ready(function($){
$('.home-nav').click(function(){
get_ajax_posts($(this));
});
});
function get_ajax_posts($this){
var data_type = $this.attr('data-type');
var data_page = jQuery('.short-message-nav').attr('data-page');
var ajax_url = jQuery('#home-featured').attr( 'data-ajax' );
var response='';
jQuery.ajax({
type : "post",
url : ajax_url,
data : {
'action': "get_ajax_posts",
'data_type':data_type,
'data_page':data_page
},
success: function(return_val) {
jQuery('#home-featured').html(return_val).find('.home-nav').click(function(){
get_ajax_posts(jQuery(this));
});
}
});
}
</script>
<?php get_footer(); ?>
and write following code in functions.php of your theme:-
add_action("wp_ajax_get_ajax_posts", "get_ajax_posts");
add_action("wp_ajax_nopriv_get_ajax_posts", "get_ajax_posts");
function get_ajax_posts(){
$data_type = $_REQUEST['data_type'];
$data_page = $_REQUEST['data_page'];
$prev_page_num = $data_page - 1;
$next_page_num = $data_page + 1;
$next_page = 0;
$prev_page = 0;
if( $data_type == 'prev' )
$paged = $prev_page_num ;
else
$paged = $next_page_num ;
wp_reset_query();
query_posts('post_type=post&posts_per_page=1&paged='.$prev_page_num);
if( have_posts() ) : $prev_page = 1; endif;
wp_reset_query();
query_posts('post_type=post&posts_per_page=1&paged='.$next_page_num);
if( have_posts() ) : $next_page = 1; endif;
wp_reset_query();
query_posts('post_type=post&posts_per_page=6&paged='.$paged);
if( have_posts() ) : while( have_posts() ) : the_post();
$str .= get_the_title().'<br>';
endwhile;endif;
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-image-home.jpg' ;
}
$str .= '<div onclick="location.href='. get_permalink().'" style="cursor:pointer; background-image:url('.$imagelink.');" class="third section">
<div class="third-flag">
pretty_post_types(get_the_id());
</div>
<div class="third-title">
<a href="'.get_permalink().'">'.get_the_title().'</a>
</div>
<div class="third-date">'.get_the_time("m-d-Y").'</div>
</div>';
endwhile;
wp_reset_query();
$str .='<div style="clear:both;"></div>';
$str.= '<div class="short-third section" id="user-posts">';
if( $data_page > 1 ){
$str.='<a class="home-nav left button" data-type="prev">⇐ Previous</a>';
}
$str.='<div class="short-message-nav" data-page="'.$paged.'" >Page '.$paged.'</div>';
if( $next_page == 1 ){
$str.='<a class="home-nav right button" data-type="next">Next ⇒</a>';
}
$str.='</div>';
echo $str;
die;
}
Hariprasad Vijayan answers:
Hello,
Change the code like,
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.nav-next a').live('click', function(e) {
e.preventDefault();
var link = jQuery(this).attr('href');
jQuery('#home-featured').fadeOut().load(link + ' #home-featured', function() {
jQuery('#home-featured').fadeIn(); });
});
jQuery('.nav-previous a').live('click', function(e) {
e.preventDefault();
var link = jQuery(this).attr('href');
jQuery('#home-featured').fadeOut().load(link + ' #home-featured', function() {
jQuery('#home-featured').fadeIn(); });
});
jQuery('.nav-next a').addClass('home-nav left button');
jQuery('.nav-previous a').addClass('home-nav left button');
});
</script>
<div id="home-featured">
<?php $gridargs = array(
'posts_per_page' => '6',
'post_type' => 'post',
'offset' => '1'
); ?>
<?php
// The Query
$the_query = new wp_query( $gridargs );
$count = 1;
// The Loop
while ( $the_query->have_posts() ) :
$the_query->the_post();
$count++;
$authid = get_the_author_meta('ID');
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-image-home.jpg' ;
}
?>
<div onclick="location.href='<?php echo get_permalink(); ?>';" style="cursor:pointer; background-image:url(<?php echo $imagelink; ?>);" class="third section">
<div class="third-flag">
<?php pretty_post_types(get_the_id()); ?>
</div>
<div class="third-title">
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</div>
<div class="third-date">
<?php the_time('m-d-Y'); ?>
</div>
</div>
<?php endwhile; //endwhile ?>
<?php wp_reset_query(); ?>
<div style="clear:both;"></div>
<div class="short-third section" id="user-posts">
<div class="nav-previous">
<?php next_posts_link( __( '⇐ Previous') ); ?>
</div>
<div class="short-message-nav"> Page
<?php echo (get_query_var('paged')) ? get_query_var('paged') : 1; ?>
</div>
<div class="nav-next">
<?php previous_posts_link( __( 'Next ⇒' ) ); ?>
</div>
</div>
</div>
I have changed the position of "short-third" div. Just moved it into "home-featured" div. And added two divs in it.
Hope this will work... Good luck...