NO BUG: "echo" call custom function return AutoP

Browser: Edge
OS: Windows
URL: localhost
Video:

I use Bricks Builder’s {echo:} to call my custom function, and it works normally.

However, when using echo to call the function that returns HTML content, it automatically adds tags before the tags. I know this is an issue related to autoP, but I have already handled it in the original function, and it does not automatically add tags. This only happens with the HTML rendered after processing through {echo:my_function()}.

This troubles me a lot. How can I avoid using {echo:} to call a custom function without automatically adding tags?

Here is my custom function code in function.php

/**
 * Display Random Posts
 * 
 * @param int $number_of_posts
 * @return string rendered html
 */
function show_rand_posts($number_of_posts = 5) {
  ob_start();
  
  $args = array(
    'post_type'           => 'post',
    'orderby'             => 'rand',
    'posts_per_page'      => $number_of_posts,
    'ignore_sticky_posts' => 1,
    'no_found_rows'       => true,
    'fields'              => 'ids'
  );

  $query = new WP_Query($args);
  $default_img = apply_filters('rand_posts_default_image', 'http://images.xxx/default-img/thumbnail-default-image.png');
  
  echo '<div class="widget-rand-posts">';
  
  if ($query->have_posts()) {
    while ($query->have_posts()) {
      $query->the_post();
      
      $post_id     = get_the_ID();
      $permalink   = esc_url(get_permalink());
      $title       = esc_html(get_the_title());
      $post_date   = get_the_date('Y-m-d');
      $thumbnail   = has_post_thumbnail() ? 
                    get_the_post_thumbnail_url($post_id, 'medium') : 
                    $default_img;
      ?>
      <div class="widget-rand-post__wrapper">
        <a href="<?php echo $permalink; ?>" aria-label="<?php echo $title; ?>">
          <img class="widget-rand-post__thumbal" 
               src="<?php echo $thumbnail; ?>" 
               alt="<?php echo $title; ?>"
               loading="lazy">
        </a>
        <div class="widget-rand-post__body">
          <h3 class="widget-rand-post__title">
            <a href="<?php echo $permalink; ?>"><?php echo $title; ?></a>
          </h3>
          <time class="widget-rand-post__date" datetime="<?php echo $post_date; ?>">
            <?php echo $post_date; ?>
          </time>
        </div>
      </div>
      <?php
    }
    wp_reset_postdata();
  } else {
    echo '<p class="no-posts">' . esc_html__('No posts found.', 'your-text-domain') . '</p>';
  }
  
  echo '</div>';
  
  return ob_get_clean(); 
}


Have you looked at wpautop? wpautop() – Function | Developer.WordPress.org

I know this wpautop(), but I don’t want disable that, I just wish the “echo” in bricks can disable the autoP.
How can I do ?

What element are you using there?

1 Like

I use Tabs element which split the 2 tabs. every tab content call custom function (e.g. show_rand_posts) via {echo:}.

That element body parses out the data in a <p> tag … I don’t think there is anything you can do about it.

May I ask why you are using the tab element in that way? What are you trying to do with it?

You could also try to use the nested tabs and then instead of the rich text editor, you can use the basic text option.

1 Like

I use the Tabs element to allow users to switch between two tabs to display dynamic content. This shouldn’t be related to whether nested Tabs elements are used, right?

I’m just calling a custom function through the {echo} tag. The main issue seems to stem from why the {echo} tag renders HTML content with automatic < p > tags being added. Even when using the Basic Text element and then using {echo} inside it, the problem remains the same.

Thanks to your suggestion, I just tested using the Basic Text element with {echo} and it does not automatically add autoP.

It seems to be an issue with the Rich Text element rendering rather than a problem with {echo}.

Thank you for your advice. I will now switch to using the Nested Tabs element, insert the Basic Text element (replace rich text), and then call {echo} to retrieve dynamic data. It seems like it should work properly.

I looked at your code and the code and screenshots don’t match. The function show_recent_comments doesn’t exist. Your function is show_rand_posts.

When I test your code it works fine for me with. See the video.

Video: Watch 2025-03-04 09-30-40 | Streamable

Cheers

1 Like

Thank you very much for your attentive assistance in executing and testing.

As mentioned in the previous post, using the built-in Rich Text in the Tabs element causes the autoP issue. However, switching to the Nested Tabs element, replacing it with the Basic Text element, and then calling the function through {echo} resolves the autoP problem.

Additionally, the show_recent_comments within the widget is another function, while show_rand_posts is the original widget for posts. I use the Tab labels to switch between the dynamic content of these two functions.

Thanks again; I have finally solved my problem :slight_smile:

Excellent! Good work … glad we could figure it out. =]

Cheers

2 Likes