Using ob_start and ob_get_clean with wordpress shortcode
I am including HTML template in my shortcode by using ob_start
ob_get_clean
. Everything works normally but the returned HTML structure is broken.
this is how I am inlcuding the html template in my shortcode function.
function return_cards_grid_section(){
//this variable is in the same file
global $subsitesDetails;
ob_start();
get_template_part('/templates/views/cards', null, [
'subsitesDetails' = $subsitesDetails
]);
return ob_get_clean();
}
And below is my code for cards html file
section class=cards-in-grid-section mt-50
div class=p-10 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2 gap-5
?
foreach($args['subsitesDetails'] as $subsite) {
?
a href=?= $subsite['url']; ? target=_blank class=block rounded overflow-hidden shadow-lg
img class=w-full h-64 object-cover object-center src=?=$imageUrl? alt=Mountain
div class=px-6 py-4
div class=font-bold text-xl mb-2?= $subsite['title'] ?/div
p class=text-pink text-base whitespace-normal?= $subsite['description'] ?/p
/div
div class=px-6 pt-4 pb-2
?
$tags = ['tag1', 'tag2', 'tag3'];
foreach ($tags as $tag){
?
span class=inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2?=$tag; ?/span
?
}
?
/div
/a
?
}
?
/div
/section
If I use the same HTML template without using the shortcode, I get the proper HTML structure. But when I try to do the same thing via shortcode and include the HTML template then the output HTML is not properly structured. Trying to figure out the problem for so long but not sure what is wrong in my code.
Output - using the code above. Output 2 - expected output of the code.
Any kind of help would be appreciated. Thanks!