The loop: more posts than I want to fit on one page

Question

I am working on using the wordpress loop to call posts from my wordpress blog into my website. I have my loop set up to grab the 10 most recent posts under the portfolio category and display them on my portfolio page. The problem is that I have 20 items I want to display, but I don't want to have to deal with the load times of 20 images. I've thought about making multiple portfolio pages in dreamweaver, and have each one grab a different set of ten posts, but that's defeating the purpose of using wordpress to make it faster for me to update the page.

Is there any way I can have it set up so that when I hit 'next' the page refreshes with the next set of ten posts, and when I hit 'back' the page refreshes with the first ten posts?

I have seen webpages that are like www.example.com/portfolio.php?paged=2

Here is my header that calls the loop

define('WP_USE_THEMES', false);
require('./wp/wp-load.php');
query_posts('category_name=portfolio&posts_per_page=10');

and here is where the loop gets placed on the page

<?php while (have_posts()): the_post(); ?>
<?php the_content(); ?>
<?php endwhile; ?>

Any suggestions will be greatly appreciated.

Answer 1

You're looking for one of two things: either paginate_links(), or the combination of next_posts_link() and previous_posts_link(). Both of these functions allow for "pagination", or the ability to place links to more content than you're displaying in a screenful. Google does this on the bottom of most pages, for example. Of the two methods I mentioned above, I'd recommend using next_posts_link() and previous_posts_link(), but I'll talk about them both.

Using paginate_links()

I don't often use this function, because it doesn't give you a lot of control over how the links are displayed. However, it's quite easy to use and it displays a list of numbers of in-between content, similar to how Google (for example) numbers their results page links.

By default, if you've got a query that returns more results then you're displaying, you should just be able to insert the following after the loop:

<?php echo paginate_links() ?>

For more options, you can look over the documentation page here.

Using next_posts_link() and previous_posts_link()

I usually prefer this method, because I get more control over the styling of the links generated with it. Specifically, because I can provide the markup that goes around the links, and style that markup using CSS.

Here's an example of how I've used this in a a project:

<?php if ($wp_query->max_num_pages > 1): ?>
    <div id="nav-below" class="navigation">
        <div class="nav-previous"><?php next_posts_link('&larr; Older posts'); ?></div>
        <div class="nav-next"><?php previous_posts_link('Newer posts &rarr;'); ?></div>
    </div>
<?php endif; ?>

As with paginate_links() above, this code needs to go below the loop.