Archived topic
Failure with shortcode
3 replies · Started by Daniel Moreno Cuerda on September 8, 2022
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.
Hi there,
can i see the template_acordeon function ?
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');
} }
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/