Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I have a list of the most recent post titles in sidebar.php. Here is an example of how that code looks:

<?php $args = array('posts_per_page' => 20); ?>
<?php $sidebar = new WP_Query($args); ?>
<?php if ( $sidebar->have_posts() ) : ?>
<?php while ( $sidebar->have_posts() ) : $sidebar->the_post(); ?>

<div class="story">
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
  <?php the_title(); ?> - <?php the_time("F j, Y h:i A"); ?>
</a>
</div>

<?php endwhile; ?>
<?php endif; ?>

That part works perfectly. It displays the 20 latest post titles and post times wrapped in permalinks. However, I am trying to do a bit more. I want to create a load more button at the bottom to fetch the next 20 post titles. I know my jQuery and that is not the issue.

I need help with figuring out how to create a custom loop in a new custom .php template file that only generates the html above. That file needs to be able to accept a parameter for a page number, so that my javascript can fetch an incremented URL each time.

I would appreciate any help, thanks!

share|improve this question

1 Answer 1

up vote 12 down vote accepted

you can wrap your function and hook it to ajax call like this:

//if you want only logged in users to access this function use this hook
add_action('wp_ajax_more_links', 'my_AJAX_more_links_function');
//if you want none logged in users to access this function use this hook
add_action('wp_ajax_nopriv_more_links', 'my_AJAX_more_links_function');

function my_AJAX_more_links_function(){
    check_ajax_referer('more_links');
    $success_response = new WP_Ajax_Response();
    $args = array('posts_per_page' => 20 , 'offset' => $_POST['offset']);
    $sidebar = new WP_Query($args);
    if ( $sidebar->have_posts() ){ 
         while ( $sidebar->have_posts() ) {
            $sidebar->the_post(); 
            $out .= '<div class="story">';
            $out .= '<a href="' . the_permalink().'" title="'. the_title'.">' . the_title().' - '.the_time("F j, Y h:i A") .'</a></div>';
        }
        $success_response->add(array(
                    'what' => 'has',
                    'data' => array('html' => $out, 'offset' => $_POST['offset']
        ));
    }else{
        $out = __('Sorry but No more!');
        $success_response->add(array(
                    'what' => 'none',
                    'data' => $out
                ));
    }

    $success_response->send();      
    exit;   
}

then add this to your sidebar function at the end

<span class="more_links"></span>
<span class="get_more">
    <input type="hidden" name="offset" id="offset" value="20">
    <input type="submit" name="more" id="more" value="Get more links">
</span>
<script type="text/javascript" >
jQuery(document).ready(function($) {
    jQuery('#more').click(function() { 
        var data = {
            action: 'more_links',
            offset: jQuery( '#offset' ).val(),
            _ajax_nonce: <?php echo wp_create_nonce( 'more_links' ); ?>
        };

        // since 2.8 ajaxurl is always defined in the admin header and points to admin-ajax.php
        jQuery.post(ajaxurl, data, function(response) {
            var res = wpAjax.parseAjaxResponse(response, 'ajax-response');
            jQuery.each( res.responses, function() { 
                if (this.what == 'has') {
                    //insert links
                    jQuery(".more_links").append( this.data.html ); 
                    //update offset value
                    jQuery("#offset").val(this.data.offset);
                    jQuery(".more_links").fadeIn("fast");
                }else{
                    //no more links found
                    jQuery(".more_links").append( this.data.html );
                    jQuery(".get_more").remove();

                }
                //end if
                });//end each


        });

        return false;
    })
});
</script>

and there you go, oh wait you need to add wp-ajax-response so

add_action('wp_head','add_scripts_121');
function add_scripts_121(){
    wp_enqueue_script('wp-ajax-response');
}

and you are set

share|improve this answer
2  
This answer is a goldmine that you really can't find in textbooks –  AlxVallejo Oct 24 '12 at 17:35

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.