[Support request] Failure with shortcode

[Daniel Moreno Cuerda]

Hi!

I’ve created a shortcode to generate accordions with fields of ACF. However, the content of the shortcode is generated on top of the page instead of where I have placed it. The code is very simple. It’s a function that loads an html template with conditionals to check the ACF fields and then I create the shortcode:

add_shortcode(‘custom_acordeon_birdcom’, ‘template_acordeon’);

The code worked for me on a page created with Elementor, is it possible that there is an incompatibility with Generatepress?

Thank you so much for your attention.

[David]

Hi there,

can i see the template_acordeon function ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Daniel Moreno Cuerda]

Sure!

It’s a bit long. This is it:

function template_acordeon() {

    //Definición de variables

    global $post;

    $encabezado = get_field('etiqueta_encabezado');
    $first_title = get_field('encabezado_primer_acordeon');
    $first_content = get_field('contenido_primer_acordeon');
    $second_title = get_field('encabezado_segundo_acordeon');
    $second_content = get_field('contenido_segundo_acordeon');
    $third_title = get_field('encabezado_tercer_acordeon');
    $third_content = get_field('contenido_tercer_acordeon');
    $fourth_title = get_field('encabezado_cuarto_acordeon');
    $fourth_content = get_field('contenido_cuarto_acordeon');
    $fifth_title = get_field('encabezado_quinto_acordeon');
    $fifth_content = get_field('contenido_quinto_acordeon');
    $sixth_title = get_field('encabezado_sexto_acordeon');
    $sixth_content = get_field('contenido_sexto_acordeon');
    $seventh_title = get_field('encabezado_septimo_acordeon');
    $seventh_content = get_field('contenido_septimo_acordeon');
    $eighth_title = get_field('encabezado_octavo_acordeon');
    $eight_content = get_field('contenido_octavo_acordeon');
    $nineth_title = get_field('encabezado_noveno_acordeon');
    $nineth_content = get_field('contenido_noveno_acordeon');
    $tenth_title = get_field('encabezado_decimo_acordeon');
    $tenth_content = get_field('contenido_decimo_acordeon');
    
    if ( is_single() || is_page()) { 
        
        if(!empty($first_title) && !empty($first_content)) {

            do_action('before_content_acordeon'); ?>

            <details class="details">
            <summary class="summary-details"> <?php
            switch($encabezado) {
                case "h2":
                    echo "<h2 class='title-summary'>" . $first_title . "</h2>";
                    break;
                case "h3": 
                    echo "<h3 class='title-summary'>" . $first_title . "</h3>";
                    break;
                case "h4" :
                    echo "<h4 class='title-summary'>" . $first_title . "</h4>";
                    break;
            }
                ?>
            </summary>
            <div class="p-details">
                <?php echo $first_content; ?>
            </div>
        </details> <?php
    
     if(!empty($second_title) && !empty($second_content)) { ?>
        <details class="details">
            <summary class="summary-details"> <?php
            switch($encabezado) {
                case "h2":
                    echo "<h2 class='title-summary'>" . $second_title . "</h2>";
                    break;
                case "h3": 
                    echo "<h3 class='title-summary'>" . $second_title . "</h3>";
                    break;
                case "h4" :
                    echo "<h4 class='title-summary'>" . $second_title . "</h4>";
                    break;
            }
                ?>
            </summary>
            <div class="p-details">
                <?php echo $second_content; ?>
            </div>
        </details>
    <?php } 
    
    if(!empty($third_title) && !empty($third_content)) {?>
    
        <details class="details">
            <summary class="summary-details"> <?php
            switch($encabezado) {
                case "h2":
                    echo "<h2 class='title-summary'>" . $third_title . "</h2>";
                    break;
                case "h3": 
                    echo "<h3 class='title-summary'>" . $third_title . "</h3>";
                    break;
                case "h4" :
                    echo "<h4 class='title-summary'>" . $third_title . "</h4>";
                    break;
            }
                ?>
            </summary>
            <div class="p-details">
                <?php echo $third_content; ?>
            </div>
        </details>
    
    <?php }
    
    if(!empty($fourth_title) && !empty($fourth_content)) { ?>
        <details class="details">
            <summary class="summary-details"><?php
                switch($encabezado) {
                    case "h2":
                        echo "<h2 class='title-summary'>" . $fourth_title . "</h2>";
                        break;
                    case "h3": 
                        echo "<h3 class='title-summary'>" . $fourth_title . "</h3>";
                        break;
                    case "h4" :
                        echo "<h4 class='title-summary'>" . $fourth_title . "</h4>";
                        break;
                }
                ?>
            </summary>
            <div class="p-details">
                <?php echo $fourth_content; ?>
            </div>
        </details> <?php
        }

    if(!empty($fifth_title) && !empty($fifth_content)) { ?>
        <details class="details">
            <summary class="summary-details"><?php
                switch($encabezado) {
                    case "h2":
                        echo "<h2 class='title-summary'>" . $fifth_title . "</h2>";
                        break;
                    case "h3": 
                        echo "<h3 class='title-summary'>" . $fifth_title . "</h3>";
                        break;
                    case "h4" :
                        echo "<h4 class='title-summary'>" . $fifth_title . "</h4>";
                        break;
                }
                ?>
            </summary>
            <div class="p-details">
                <?php echo $fifth_content; ?>
            </div>
        </details> <?php
        }

    if(!empty($sixth_title) && !empty($sixth_content)) { ?>
        <details class="details">
            <summary class="summary-details"><?php
                switch($encabezado) {
                    case "h2":
                        echo "<h2 class='title-summary'>" . $sixth_title . "</h2>";
                        break;
                    case "h3": 
                        echo "<h3 class='title-summary'>" . $sixth_title . "</h3>";
                        break;
                    case "h4" :
                        echo "<h4 class='title-summary'>" . $sixth_title . "</h4>";
                        break;
                }
                ?>
            </summary>
            <div class="p-details">
                <?php echo $sixth_content; ?>
            </div>
        </details> <?php
        }
    
    if(!empty($seventh_title) && !empty($seventh_content)) { ?>
        <details class="details">
            <summary class="summary-details"><?php
                switch($encabezado) {
                    case "h2":
                        echo "<h2 class='title-summary'>" . $seventh_title . "</h2>";
                        break;
                    case "h3": 
                        echo "<h3 class='title-summary'>" . $seventh_title . "</h3>";
                        break;
                    case "h4" :
                        echo "<h4 class='title-summary'>" . $seventh_title . "</h4>";
                        break;
                }
                ?>
            </summary>
            <div class="p-details">
                <?php echo $seventh_content; ?>
            </div>
        </details> <?php
        }

    if(!empty($eighth_title) && !empty($eighth_content)) { ?>
        <details class="details">
            <summary class="summary-details"><?php
                switch($encabezado) {
                    case "h2":
                        echo "<h2 class='title-summary'>" . $eighth_title . "</h2>";
                        break;
                    case "h3": 
                        echo "<h3 class='title-summary'>" . $eighth_title . "</h3>";
                        break;
                    case "h4" :
                        echo "<h4 class='title-summary'>" . $eighth_title . "</h4>";
                        break;
                }
                ?>
            </summary>
            <div class="p-details">
                <?php echo $eighth_content; ?>
            </div>
        </details> <?php
        }
    if(!empty($nineth_title) && !empty($nineth_content)) { ?>
        <details class="details">
            <summary class="summary-details"><?php
                switch($encabezado) {
                    case "h2":
                        echo "<h2 class='title-summary'>" . $nineth_title . "</h2>";
                        break;
                    case "h3": 
                        echo "<h3 class='title-summary'>" . $nineth_title . "</h3>";
                        break;
                    case "h4" :
                        echo "<h4 class='title-summary'>" . $nineth_title . "</h4>";
                        break;
                }
                ?>
            </summary>
            <div class="p-details">
                <?php echo $nineth_content; ?>
            </div>
        </details> <?php
        }
    
    if(!empty($tenth_title) && !empty($tenth_content)) { ?>
        <details class="details">
            <summary class="summary-details"><?php
                switch($encabezado) {
                    case "h2":
                        echo "<h2 class='title-summary'>" . $tenth_title . "</h2>";
                        break;
                    case "h3": 
                        echo "<h3 class='title-summary'>" . $tenth_title . "</h3>";
                        break;
                    case "h4" :
                        echo "<h4 class='title-summary'>" . $tenth_title . "</h4>";
                        break;
                }
                ?>
            </summary>
            <div class="p-details">
                <?php echo $tenth_content; ?>
            </div>
        </details> <?php
        }

}
    do_action('after_content_acordeon');

    } }

[David]

Ok, so Shortcodes are designed to return their content, not for echoing or printing or any other direct display.
If you use any of those methods eg. echo then WP will spit it out at the top of the content.

You can stop that from happening by using Object Buffering, see here for an example:

https://docs.generatepress.com/article/creating-a-shortcode/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts