Support

Account

Home Forums General Issues How to use a shortcode with ACF?

Solving

How to use a shortcode with ACF?

  • I installed the ACF Plugin for WordPress and I use OWL Carousel for WP to add sliders in my Installation. I want to enable the user to use the shortcode OWL carousel provides within ACF.

    In my template file I do:

    <div class="slider">
        <?php 
        $slider = get_field('stadium_slider');
        echo do_shortcode( $slider );
        ?>
    </div>
    <div class="stadium-text-footer">
    <?php the_field('stadium_footer_text'); ?>
    
    <?php the_field('stadium_link'); ?>
    </div>

    The problem I know face is, that the shortcode is taken into consideration and the output is good – however the next div stadium-text-footer is empty. When i remove the do_shortcode from the template, the footer text and the link are being displayed. It seems that all custom fields are empty / not retrievable when I place the do_shortcode before the retrievals in my template (var_dump results in empty/false). If i place the do_shortcode at the end of my template it’s fine.

    Does anybody know what’s wrong here?

    Thanks!

  • The problem lies with the Custom Field / Shortcode combo you’ve crafted. The other fields are working fine and are not part of the issue.

    Let’s assume stadium_slider is a ‘Gallery Field’, look at the Gallery Field Docs here.

    The bottom example pretty much shows exactly what you’re attempting.

    <?php 
    $image_ids = get_field('gallery', false, false);
    $shortcode = '[gallery ids="' . implode(',', $image_ids) . '"]';
    echo do_shortcode( $shortcode );
    ?>

    Use this example code, replace get_field('gallery', false, false); with get_field('stadium_slider', false, false);.
    This should dump a basic WordPress gallery with the images that have been selected in the back end.

    Now we need Owl Carousel to take over. According to the owl-carousel plugin, there should be a setting to override the default galleries with it instead, take a look in it’s settings for something that sounds like this.

    Find this setting and you are away.

    A good help would be to turn on debug mode if you haven’t already in wp-config. If the code is already there, set it to true like so.

    define( 'WP_DEBUG', true );

    Hope this helps!

  • Hay, I am thinking to install ACF plugin in my woocommerce store, But I mostly use woocommerce shortcodes for customization, So, Does ACF plugin compatible with woocommerce shortcodes?

  • If the code is already there, set it to true like so.

Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘How to use a shortcode with ACF?’ is closed to new replies.