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?

Have you tried return $profilecontainer; instead of echo $profilecontainer;? — ArSeN
– ArSeN, Commented Mar 6, 2021 at 19:26

rank · Accepted Answer · 2021-03-07 01:02:59Z

0

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');
?>

answered Mar 7, 2021 at 1:02

rank

2,5842 gold badges16 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rudolfs · Accepted Answer · 2021-03-18 08:13:05Z

0

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;
}

answered Mar 18, 2021 at 8:13

Rudolfs

1375 silver badges18 bronze badges

Collectives™ on Stack Overflow

How to echo div element using shortcode in WordPress

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related