0

I'm using Ajax Load more plugin.
I have made it to load X posts on button click, but on the page load there are no posts loaded initially (obviously).
What should I do to have (let's say) 10 posts loaded automatically and then next ones loading only on button click.
The code right now for that is :

    echo do_shortcode('
      [ajax_load_more category="'.$category->slug.'" 
      posts_per_page="10" 
      pause="true" 
      scroll="false" 
      button_label="Load articles" 
      button_loading_label="Loading..."]'
    );

Do I have to code that functionality on my own or there is some way to achieve that just with the shortcode change?!

2

You need to set the offset in the query.

To get the right offset value, you will need to store and send back the offset value to your ajax script (data-offset in the input or an hidden field).

$args = array(
          'posts_per_page'=> 10,
          'post_status'=> 'publish',
          'offset'=> $_POST['offset']
);

$_POST['offset'] is coming from your button with a js script.

0

https://youtu.be/6U92B_MHfqU

copy and paste the code as mension in comment of this video. This simplest way to create custom ajax load more in wordpress. Follow the step by step and finally you generate custom ajax load more.

step1: post type code:

//start video post
$labels2 = array(
    'name' => _x('video', 'post type general name', 'robin'),
    'singular_name' => _x('video', 'post type singular name', 'robin'),
    'add_new' => _x('Add New', 'video', 'robin'),
    'add_new_item' => __('Add New video', 'robin'),
    'edit_item' => __('Edit video', 'robin'),
    'new_item' => __('New video', 'robin'),
    'all_items' => __('All video', 'robin'),
    'view_item' => __('View video', 'robin'),
    'search_items' => __('Search video', 'robin'),
    'not_found' =>  __('No video found', 'robin'),
    'not_found_in_trash' => __('No video found in Trash', 'robin'),
    'parent_item_colon' => '',
    'menu_name' => 'video'
);
$args2 = array(
    'labels' => $labels2,
    'public' => true,
    'publicly_queryable' => true,
    'show_ui' => true,
    'show_in_menu' => true,
    'query_var' => true,
    'rewrite' => true,
    'capability_type' => 'post',
    'has_archive' => true,
    'hierarchical' => false,
    'menu_position' => null,
    'taxonomies'    => array( 'category','post_tag'),
    'supports' => array('title','editor','thumbnail')
);
register_post_type('video',$args2);
//end video post

step2: function hook:

//load more  ajax
/* ===============================================*/
function my_wfsubmit_callback() {
    $id = $_POST['hide'];
    $current=$id;
    $prev=2;
    $prev=$prev+$current;
    $i=0;
    $the_query = new WP_Query(array( 'post_type' => 'video', 'posts_per_page' =>'-1','order'=>'ASC','orderby'=>'date' ));
    if($the_query->have_posts()):
        while($the_query->have_posts()):$the_query->the_post();?>
            <?php if($i>=$current && $i<$prev){?>

                <img alt="" src="<?php
                $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($query->ID),'full');
                echo $thumb[0];?>">
                <?php the_title();?>
                <?php the_content();?>
            <?php }$i++;?>
        <?php endwhile;
        wp_reset_postdata();
    endif;
    die();
}
add_action( 'wp_ajax_wfsubmit_action', 'my_wfsubmit_callback' ); //wfsubmit_action = ajax action with wordpress hook wp_ajax_wfsubmit_action
add_action( 'wp_ajax_nopriv_wfsubmit_action', 'my_wfsubmit_callback' ); //wfsubmit_action = ajax action with wordpress hook wp_ajax_nopriv_wfsubmit_action
/* ================= end ajax submit ===============*/

step3: phpcode:

<?php $args = array( 'post_type' => 'video', 'posts_per_page' =>'4','order'=>'ASC','orderby'=>'date' );
$query=new WP_Query($args);

while ( $query->have_posts() ) : $query->the_post();
    ?>

    <img alt="" src="<?php
    $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($query->ID),'full');
    echo $thumb[0];?>">
    <?php the_title();?>
<?php endwhile;?>
<div id="sendtxt"></div>

<?php $args1 = array( 'post_type' => 'video', 'posts_per_page' =>'-1','order'=>'ASC','orderby'=>'date' );
$query1=new WP_Query($args1);
$c=0;
while ( $query1->have_posts() ) : $query1->the_post();
    $c++;
endwhile;
wp_reset_postdata();
$max=$c;
?>

<form id="webform" role="form" class="webform" >
      <textarea name="hide" style="display:none;" class="CUR"  id="output">4
      </textarea>
    <a href="javascript:void(0)" id="webformsubmit" class="read-btn blck">Load More</a>
</form>

step4: script code:

<script type="text/javascript" src="/wordpress/js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
    $('#webformsubmit').click(function(event){
        event.preventDefault();
        var priBox = "extra";   //extra data,field,tag
        var ajaxurlsb = "<?php echo admin_url( 'admin-ajax.php' );?>"

        $.ajax({
            type: "POST",
            url: ajaxurlsb+'?action=wfsubmit_action',
            data: $("#webform").serialize()+'&txtp='+priBox,
            success: function(data)    { // Get the result and asign to each cases
//$('#sendtxt').html(data);  //output div ID (sendtxt)
                $('#sendtxt').append(data);
            }
        });

    });
    // counter
    $('#webformsubmit').click(function() {
        $('#output').html(function(i, val) { return val*1+2 });
    });

    // button display


    $('#webformsubmit').click(function() {
        var curr_val = $('#output').val();
        if(curr_val ><?php echo $max;?>){
            $("#webformsubmit").css("display", "none");
        }
    });

</script>
<script type="text/javascript" src="/wordpress/js/jquery-3.1.1.min.js"></script>

step5: jquery download link:

https://jquery.com/download/

  • you should not include your own copy of jQuery, use the one that is installed with WordPress. – Milo Dec 28 '16 at 18:10

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.