How to echo div element using shortcode in WordPress

Question

I am creating a WordPress plugin that can display parts of a user profile page using shortcodes. This solution would allow creating a user profile page with a page builder shortcode widget.

So far I have understood how to echo simple text with a shortcode.

function simpletext() {
$text = 'simple text';

echo $text;

}

add_shortcode('text-shortcode', 'simpletext');

Thanks to the above function I can use [text-shortcode] to echo "simple text".

Using same strategy, I would like to echo/display div element - <div class="um_profile_container> on the user profile page that is powered by same template that keeps - <div class="um_profile_container> element.

function profilecontainer() {
$profilecontainer = '<div class="um_profile_container">';
echo $profilecontainer;

}

add_shortcode('profile-container', 'profilecontainer');

However, unlike with simple text, the above function does not display this div element on the frontend when [profile-container] shortcode is added to the page via page builder (Elementor in my case).

What am I missing?

Answer 1

A possible solution for you would be to enable output buffering using ob_start, so you can write your html code freely.

<?php
function profilecontainer() {
    ob_start(); ?>
    
    <div class="um_profile_container">Your Content</div>

    <?php return ob_get_clean();
}
add_shortcode('profile-container', 'profilecontainer');
?>

Answer 2

It turns out that the function actually does display this div element on the frontend when [profile-container] shortcode is added to the page via page builder (Elementor in my case).

The problem was that the div element had no hight or width so it was displayed as a simple line - div element borders close together. To test this out you have to set high and width with CSS.

.um_profile_container {
    width: 100px;
    height: 100px;
}