I apologise if this is an extraordinarily broad question, but I am getting a little lost.

I am using the below to show child pages (note: I am using Advanced Custom Fields)


 * Template Name: Work
 * Description: Work page template

get_header(); ?>

<div class="header-spacer"></div>

while ( have_posts() ) : the_post(); ?>
    <div class="work-intro-container">
        <h1 class="work-title"><?php echo get_field('sub_title'); ?></h1>
        <p class="work-intro"><?php echo get_field('support_text'); ?></p>

    <nav class="work-menu">
                $pages = get_children( array('post_parent' => 20, 'orderby' => 'menu_order', 'order' => 'ASC') );
                foreach($pages as $page): 
                    $link = get_permalink($page->ID);
                    $title = get_field('sub_title', $page->ID);
                    $thumbnail = get_field('work_page_thumbnail', $page->ID);
                    <a href="<?php echo $link; ?>">
                        <div class="thumbnail-overlay"></div>
                        <img src="<?php echo $thumbnail['url']; ?>" alt="<?php echo $thumbnail['alt']; ?>">
                        <p class="thumbnail-label"><?php echo $title; ?></p>
            <?php endforeach; ?>

<?php endwhile; // end of the loop.
<?php include "modules/contact-box.php"; ?>
<?php get_footer(); ?>

This works fine. I am using get_children rather than get_pages because as far as I can tell there is no working way of limiting the number of pages returned with the latter method.

So. I want to show 6 pages, and have a button to load another 6 via AJAX.

I have poured through various tutorials with no joy.

I would rather not use a plugin; I realise that jetpack is very popular but is far too heavy for me.

Any advice at all would be extremely appreciated.



After a lot more digging and googling, I have a rough AJAX call working.


var ajaxUrl = 'http://localhost:8888/spindle-2015/wp-admin/admin-ajax.php',
        perAppend = 2,
        i = 0;

    $('.js-load-more').on('click', function(e) {
            type: 'POST',
            dataType: 'html',
            url: ajaxUrl,
            data: { 
                action: 'loadMoreWork', 
                items: perAppend, 
                appends: i 
            success: function(data) { 

My Theme's functions.php

function loadMoreWork($page) {
    echo $_POST['items'];
    echo $_POST['appends'];
// Users logged in
add_action( 'wp_ajax_loadMoreWork', 'loadMoreWork' );
// Users not logged in
add_action( 'wp_ajax_nopriv_loadMoreWork', 'loadMoreWork' );

This is spitting out items and appends on my page.

A couple of questions at this point:

  • Along with my items and appends variables, there is a random 0 being appended. Where is it coming from and how do I kill it?

  • Should I just place all the markup I want to append in my function, or is there a better way to template this?

  • What have you actually tried? I could copy and paste the WordPress AJAX documentation here for you, but it's probably more useful if try something and focus your problem a bit more. – Milo Dec 1 '14 at 14:12
  • What triggers the ”Load 6 more Pages” code? – aifrim Dec 1 '14 at 17:50

Previous Question

That answer I've linked to shows the steps you'll need to take. It probably didn't come up in your searches as you weren't using the right terms.

As you're a front-end dev, this is how I'd do it based on that persons advice.

  • Don't load anything in the template. Just have an empty ul with an id you can target, and a button to use for the click event.
  • Create a php function, in functions.php, with one parameter (current_list_num) to get 6 posts using get_posts. Use the "offset" parameter to define which 6 to get (current_list_num / 6).
  • Have the button, wherever it is, trigger the ajax call. As part of the ajax, pass in the number of items in the list currently. That will give you the offset needed for the get_posts call.
  • On page load, trigger a click of the button to start the process
  • Thanks for the link and the rundown. I have updated my question with my progress so far. Now I need to clear up the dozens of open tabs from heavy googling... – Alan Shortis Dec 2 '14 at 14:32
  • I seriously wouldn't worry about best practises when it comes to WordPress. In this case, do the template in the function itself. I suppose you could use get_template_part, but then you have to use a global value to pass value which is just as bad (in my opinion) As for the 0 in the content, make sure to put a die() or exit() at the end of the PHP function. That should clear it up. – BenFreke Dec 3 '14 at 7:12
  • Thanks for all your help. From a bit of a wide/vague question you were able to give me the right pointers to get it done. – Alan Shortis Dec 3 '14 at 9:25
  • No worries, glad to to help :) – BenFreke Dec 4 '14 at 5:17

How about using a simple css solution hiding the <li>s you don't want to show at first or using jQuery to calculate the number of <li>s to show or hide prev/next set?

  • I've been so blinded by this I didn't even consider a solution like this. It's especially appropriate as I am not doing this for performance, more to add focus to the items by showing them in smaller batches. Plus, being a front end developer, I could get this done in no time. – Alan Shortis Oct 8 '14 at 14:32
  • @AlanShortis i guess you mean I helped you and accept my answer? :P – rob.m Oct 8 '14 at 14:37
  • I like this solution, but the project I am working on will potentially have many child pages and I would like to load the listing as and when required. While you offer a great alternative (thanks!), it doesn't really answer the question. – Alan Shortis Dec 1 '14 at 12:39
  • you could try this plugin then wordpress.org/plugins/ajax-load-more – rob.m Dec 1 '14 at 16:37

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.