php - How to echo div element using shortcode in WordPress
Get the solution ↓↓↓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
Solution:
A possible solution for you would be to enable output buffering usingob_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
Solution:
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;
}
Share solution ↓
Additional Information:
Link To Answer People are also looking for solutions of the problem: a non-numeric value encountered in
Didn't find the answer?
Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.
Similar questions
Find the answer in similar questions on our website.
Write quick answer
Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.