Search code examples
phpwordpresscustom-wordpress-pages

Permalink post thumbnail PHP inside If/Else statement for WordPress Page template?


I'm trying to hyperlink the WordPress blog post thumbnail image to link to its individual blog post (permalink). The text link in the code below does it, but the image part is inside an if/else statement.

Code:

<div class="carousel-inner">
        <?php while( $query->have_posts() ) { $query->the_post(); $post_count++; ?>

            <div class="item <?php if( $post_count == 1 ) echo 'active'; ?>">

                        <?php 
                            if ( has_post_thumbnail() ) { 
                    //Permalink needed below
                     the_post_thumbnail( 'slider', array( 'class' => 'img-fluid' ) ); 
                                    }
                                ?>
                                <div class="carousel-caption">
   <h6><a class="headline-links" href="<?php echo get_permalink(); ?>"><?php the_title() ?></a></h6>
                                    <p><?php echo excerpt( 15 ); ?></p>
                                </div>
                            </div>
                        <?php } //wp_reset_postdata(); ?>
                        </div>

Solution

  • There's nothing wrong with storing values in variables. If you only need the permalink once, using echo get_permalink(); or the_permalink(); would be just fine. However, since you need it in more than one place, you're increasing overhead by not defining it as a variable and instead calling the same/similar functions more often than necessary. While on this scale it won't matter much, on a larger scale it can definitely make an impact.

    In that same vein, you can actually remove the has_post_thumbnail() and just check to see if get_the_post_thumbnail() returns a truthy value.

    One last note, are you sure the wp_reset_postdata(); should be commented out?

    Here's how I would approach this with the code you've provided:

    <div class="carousel-inner">
        <?php while( $query->have_posts() ) { $query->the_post(); $post_count++; ?>
        <div class="<?= $post_count == 1 ? 'item active' : 'item'; ?>">
            <?php
                $permalink = get_permalink();
    
                if( $thumbnail = get_the_post_thumbnail( null, 'slider', array( 'class' => 'img-fluid' ) ) ){
                    echo "<a href='$permalink'>$thumbnail</a>";
                }
            ?>
            <div class="carousel-caption">
                <h6>
                    <a class="headline-links" href="<?= $permalink; ?>"><?php the_title() ?></a>
                </h6>
                <p><?= excerpt( 15 ); ?></p>
            </div>
        </div>
        <?php } //wp_reset_postdata(); ?>
    </div>
    

    However, if you're adamant about not using a variable (which you shouldn't be!) then you can use this:

    <div class="carousel-inner">
        <?php while( $query->have_posts() ) { $query->the_post(); $post_count++; ?>
        <div class="item <?php if( $post_count == 1 ) echo 'active'; ?>">
            <?php   
                if( has_post_thumbnail() ){
                    echo '<a href="'. get_permalink() .'">';
                        the_post_thumbnail( 'slider', array( 'class' => 'img-fluid' ) ); 
                    echo '</a>';
                }
            ?>
            <div class="carousel-caption">
                <h6>
                    <a class="headline-links" href="<?php the_permalink(); ?>"><?php the_title() ?></a>
                </h6>
                <p><?php echo excerpt( 15 ); ?></p>
            </div>
        </div>
        <?php } //wp_reset_postdata(); ?>
    </div>