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 From Bootstrap to WordPress Create Bootstrap Styled Theme Templates Creating a Portfolio Single Page

Posted by Nathaniel Bennett
Nathaniel Bennett
Courses Plus Student 687 Points

Next and previous links not working

Any suggestions as to why the next and prev links to on my single portfolio page are not working (links/icons not showing on actual web page)? Even a full copy and paste from the project files will not work. My code snippet is below:

<div class="col-xs-9 prev-next">
   <?php next_post_link( '%link', '<span class="glyphicon glyphicon-circle-arrow-right"></span>' ); ?>
   <?php previous_post_link( '%link', '<span class="glyphicon glyphicon-circle-arrow-left"></span>' ); ?>
</div>

...and the whole page:

<?php  get_header(); ?>

    <div class="container">

      <div class="page-header">

        <div class="row">

          <div class="col-xs-9">
            <h1>Portfolio</h1>
          </div>

          <div class="col-xs-9 prev-next">
            <?php next_post_link( '%link', '<span class="glyphicon glyphicon-circle-arrow-right"></span>' ); ?>
            <?php previous_post_link( '%link', '<span class="glyphicon glyphicon-circle-arrow-left"></span>' ); ?>
          </div>

        </div>

      </div>

      <div class="row">

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

          <div class="col-sm-8 portfolio-image">
            <?php 
          $thumbnail_id = get_post_thumbnail_id();
          $thumbnail_url = wp_get_attachment_image_src( $thumbnail_id, 'thumbnail_size', true );
        ?>

        <p><a href="<?php the_permalink(); ?>"><img src="<?php echo $thumbnail_url[0]; ?>" alt="<?php the_title(); ?> graphic"></a></p>
          </div>

          <div class="col-4-md">
           <h1><?php the_title(); ?></h1>
           <?php the_content(); ?>

          </div>

          <div class="page_header">

          </div>



        <?php endwhile; else: ?>

          <div class="page_header">
            <h1>Oh no!</h1>
          </div>

          <p>No content is appearing</p>

        <?php endif; ?>


      </div>

<?php  get_footer(); ?>

3 Answers

Caroline Hagan
Caroline Hagan
12,612 Points
Caroline Hagan
Caroline Hagan
12,612 Points

Very odd; when I remove your custom code (< span > ... < / span >) it displays the links for me.

On a client website, I used the following code; if it helps at all...

<div class="navigation">
    <p class="alignleft"><a class="gotoarticle" href="/blog/">back to all articles</a></p>

<?php if(get_adjacent_post(false, '', false)) { ?>
<p class="alignright"><?php next_post_link( '%link' ); ?></p>
<?php } else { ?>
<p class="alignright" style="color:#BBB;">"<?php echo get_the_title(); ?>" is the latest post.</p>
<?php } ?>

</div><!-- //navigation -->
Nathaniel Bennett
PLUS
Nathaniel Bennett
Courses Plus Student 687 Points
Nathaniel Bennett
Nathaniel Bennett
Courses Plus Student 687 Points

Thanks for the response. I tried removing the <span>'s as well with no luck. Just getting an empty DIV. I would prefer to follow the tutorial exactly to make sure that my finalized theme matches that of the instructor. I must have missed something in the tutorial.

Nathaniel Bennett
PLUS
Nathaniel Bennett
Courses Plus Student 687 Points
Nathaniel Bennett
Nathaniel Bennett
Courses Plus Student 687 Points

Wow. My mistake. I didn't have any additional posts yet to navigate through. Once I added some more, they appeared.