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"); ?>

<?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!


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(){
    $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() ) {
            $out .= '<div class="story">';
            $out .= '<a href="' . the_permalink().'" title="'. the_title'.">' . the_title().' - '.the_time("F j, Y h:i A") .'</a></div>';
                    'what' => 'has',
                    'data' => array('html' => $out, 'offset' => $_POST['offset']
        $out = __('Sorry but No more!');
                    'what' => 'none',
                    'data' => $out


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">
<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
                    //no more links found
                    jQuery(".more_links").append( this.data.html );

                //end if
                });//end each


        return false;

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

function add_scripts_121(){

and you are set

  • 2
    This answer is a goldmine that you really can't find in textbooks – AlxVallejo Oct 24 '12 at 17:35
  • I know that this is an old answer, but it's still relevant to me. I do wonder why the return false is necessary, as you are calling it on the click event of a button, to which there's no form related. I think you could leave it out. Also, how does check_ajax_referer know what to check, as you are not using any nonce fields? And what is wp-ajax-response? – Bram Vanroy Feb 27 '15 at 11:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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