1

My front page is set up so that I have a loop of 3 different rows. On row 1 I have one post, and then on row 2 and 3 I have 3 posts. I repeat this loop twice so I have 14 posts. After 14 posts I want to add infinite scroll. However, instead of infinite scroll being enabled with scroll I just want a button that says "Load More". Can anyone help me find an easy way to add this?

An example of what I want enter image description here

Here is my front-page.php

<?php
/*
 * Template Name: learningwordpress
 */

get_header();
 get_template_part ('inc/carousel');
$i = 0;
$args = array(
    'posts_per_page' => 14,
    'paged' => 1
);

$the_query = new WP_Query($args);
if ( $the_query->have_posts() ) {
    while ( $the_query->have_posts() ) {

        if( $i %2 == 1 ) {
                   $the_query->the_post(); ?>
            <article class="post 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>
                    <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
            </article>      
            <?php $the_query->the_post(); ?>
            <article class="post 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>
                    <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
            </article>
 <?php $the_query->the_post(); ?>
            <article class="post 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>
                    <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
            </article>

 <?php $the_query->the_post(); ?>
            <article class="post 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>
                    <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
            </article>      
            <?php $the_query->the_post(); ?>
            <article class="post 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>
                    <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
            </article>
 <?php $the_query->the_post(); ?>
            <article class="post 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>
                    <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
            </article>
            <?php

        }
        else {
         $the_query->the_post(); ?>
            <article class="post 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>
                    <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
            </article>
            <?php
        }
        ?>
        <?php
        $i++;
    }
}
else {
    echo '<p>Sorry, no posts matched your criteria.</p>';
}
get_footer();

and functions.php

<?php
define( 'WP_DEBUG', true );
    function learningWordPress_resources() {
        wp_enqueue_style('style', get_stylesheet_uri());
        wp_enqueue_script( 'bootstrap-js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css', array('jquery'), '3.3.7', true );
        wp_enqueue_style( 'bootstrap-style', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );
    }

add_action('wp_enqueue_scripts', 'learningWordPress_resources');

//Navigation Menus
register_nav_menus(array(
    'primary' => __('Primary Menu'),
    'footer' => __( 'Footer Menu'),
));
class CSS_Menu_Walker extends Walker {

var $db_fields = array('parent' => 'menu_item_parent', 'id' => 'db_id');
function start_lvl(&$output, $depth = 0, $args = array()) {
$indent = str_repeat("\t", $depth);
$output .= "\n$indent<ul>\n";
}
function end_lvl(&$output, $depth = 0, $args = array()) {
$indent = str_repeat("\t", $depth);
$output .= "$indent</ul>\n";
}
function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
global $wp_query;
$indent = ($depth) ? str_repeat("\t", $depth) : '';
$class_names = $value = '';
$classes = empty($item->classes) ? array() : (array) $item->classes;
/* Add active class */
if (in_array('current-menu-item', $classes)) {
$classes[] = 'active';
unset($classes['current-menu-item']);
}
/* Check for children */
$children = get_posts(array('post_type' => 'nav_menu_item', 'nopaging' => true, 'numberposts' => 1, 'meta_key' => '_menu_item_menu_item_parent', 'meta_value' => $item->ID));
if (!empty($children)) {
$classes[] = 'has-sub';
}
$class_names = join(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item, $args));
$class_names = $class_names ? ' class="' . esc_attr($class_names) . '"' : '';
$id = apply_filters('nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args);
$id = $id ? ' id="' . esc_attr($id) . '"' : '';
$output .= $indent . '<li' . $id . $value . $class_names .'>';
$attributes  = ! empty($item->attr_title) ? ' title="'  . esc_attr($item->attr_title) .'"' : '';
$attributes .= ! empty($item->target)     ? ' target="' . esc_attr($item->target    ) .'"' : '';
$attributes .= ! empty($item->xfn)        ? ' rel="'    . esc_attr($item->xfn       ) .'"' : '';
$attributes .= ! empty($item->url)        ? ' href="'   . esc_attr($item->url       ) .'"' : '';
$item_output = $args->before;
$item_output .= '<a'. $attributes .'><span>';
$item_output .= $args->link_before . apply_filters('the_title', $item->title, $item->ID) . $args->link_after;
$item_output .= '</span></a>';
$item_output .= $args->after;
$output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args);
}
function end_el(&$output, $item, $depth = 0, $args = array()) {
$output .= "</li>\n";
}
}


// Add Widget Areas
function ourWidgetsInit() {

    register_sidebar( array(
        'name' => 'Sidebar',
        'id' => 'sidebar1',
        'before_widget' => '<div class="widget-item">',
        'after_widget' => '</div>',
        'before_title' => '<h2 class="widget-title">',
        'after_title' => '</h2>',
    ));

    register_sidebar( array(
        'name' => 'Footer Area 1',
        'id' => 'footer1',
        'before_widget' => '<div class="widget-item">',
        'after_widget' => '</div>',
        'before_title' => '<h2 class="widget-title">',
        'after_title' => '</h2>',
    ));

    register_sidebar( array(
        'name' => 'Footer Area 2',
        'id' => 'footer2',
        'before_widget' => '<div class="widget-item">',
        'after_widget' => '</div>',
        'before_title' => '<h2 class="widget-title">',
        'after_title' => '</h2>',
    ));

    register_sidebar( array(
        'name' => 'Footer Area 3',
        'id' => 'footer3',
        'before_widget' => '<div class="widget-item">',
        'after_widget' => '</div>',
        'before_title' => '<h2 class="widget-title">',
        'after_title' => '</h2>',
    ));

    register_sidebar( array(
        'name' => 'Footer Area 4',
        'id' => 'footer4',
        'before_widget' => '<div class="widget-item">',
        'after_widget' => '</div>',
        'before_title' => '<h2 class="widget-title">',
        'after_title' => '</h2>',
    ));

}

add_action('widgets_init', 'ourWidgetsInit');

// Theme setup
function learningWordpress_setup() {

// Navigation Menus    
register_nav_menus(array(
    'primary' => __('Primary Menu'),
    'footer' => __( 'Footer Menu'),
));

// Add featured image support
    add_theme_support('post-thumbnails');
    add_image_size('medium-thumbnail', 446, 345, true);
    add_image_size('large-thumbnail', 1386, 595, true);
    add_image_size('popular-posts', 256, 256, true);
}

add_action('after_setup_theme', 'learningWordpress_setup');

// Carousel
function carousel_scripts() {
    wp_enqueue_style( 'owl.carousel', get_template_directory_uri() . '/css/owl.carousel.css' );
    wp_enqueue_style( 'owl.theme', get_template_directory_uri() . '/css/owl.theme.css' );
    wp_enqueue_script( 'owl.carousel', get_template_directory_uri() . '/js/owl.carousel.js', array('jquery'), '20120206', true );
    wp_enqueue_script( 'effects', get_template_directory_uri() . '/js/effects.js', array('jquery'), '20120206', true );
}
add_action( 'wp_enqueue_scripts', 'carousel_scripts' );

// Custom control for carousel category

if (class_exists('WP_Customize_Control')) {
    class WP_Customize_Category_Control extends WP_Customize_Control {

        public function render_content() {

            $dropdown = wp_dropdown_categories( 
                array(
                    'name'              => '_customize-dropdown-category-' . $this->id,
                    'echo'              => 0,
                    'show_option_none'  => __( '&mdash; Select &mdash;' ),
                    'option_none_value' => '0',
                    'selected'          => $this->value(),

                )
            );

            $dropdown = str_replace( '<select', '<select ' . $this->get_link(), $dropdown );

            printf(
                '<label class="customize-control-select"><span class="customize-control-title">%s</span> %s</label>',
                $this->label,
                $dropdown
            );
        }
    }
}

// Register slider customizer section 

add_action( 'customize_register' , 'carousel_options' );

function carousel_options( $wp_customize ) {

$wp_customize->add_section(
    'carousel_section',
    array(
        'title'     => 'Carousel settings',
        'priority'  => 202,
        'capability'  => 'edit_theme_options',
    )
);

$wp_customize->add_setting(
    'carousel_setting',
     array(
    'default'   => '',
  )
);

$wp_customize->add_control(
    new WP_Customize_category_Control(
        $wp_customize,
        'carousel_category',
        array(
            'label'    => 'Category',
            'settings' => 'carousel_setting',
            'section'  => 'carousel_section'
        )
    )
);

$wp_customize->add_setting(
    'count_setting',
     array(
    'default'   => '6',

  )
);

$wp_customize->add_control(
    new WP_Customize_Control(
        $wp_customize,
        'carousel_count',
        array(
            'label'          => __( 'Number of posts', 'theme_name' ),
            'section'        => 'carousel_section',
            'settings'       => 'count_setting',
            'type'           => 'text', 
        )
    )
);

}
//Comments Continued
if ( get_option ('thread_comments') ) {
    wp_enqueue_script('comment-reply');
}
//Comments
function custom_comments ($comment, $args, $depth) {
    $GLOBALS['comment'] = $comment; ?>
  <li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">
      <div id="comment-<?php comment_ID(); ?>">
          <header class="comment-author-vcard">
              <?php echo get_avatar($comment, $size='48', $default='<path_to_url>' ); ?>

              <?php printf (__('<cite_class="fn">%s</cite> <span class="says"> says:</span>'), get_comment_author_link()) ?>
    </header>

          <?php if ($comment->comment_approved =='0') : ?>
          <em><?php _e('Your Comment is Awaiting Moderation.') ?> </em>
          <br />
          <?php endif ; ?>

          <div class="comment-meta commentmetadata"><a href="<?php echo htmlspecialchars( get_comment_link($comment->comment_ID )) ?>"><?php printf(__('%1$s at %2$s'), get_comment_date(), get_comment_time() ) ?></a><?php edit_comment_link(__('(Edit)'), '   ', ' ') ?> </div>                            

            <?php comment_text() ?>

          <div class="reply">
              <?php comment_reply_link(array_merge($args, array('depth' => $depth, 'max_depth' => $args['max_depth'] ))) ?>
          </div>
      </div>
          <?php
}
// Wordpress
function load_fonts() {
            wp_register_style('et-googleFonts', 'https://fonts.googleapis.com/css?family=David+Libre|Crimson+Text|Questrial|Catamaran|Work+Sans:400,500,600,700');
            wp_enqueue_style( 'et-googleFonts');
        }
    add_action('wp_print_styles', 'load_fonts');
// Popular Posts
function wpb_set_post_views($postID) { 
$count_key = 'wpb_post_views_count'; 
$count = get_post_meta($postID, $count_key, true); 
if($count==''){ 
$count = 0; 
delete_post_meta($postID, $count_key); 
add_post_meta($postID, $count_key, 0); 
}else{ 
$count++; 
update_post_meta($postID, $count_key, $count); 
} 
} 
//To keep the count accurate, lets get rid of prefetching 
remove_action( 'wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0);

function wpb_track_post_views ($post_id) { 
if ( !is_single() ) return; 
if ( empty ( $post_id) ) { 
global $post; 
$post_id = $post->ID; 
} 
wpb_set_post_views($post_id); 
} 
add_action( 'wp_head', 'wpb_track_post_views');
4
  • are you developing a theme or a plugin?
    – prosti
    Commented Oct 14, 2016 at 17:59
  • also do you plan to relay on jetpack?
    – prosti
    Commented Oct 14, 2016 at 17:59
  • I'm developing a theme. I'm new to this so I'm not sure if I should relay on jetpack. I was hoping to get suggestions on what would be the best route to take. Commented Oct 14, 2016 at 18:48
  • well that's easy, i see one solution for you using the ajax; will try to explain.
    – prosti
    Commented Oct 14, 2016 at 20:17

1 Answer 1

1

This is just one approach.

You have the Load More button and once you click that you request for more posts via Ajax.

You need to master Ajax in WordPress first and call WP_Query with specific arguments to fit your case.

Once you get results via Ajax you need to use JavaScript or JQuery to inject that to the page.

You can check Jetpack code if you are really lazy.

6
  • How would I start this? What is the first step? Commented Oct 15, 2016 at 23:34
  • well if you liked the answer, make sure you accept that answer first, else wait for some other more detailed answer. Also I encourage you to ask more specific questions. This question contains at least 3 smaller.
    – prosti
    Commented Oct 15, 2016 at 23:41
  • I'm sorry, I accepted it as the best answer. I'm just very new at this, so I don't know a ton. Commented Oct 15, 2016 at 23:47
  • don't worry by accepting the answers, you get some points and you are more attractive to those that would like to reply your questions in the future. Simple as that. This is the whole idea of this website.
    – prosti
    Commented Oct 15, 2016 at 23:50
  • Would you mind going into a bit more detail on what the first step I should take is to build this load more button? I would really appreciate it. Commented Oct 15, 2016 at 23:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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