I have a wordpress code, which is pretty run in the mill. It’s just a loop that shows posts. It’s going to work as part of a pagination system, and I assume the only way to do this is to run a query which will change depending on if the user is in a category, or on a search page so the user gets a different set of posts.
if ( have_posts() ) : while ( have_posts() ) : the_post();
// ....
endwhile; endif;
Unfortunately I have no idea how to do this. I’ve tried a variety of things but none really helped the situation. I always seem to end up with just all the posts rather than the ones for the category I’m viewing. I assume I’m supposed to be using query_posts. 🙁
The pagination is AJAX and it posts two things to the wordpress loop file which are the offset and the page number. It basically checks when the user has scrolled down to the bottom of the page and loads more stuff. Here it is for reference:
<script type="text/javascript">
$(document).ready(function() {
var number = 10;
var offset = 0;
var page_number = 2;
var busy = false;
/* Bind the scroll function to an event */
$(window).bind('scroll', function(e) {
/* If the scroll height plus the window height is more than the document height minus 10, continue */
if($(window).scrollTop() + $(window).height() > $(document).height() - 10 && !busy) {
busy = true;
/* Quick message so you know more stuff is loading */
$('.loading-more').html('Click to load more posts..');
$.post('<?php bloginfo('siteurl') ?>/wp-admin/admin-ajax.php', {
action: 'and_action',
off: offset+number,
pagenumber: page_number - 1
}, function(data) {
offset = offset+number;
$('.empty-div').append('<div class="pages"><p>Welcome to <strong>Page '+page_number+'</strong></p></div><hr />'+data);
busy = false;
page_number += 1;
});
}
});
$('.loading-more').bind('click', function(e) {
busy = true;
$('.loading-more').html('<em>Loading more posts..</em>')
/* Quick message so you know more stuff is loading */
$.post('<?php bloginfo('siteurl') ?>/wp-admin/admin-ajax.php', {
action: 'and_action',
off: offset+number,
data: data,
pagenumber: page_number - 1
}, function(data) {
offset = offset+number;
$('.empty-div').append('<div class="pages"><p>Welcome to <strong>Page '+page_number+'</strong></p></div><hr />'+data);
busy = false;
page_number += 1;
$('.loading-more').html('Click to load more posts..');
});
});
});
</script>
I binded a click event to it too just for back up. Any help is really appreciated 🙂
Update
here’s the PHP im using in functions.php
add_action('wp_ajax_and_action', 'get_posts_page');
add_action('wp_ajax_nopriv_and_action', 'get_posts_page');
function and_action() {
$query_string = $_POST['query_string'];
}
function get_posts_page() {
global $wpdb;
query_posts($query_string . '&posts_per_page=10&post_status=publish&offset='.$_POST['off']);
if ( have_posts() ) : while ( have_posts() ) : the_post();
?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h1 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h1>
<div class="entry-meta">
<span class="%1$s">Posted on</span> <?php the_date('F jS'); ?>
- <a class="comment-link" href="<?php the_permalink(); ?>#comment"><?php comments_number('Leave a Response!', '1 Response', '% Responses'); ?></a>
</div><!-- .entry-meta -->
<br />
<a class="post-thumbnail-thing" href="<?php the_permalink(); ?>"><?php echo get_the_post_thumbnail(); ?></a>
<div class="entry-content">
<?php the_content( __( '<span class="alignright">
<span class="button-css">Continue Reading →</span>
</span>', 'twentyten' ) ); ?><br /><hr />
<?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?>
</div><!-- .entry-content -->
</div><!-- #post-## -->
<?php comments_template( '', true ); ?>
<?php
endwhile; endif;
wp_reset_query();
die();
}