Elementor Question posted in
A comprehensive tutorial library can be found here.

Elementor – How to echo div element using shortcode in WordPress

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?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    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;
}

  2. 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');
?>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search