WordPress – How to use shortcode in PHP files

Question

I set up WordPress with the WooCommerce Plugin and the products get looped out...all good till there.

I wanted to add the possibility that visitors are able to upvote a product. So I was looking for a plugin and found one.

But that's the actual problem! The plugin called "Like-Photo" offers me the WordPress shortcode function. If I insert the shortcode in the WordPress editor (before and after the image) all is working fine.

But I need to put that code in the PHP file (the one that loops out the products) itself.

So I tried using the PHP echo function for the shortcode as you can see below. It's not working at all. When I open up the inspector tools in my browser I only see the second shortcode part rendered out in text and it's supposed to create a div (what it does, when I paste in the shortcodes inside the WordPress post editor).

How can I fix this?

 <?php echo do_shortcode('[add_voting]'); ?> <!-- shortcode beginning-->

    <?php do_action( 'woocommerce_before_shop_loop_item' ); ?> <!-- The loop for the items-->
    <div class="image-box">
        <div class="voteup_layer">
                <div class="voteup_layer_triangle">
                    <div class="voteup_layer_triangle-inner"></div>
                </div>
                <p>CLICK 2 UPVOTE</p>
        </div>
        <div class="sb_title"><?php the_title(); ?></div>
        <div class="arrow-up"></div>
        <div id="num-id" class="count-num">20.453</div>


        <a href="<?php the_permalink(); ?>">
            <?php
                /**
                 * woocommerce_before_shop_loop_item_title hook
                 *
                 * @hooked woocommerce_show_product_loop_sale_flash - 10
                 * @hooked woocommerce_template_loop_product_thumbnail - 10
                 */
                do_action( 'woocommerce_before_shop_loop_item_title' );
                if ( has_post_thumbnail() ) {
                    //echo get_the_post_thumbnail( get_the_ID(), array(370,370) );
                    echo get_the_post_thumbnail( get_the_ID(), 'home-small-box' );

                }
            ?>
        </a>
    </div>
    <?php echo do_shortcode('[/add_voting]'); ?> <!-- shortcode end-->

I'm getting this HTML output:

<div class="home_small_box ">
    <div class="image-box">
        <div class="voteup_layer">
            <div class="voteup_layer_triangle">
                <div class="voteup_layer_triangle-inner"></div>
            </div>
            <p>CLICK 2 UPVOTE</p>
        </div>
        <div class="sb_title">FOSSIL <br> <span class="thin">Moon Explorer</span></div>
        <div class="arrow-up"></div>
        <div id="num-id" class="count-num">20.453</div>
        <a href="http://online.com/product/fossil-moon-explorer/">
        <img width="360" height="360" src="http://online.com/wp-content/uploads/2015/08/shopping-1-360x360.jpg" class="attachment-home-small-box wp-post-image" alt="shopping-1">
         </a>
    </div>
    "[/add_voting]"

And want (this is how the HTML gets rendered once I add the shortcode inside the WordPress editor – it creates a div called "like-photo-wrapper" around the image where I placed the shortcode and adds the ability to vote):

<div class="like-photo-wrapper">
  <a href="http://online.com/wp...2.jpg">
    <img src="http://online.com/wp...300.jpg" alt="shopping-2" >
  </a>
 <div class="votes"><span class="currentVotes">Votes:  0</span>
 <a href="http://online.com" title="vote on this image">vote on this image</a>
 </div>
</div>

The shortcode isn't working properly in my PHP code.

Answer 1

Check out the documentation for do_shortcode .

The gist of it is that the call to do_shortcode for a shortcode that wraps content should be like this

// In case there is opening and closing shortcode.
echo do_shortcode( '[iscorrect]' . $text_to_be_wrapped_in_shortcode . '[/iscorrect]' );

You can try something like this using output buffering to capture the output and pass it into your shortcode.

ob_start();

<?php do_action( 'woocommerce_before_shop_loop_item' ); ?> <!-- The loop for the items-->
<div class="image-box"> 
    <div class="voteup_layer">
            <div class="voteup_layer_triangle">
                <div class="voteup_layer_triangle-inner"></div>
            </div>
            <p>CLICK 2 UPVOTE</p>
    </div>
    <div class="sb_title"><?php the_title(); ?></div>
    <div class="arrow-up"></div>
    <div id="num-id" class="count-num">20.453</div>


    <a href="<?php the_permalink(); ?>">
        <?php
            /**
             * woocommerce_before_shop_loop_item_title hook
             *
             * @hooked woocommerce_show_product_loop_sale_flash - 10
             * @hooked woocommerce_template_loop_product_thumbnail - 10
             */
            do_action( 'woocommerce_before_shop_loop_item_title' );
            if ( has_post_thumbnail() ) {
                //echo get_the_post_thumbnail( get_the_ID(), array(370,370) );          
                echo get_the_post_thumbnail( get_the_ID(), 'home-small-box' );          

            }
        ?>
    </a>        
</div>
$out = ob_get_clean();
<?php echo do_shortcode('[add_voting] ' . $out . '[/add_voting]'); ?> <!-- shortcode end-->