Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Portfolio Website Question

I recently finished the portfolio wordpress project and then decided to make my own portfolio site. On the actual project portfolio page, which shows all of the projects, I limited it to show only 9 posts per page. I then tried adding the function: <?php posts_nav_link(); ?> to the end of the page in order to look at older project (anything after the first 9 posts).

This function is not working on my site and I have read that it will not work if you have modified the loop such as we did the in portfolio project:

<?php $args = array(
        'posts_per_page' => '9',    
        'post_type' => 'portfolio'
    );  
    $the_query = new WP_Query ( $args ); 
    ?>  

<?php if ( have_posts()) : while ( $the_query->have_posts()) : $the_query->the_post(); ?>

Rather than just:

<?php if ( have_posts()) : while( have_posts()) : the_post(); ?>

Does anyone know how to add in "Previous Posts - Older Posts" links in the bottom of a page such as this?

4 Answers

John Locke
John Locke
15,479 Points

It appears that you will have to add 'paged' = $paged to your $args .

Thanks John, I've read that whole page, but the process doesn't work for adding in page links to a portfolio style page like was built in the project. When I use the <?php previous_post(); ?> <?php next_post(); ?> those direct me to the next single-portfolio custom post rather than the portfolio page, which is currently set to show the first 9 posts. When I use the <?php posts_nav_link(); ?> I am not getting anything to appear on the site. I trying to get a page button to be able to show a page 2 and show the next 9 portfolio projects.

The current code for the page is:

<?php

/*

    Template Name: Portfolio

*/

get_header(); ?>

<div class="portfolio grid_12">
    <div class="container">

        <!-- Getting custom post type listings and using that instead of posts -->
        <?php $args = array(
            'posts_per_page' => '9',    
            'post_type' => 'portfolio'
       );
        $the_query = new WP_Query ( $args ); 
        ?>  

        <?php $i = 0; ?>
        <?php if ( have_posts()) : while ( $the_query->have_posts()) : $the_query->the_post(); ?>

        <?php $i = $i + 1; ?>
        <?php if ($i==4) {$i = 1;} ?>
        <?php if ($i == 1) { ?>

        <div class="row-holder">

            <div class="grid_4">
                <a href="<?php the_permalink(); ?>">
                    <h2><?php the_field('name') ?></h2>
                    <img src="<?php the_field('screen_shot') ?>">
               </a>
               <p><?php the_field('short_description') ?></p> 
            </div>

           <?php } ?>
           <?php if ($i == 2) { ?>

           <div class="grid_4">
               <a href="<?php the_permalink(); ?>">
                   <h2><?php the_field('name') ?></h2>
                   <img src="<?php the_field('screen_shot') ?>">
               </a>
               <p><?php the_field('short_description') ?></p>           
            </div>

           <?php } ?>
           <?php if ($i == 3) { ?>

            <div class="grid_4 omega">
                <a href="<?php the_permalink(); ?>">   
                    <h2><?php the_field('name') ?></h2>
                    <img src="<?php the_field('screen_shot') ?>">
                </a>
                <p><?php the_field('short_description') ?></p>
            </div>
            </div>
           <?php } ?>

       <div style="text-align:center;">
           <?php posts_nav_link(' or ', 'Look at our newer projects, ', 'look at our older projects.'); ?>
       </div>

       <?php endwhile; endif; ?>    

    </div>
</div>



<?php get_footer(); ?>