Question 30728 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Shortcode in Divi rendering outside column and section – WordPress

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.

Tags:

2

Answers


  1. 0

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

    Divi Text Module

    Login or Signup to reply.
  2. 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');
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search