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

Posted by Liz Karaffa
Liz Karaffa
17,576 Points

Making home.php and single.php identical

I have a design for the client where the home.php and single.php file essentially need to be the same. I've attached a mock up of the design to get an idea of what i'm talking about.

The blog posts are on an infinite loop so there is always a previous and next post.

I need the previous and next blog post's featured image and title always to display regardless of home.php or single.php

I built the home.php file and it looks perfectly, so I duplicated the code as single.php but that's where it breaks down because single.php will only display 1 post by default. The page basically goes all white with snippets of html.

Basically I need to figure out how to have my single.php act the same way as the home.php and for the main featured article to be switching out with other articles when I click next or previous.

2 Answers

Ryan Duchene
PLUS
Ryan Duchene
Courses Plus Student 46,022 Points
Ryan Duchene
Ryan Duchene
Courses Plus Student 46,022 Points

You can get the next and previous posts with their respective WordPress functions.

The return values for both functions are WP_Post objects, so you can get their details off them by accessing their properties like this:

<?php

$next_post = get_next_post(); // you may want to pass some args; check codex page
$prev_post = get_previous_post();

// Access info
echo $next_post->post_title; // echoes post title

For a lot more information, just check out the Codex pages I linked. Hope this helps!

Liz Karaffa
Liz Karaffa
17,576 Points

Thanks! I've been using previous_post_link() and next_post_link() to pull in the title and have the "Previous Story" and "Next Story" verbiage displaying with the title, but I don't know how to grab in the featured image since it's not housed within the WP_Post object.

Liz Karaffa
Liz Karaffa
17,576 Points
Liz Karaffa
Liz Karaffa
17,576 Points

Ok so I can pull in the previous and next featured images if there actually is a previous or next post. But when I need to use the infinite loop i.e. next being the oldest post, or previous being the newest post, my code breaks down.

My code is below. I believe the issue is that I'm not actually capturing the ID of what I need in $first_id and $last_id. I've tried using get_queried_object_id() $first->post->ID and various combinations to get the post ID of what is being pulled in since .previous-title is working correctly.

<div class="post_nav">
    <?php if( get_adjacent_post(false, '', true) ) : 

        $previous_post = get_previous_post(); ?>

        <div class="previous-img"><?php echo get_the_post_thumbnail( $previous_post->ID );?></div>
        <p class="previous-title"><?php previous_post_link('Previous Story<br> %link','%title');?></p>

    <?php else: 
        $first = new WP_Query('posts_per_page=1&order=DESC'); $first->the_post(); 
            $first_id = $first->ID; ?>

            <div class="previous-img"><?php echo get_the_post_thumbnail( $first_id );?></div>
            <?php echo '<p class="previous-title"><a href="' . get_permalink() . '">Previous Story<br>' . the_title() . '</a></p>';

        wp_reset_query(); ?>
    <?php endif; ?>


    <?php if( get_adjacent_post(false, '', false) ) : 

        $next_post = get_next_post(); ?>

        <div class="next-img"><?php echo get_the_post_thumbnail( $next_post->ID ); ?></div>
        <p class="next-title"><?php next_post_link('Next Story<br> %link','%title');?></p>

    <?php else: 
        $last = new WP_Query('posts_per_page=1&order=ASC'); $last->the_post();
            $last_id = $last->ID; ?>

            <div class="next-img"><?php echo get_the_post_thumbnail( $last_id );?></div>
            <?php echo '<p class="next-title"><a href="' . get_permalink() . '">Next Story<br>' . the_title() . '</a></p>';
        wp_reset_query(); ?>
    <?php endif; ?>
</div>