Adding a "more" Button

Question

I'm trying to add a "load more" button and limit the results below, so that there aren't 1000 things loading all at once in the portfolio page, here: http://typesetdesign.com/portfolio/

My knowledge of PHP isn't very good, so I'm not sure what I'm supposed to do. I know I could limit the projects here:

<?php query_posts( 'post_type=project&posts_per_page=200' );

But how would I then load more if I limited that result?

Here is the page coding for that entire page:

<div id="projects" class="clearfix">        

<?php $page_skills = get_post_meta($post->ID, "_ttrust_page_skills", true); ?>

<?php if ($page_skills) : // if there are a limited number of skills set ?>
    <?php $skill_slugs = ""; $skills = explode(",", $page_skills); ?>

    <?php if (sizeof($skills) > 1) : // if there is more than one skill, show the filter nav?>  
        <ul id="filterNav" class="clearfix">
            <li class="allBtn"><a href="#" data-filter="*" class="selected"><?php _e('All', 'themetrust'); ?></a></li>

            <?php
            $j=1;                     
            foreach ($skills as $skill) {               
                $skill = get_term_by( 'slug', trim(htmlentities($skill)), 'skill');
                if($skill) {
                    $skill_slug = $skill->slug;             

                    $skill_slugs .= $skill_slug . ",";
                    $a = '<li><a href="#" data-filter=".'.$skill_slug.'">';
                    $a .= $skill->name;                 
                    $a .= '</a></li>';
                    echo $a;
                    echo "\n";
                    $j++;
                }         
            }?>
        </ul>
        <?php $skill_slugs = substr($skill_slugs, 0, strlen($skill_slugs)-1); ?>
    <?php else: ?>
        <?php $skill = $skills[0]; ?>
        <?php $s = get_term_by( 'name', trim(htmlentities($skill)), 'skill'); ?>
        <?php if($s) { $skill_slugs = $s->slug; } ?>
    <?php endif;        

    $temp_post = $post;
    $args = array(
        'ignore_sticky_posts' => 1,
        'posts_per_page' => 200,
        'post_type' => 'project',
        'skill' => $skill_slugs
    );
    $projects = new WP_Query( $args );      

else : // if not, use all the skills ?>

    <ul id="filterNav" class="clearfix">
        <li class="allBtn"><a href="#" data-filter="*" class="selected"><?php _e('All', 'themetrust'); ?></a></li>
        <?php $j=1;
        $skills = get_terms('skill');
        foreach ($skills as $skill) {
            $a = '<li><a href="#" data-filter=".'.$skill->slug.'">';
            $a .= $skill->name;                 
            $a .= '</a></li>';
            echo $a;
            echo "\n";
            $j++;
        }?>
    </ul>
    <?php
    $temp_post = $post;
    $args = array(
        'ignore_sticky_posts' => 1,
        'posts_per_page' => 200,
        'post_type' => 'project'            
    );
    $projects = new WP_Query( $args );

endif; ?>

<div class="thumbs masonry">            
<?php  while ($projects->have_posts()) : $projects->the_post(); ?>

    <?php
    global $p;              
    $p = "";
    $skills = get_the_terms( $post->ID, 'skill');
    if ($skills) {
       foreach ($skills as $skill) {                
          $p .= $skill->slug . " ";                     
       }
    }
    ?>      
    <?php get_template_part( 'part-project-thumb'); ?>      

<?php endwhile; ?>
<?php $post = $temp_post; ?>
</div>

Thanks so much, any input is a help!

AJAX and another PHP script. Use the AJAX to append new data to the container of the existing data. Does that make sense? — Derple, May 09 '14 at 21:21
whats happening as a result ? I assume you are getting 200 results as you have strictly defined 200 to be returned ? — Pogrindis, May 09 '14 at 21:21
@Pogrindis, I'm getting back as many as there are in the database. Which is 30-something right now and growing. — Eric Novak, May 09 '14 at 21:23
@StuartWickenden, that does make sense, I'm just not sure where to start with the coding on that. — Eric Novak, May 09 '14 at 21:24
its hard to say... are you using SQL DB ? I also hate to recommend jquery but lazy load might be an option http://plugins.jquery.com/lazyload/ — Pogrindis, May 09 '14 at 21:27
Why do you dislike jquery? Its a great lib for simple tasks? I'm honestly interested in hearing negatives about it? @Pogrindis — Derple, May 09 '14 at 22:15
@Stuart Wickenden its not that there are negatives, its a fantastic lib, its just i dont like when people offer it as a solution to everything! ;) — Pogrindis, May 09 '14 at 22:19

score 1 · Answer 1 · edited May 23 '17 at 12:28

Edit
Using Tables with pagination bootstrap style http://datatables.net/examples/basic_init/multiple_tables.html

Massive data base with pagination take a look here: https://stackoverflow.com/a/3707457/2293454

I didn't see your site, now I have, what you might need is something like this:
https://stackoverflow.com/a/21408418/2293454
as you can see that example has a limiter iMyLoadLimit = 5, so, wen the user scroll down the page, it will load more based on the total number of fetched data, if you load 100 articles or 1000, they will be divided by the limiter in the java, the result will be that every time the user scroll down it will display the next 5 or whatever number you want to display...

I hope that helps...

score 0 · Answer 2 · edited May 23 '17 at 10:26

0

You need pagination (server side) and might want infinite scrolling (client side)

You may want to look at:

Simple PHP Pagination script

http://jscroll.com/

How to paginate query results for Infinite Scroll?

edited May 23 '17 at 10:26

Community

1
1

answered May 09 '14 at 21:30

Zlatin Zlatev

3,034
1
24
32

Adding a "more" Button

2 Answers2