1

I'm trying to add the plugin "Easy Load More" to my theme (https://wordpress.org/plugins/easy-load-more/). You are supposed to wrap it in <div id="ajax"> and then place <?php load_more_button(); ?> where you want the load more button to go. I can't quite figure out the correct places to add this code (as you can see by my code below it is currently in the wrong places). Below is a picture of how I want the load more button to look.

enter image description here

Here is my current front-page.php

<?php
/*
 * Template Name:
 */

get_header();
get_template_part ('inc/carousel');

$the_query = new WP_Query( [
    'posts_per_page' => 14,
    'paged' => $paged
] );

if ( $the_query->have_posts() ) { 
load_more_button();
?>
    <div id="ajax">
    <?php
    $i = 0;
    while ( $the_query->have_posts() ) { $the_query->the_post();

        if ( $i % 7 === 0 ) { // Large post: on the first iteration and every 7th post after... ?>
        <article <?php post_class( 'col-md-12' ); ?>>
            <?php the_post_thumbnail('large-thumbnail'); ?>
            <h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <p class="post-excerpt"><?php echo get_the_excerpt(); ?></p>
            <?php get_template_part( 'share-buttons' ); ?>
            <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
            <?php comments_popup_link ('No Comments', '1 Comment', '% Comments', 'comment-count', 'none'); ?>
            </article><?php

        } else { // Small posts ?>

            <article <?php post_class( 'col-md-4' ); ?>>
                <?php the_post_thumbnail( 'medium-thumbnail' ); ?>
                <h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <p class="post-excerpt"><?php echo get_the_excerpt(); ?></p>
                <?php get_template_part( 'share-buttons' ); ?>
                <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
                <?php comments_popup_link ('No Comments', '1 Comment', '% Comments', 'comment-count', 'none'); ?>
            </article>
            <?php
        }
        $i++;
    }
    wp_reset_postdata();?>
    </div>
    <?php
}
else {
    echo '<p>Sorry, no posts matched your criteria.</p>';
}
load_more_button();
get_footer();
3

Your div wrapper is within your while loop, and split by your if clause. This cannot work properly, since your loop will generate up to 14 divs with the id ajax.

Put the opening div tag after if ( $the_query->have_posts() ) { and the closing after wp_reset_postdata(); and you should be fine.

Edit

Are you sure, that you didn't miss any opening/closing php tags? e.g. load_more_button() is wrapped in php but you didn't close your php before.

<?php
/*
 * Template Name:
 */

get_header();
get_template_part ('inc/carousel');

$the_query = new WP_Query( [
    'posts_per_page' => 14,
    'paged' => get_query_var('paged', 1)
] );

if ( $the_query->have_posts() ) { ?>
    <div id="ajax">
    <?php
    $i = 0;
    while ( $the_query->have_posts() ) { $the_query->the_post();

        if ( $i % 7 === 0 ) { // Large post: on the first iteration and every 7th post after... ?>
        <article <?php post_class( 'col-md-12' ); ?>>
            <?php the_post_thumbnail('large-thumbnail'); ?>
            <h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <p class="post-excerpt"><?php echo get_the_excerpt(); ?></p>
            <?php get_template_part( 'share-buttons' ); ?>
            <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
            <?php comments_popup_link ('No Comments', '1 Comment', '% Comments', 'comment-count', 'none'); ?>
            </article><?php

        } else { // Small posts ?>

            <article <?php post_class( 'col-md-4' ); ?>>
                <?php the_post_thumbnail( 'medium-thumbnail' ); ?>
                <h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <p class="post-excerpt"><?php echo get_the_excerpt(); ?></p>
                <?php get_template_part( 'share-buttons' ); ?>
                <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
                <?php comments_popup_link ('No Comments', '1 Comment', '% Comments', 'comment-count', 'none'); ?>
            </article>
            <?php
        }
        $i++;
    }?>
    </div>
    <?php if(get_query_var('paged') < $the_query->max_num_pages) {
       load_more_button();
    }
}
elseif (!get_query_var('paged') || get_query_var('paged') == '1') {
    echo '<p>Sorry, no posts matched your criteria.</p>';
}
wp_reset_postdata();
get_footer();
  • Unfortunately, this did not work. It just creates an error because the page is blank. – user6738171 Dec 10 '16 at 1:06
  • Are you sure, that you didn't miss any opening/closing tags? – iantsch Dec 10 '16 at 7:55
  • Now it moved all of the posts into once column. Also when you press the load more button the same 14 posts just repeat themselves. It doesn't call the next 14 posts. – user6738171 Dec 10 '16 at 15:05
  • Overlooked, that the paged is always set to 1 ;) – iantsch Dec 11 '16 at 15:22
  • Do you have any suggestions to fix this? I'm assuming this whole line is causing problems, but I don't know what to change it to? $the_query = new WP_Query( [ 'posts_per_page' => 14, 'paged' => 1 ] ); – user6738171 Dec 11 '16 at 17:21

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.