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!

Topic get-template-part shortcode php html Wordpress

Category Web


After examining the code using developer tools, I was able to figure out the problem. Code was being wrapped in the pre tags which were causing the code to break its proper structure.

Found the solution for the pre tags issue here which solved the problem.

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.