I'm using a pre made wordpress theme for my site. However, I wanted to make a custom front-page.php so I did, but now the problem is that I can't figure out how to add the ajax load more button to it. My theme already utilizes the ajax load more button, so I thought it would be simple to add. But I think I may be adding in the code at the wrong spot, or have my queries messed up?
Can anyone help me add this load more button?
my custom front-page.php
<?php get_header(); get_template_part ('inc/carousel'); $the_query = new WP_Query( [ 'posts_per_page' => 13, 'paged' => get_query_var('paged', 1) ] ); if ( $the_query->have_posts() ) { ?> <div id="ajax"> <?php $i = 0; $j = 0; while ( $the_query->have_posts() ) { $the_query->the_post(); if ( $i % 5 === 0 ) { // Large post: on the first iteration and every 7th post after... ?> <div class="row"> <article <?php post_class( 'col-sm-12 col-md-12' ); ?>> <div class="large-front-container"> <?php the_post_thumbnail('full', array('class' => 'large-front-thumbnail')); ?> </div> <div class="front-page-date"><?php echo str_replace('mins', 'minutes', human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'); ?></div> <h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p> <div class="front-page-post-info"> <a class="moretext" href="<?php the_permalink(); ?>">Read more</a> <?php get_template_part( 'front-shop-the-post' ); ?> <?php get_template_part( 'share-buttons' ); ?> <div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div> </div> </article> </div> <?php } else { // Small posts ?> <?php if($j % 2 === 0) echo '<div class="row">'; ?> <article <?php post_class( 'col-sm-6 col-md-6' ); ?>> <?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?> <div class="front-page-date"><?php echo human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'; ?></div> <h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p> <div class="front-page-post-info"> <a class="moretext" href="<?php the_permalink(); ?>">Read more</a> <?php get_template_part( 'front-shop-the-post' ); ?> <?php get_template_part( 'share-buttons' ); ?> <div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div> </div> </article> <?php $j++; if($j % 2 === 0) echo '</div>'; ?> <?php } $i++; }?> </div> <?php } get_footer(); the post-nav.php code that I found inside my theme
<div class="row pagination-below"><div class="col-md-12"> <?php $pagination_type = novablog_getVariable('pagination_type') ? novablog_getVariable('pagination_type') : 'pagnum'; if($pagination_type=='pagnum') : the_posts_pagination( array( 'mid_size' => 3, 'type' => 'list', 'prev_text' => theme_locals("prev"), 'next_text' => theme_locals("next") ) ); endif; global $wp_query; if ( $wp_query->max_num_pages > 1 && $pagination_type=='paglink' ) : ?> <div class="paglink"> <span class="pull-left"><?php previous_posts_link(theme_locals("newer")) ?></span> <span class="pull-right"><?php next_posts_link(theme_locals("older")) ?></span> </div> <?php endif; ?> <?php if ( $wp_query->max_num_pages > 1 && $pagination_type=='loadmore' or $wp_query->max_num_pages > 1 && $pagination_type=='infinite' ) { $all_num_pages = $wp_query -> max_num_pages; $next_page_url = novablog_next_page($all_num_pages); ?> <div class="ajax-pagination-container"> <a href="<?php echo esc_url($next_page_url); ?>" id="ajax-load-more-posts-button"></a> </div> <?php } ?> </div></div> This is how the load more button appears on my local host 
example of what I want my front page post layout to look like. 1 post on a row, 2 rows of 2 posts on a row, 1 post on a row, and so on. Then after every 15 posts the load more button appears. 
This is what chrome developer looks like when I inspect the load more button 
2 Answers
Answers 1
You should probably just use an appropriate plugin to provide the functionality you're stuggling with.
This https://en-ca.wordpress.org/plugins/easy-load-more/ claims to do exactly what you're looking for with "minimal" theme changes.
Answers 2
Add this to the front-page.php
<?php get_header(); get_template_part ('inc/carousel'); ?> <script> var now=2; // when click start in page 2 jQuery(document).on('click', '#load_more_btn', function () { jQuery.ajax({ type: "POST", url: "<?php echo get_site_url(); ?>/wp-admin/admin-ajax.php", data: { action: 'my_load_more_function', // the name of the function in functions.php paged: now, // set the page to get the ajax request posts_per_page: 1 //number of post to get (use 1 for testing) }, success: function (data) { jQuery("#ajax").append(data); // put the content into ajax container now=now+1; // add 1 to next page }, error: function (errorThrown) { alert(errorThrown); // only for debuggin } }); }); </script> <section id="ajax"><!-- i have to change div to section, maybe a extra div declare --> <?php $the_query = new WP_Query( [ 'posts_per_page' => 1, // i use 1 for testing 'orderby'=>'title', // add order for prevent duplicity 'order'=>'ASC', 'paged' => get_query_var('paged', 1) //page number 1 on load ] ); if ($the_query->have_posts()) { $i = 0; $j = 0; while ($the_query->have_posts()) { $the_query->the_post(); if ( $i % 5 === 0 ) { // Large post: on the first iteration and every 7th post after... ?> <div class="row"> <article <?php post_class( 'col-sm-12 col-md-12' ); ?>> <div class="large-front-container"> <?php the_post_thumbnail('full', array('class' => 'large-front-thumbnail')); ?> </div> <div class="front-page-date"><?php echo str_replace('mins', 'minutes', human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'); ?></div> <h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p> <div class="front-page-post-info"> <a class="moretext" href="<?php the_permalink(); ?>">Read more</a> <?php get_template_part( 'front-shop-the-post' ); ?> <?php get_template_part( 'share-buttons' ); ?> <div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div> </div> </article> </div> <?php } else { // Small posts ?> <?php if($j % 2 === 0){ echo '<div class="row">';} ?> <article <?php post_class( 'col-sm-6 col-md-6' ); ?>> <?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?> <div class="front-page-date"><?php echo human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'; ?></div> <h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p> <div class="front-page-post-info"> <a class="moretext" href="<?php the_permalink(); ?>">Read more</a> <?php get_template_part( 'front-shop-the-post' ); ?> <?php get_template_part( 'share-buttons' ); ?> <div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div> </div> </article> <?php $j++; if($j % 2 === 0){ echo '</div>';}?> <?php } $i++; }?> <?php }?> </section> <button id="load_more_btn">Load More</button> <!-- button out of ajax container for load content and button displayed at the bottom --> <?php get_footer(); And then in the functions.php add this code below:
add_action('wp_ajax_my_load_more_function', 'my_load_more_function'); add_action('wp_ajax_nopriv_my_load_more_function', 'my_load_more_function'); function my_load_more_function() { $query = new WP_Query( [ 'posts_per_page' => $_POST["posts_per_page"], 'orderby'=>'title', 'order'=>'ASC', 'paged' => get_query_var('paged', $_POST["paged"]) ] ); if ($query->have_posts()) { $i = 0; $j = 0; while ($query->have_posts()) { $query->the_post(); if ( $i % 5 === 0 ) { // Large post: on the first iteration and every 7th post after... ?> <div class="row"> <article <?php post_class( 'col-sm-12 col-md-12' ); ?>> <div class="large-front-container"> <?php the_post_thumbnail('full', array('class' => 'large-front-thumbnail')); ?> </div> <div class="front-page-date"><?php echo str_replace('mins', 'minutes', human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'); ?></div> <h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p> <div class="front-page-post-info"> <a class="moretext" href="<?php the_permalink(); ?>">Read more</a> <?php get_template_part( 'front-shop-the-post' ); ?> <?php get_template_part( 'share-buttons' ); ?> <div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div> </div> </article> </div> <?php } else { // Small posts ?> <?php if($j % 2 === 0) echo '<div class="row">'; ?> <article <?php post_class( 'col-sm-6 col-md-6' ); ?>> <?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?> <div class="front-page-date"><?php echo human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'; ?></div> <h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p> <div class="front-page-post-info"> <a class="moretext" href="<?php the_permalink(); ?>">Read more</a> <?php get_template_part( 'front-shop-the-post' ); ?> <?php get_template_part( 'share-buttons' ); ?> <div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div> </div> </article> <?php $j++; if($j % 2 === 0) echo '</div>'; ?> <?php } $i++; } wp_reset_query(); } exit; } I think your loop settings in front-page.php have issues to resolve, in the posts-per-page parameter, displays the posts-per-page + 1 results.
Let me know if this resolve your question.
0 comments:
Post a Comment