-2

I have shortcode written in function.php file. I am using ACF to get custom data. But when I add shortcode inside page (in section's column) it is rendering outside in frontend.

Code in function.php

function show_feature_slider() {
$args = array( 'post_type' => 'featuredslider', 'posts_per_page' => -1, 'post_status' => 
'publish' );
$the_query = new WP_Query( $args ); 
?>
<div class="features-container">
 <div class="inner-container">
<?php
$index = 1;
while ($the_query->have_posts()) {
    $the_query->the_post();
    $id = get_the_ID();
    $desc = get_field('description', $id);
    $img_url = get_the_post_thumbnail_url();
    ?>
    <div class="feature feature-<?php echo $index ?>">
        <div class="featured-image">
            <img src="<?php echo $img_url; ?>"/>
        </div>
        <div class="featured-description">
            <?php echo $desc; ?>
        </div>
    </div>       

    <?php
    $index = $index + 1;
}
    ?>
 </div>
</div>
<?php
wp_reset_postdata();
}
add_shortcode('feature-slider', 'show_feature_slider');

Scrennshot of page in divi builder : https://prnt.sc/26fprc6

Screenshot on frontend: https://prnt.sc/26fpsp6

I have added shorcode in Code module of divi.

webdevelopers sp
  • 11
  • 1
  • While this was from months ago, I'm wondering if you ever found an answer to this as I'm having the exact same issue. – Lisa Sep 01 '22 at 05:47

2 Answers2

0

Try adding the shortcode inside a Text module. (using the Text tab, not the Visual tab)

Divi Text Module

Joshua Olufs
  • 31
  • 7
0

Your shortcode function as a small mistake, it should return the content in a variable instead of displaying it directly as html, what you want to do is that:

function show_feature_slider() {
$args = array( 'post_type' => 'featuredslider', 'posts_per_page' => -1, 'post_status' => 
'publish' );
$the_query = new WP_Query( $args ); 
ob_start();
?>
<div class="features-container">
 <div class="inner-container">
<?php
$index = 1;
while ($the_query->have_posts()) {
    $the_query->the_post();
    $id = get_the_ID();
    $desc = get_field('description', $id);
    $img_url = get_the_post_thumbnail_url();
    ?>
    <div class="feature feature-<?php echo $index ?>">
        <div class="featured-image">
            <img src="<?php echo $img_url; ?>"/>
        </div>
        <div class="featured-description">
            <?php echo $desc; ?>
        </div>
    </div>       

    <?php
    $index = $index + 1;
}

    ?>
    </div>
</div>
<?php
$output = ob_get_clean(); 
wp_reset_postdata();
return $output ;
}
add_shortcode('feature-slider', 'show_feature_slider');
Isisky
  • 33
  • 2