Render HTML properly from Wordpress Shortcode-CodePudding

I have created a shortcode which renders this table on the frontend. At the moment the shortcode puts the content at the top of the page rather than respecting the location of where the shortcode is pasted in the editor.

How can i fix this?

<div id="cookie-container">
    <div >
        <div >
            <h3>Essential Cookies</h3>
        </div>
    </div>

    <table >
        <thead >
        <tr>
            <th style="width: 33%" >Name</th>
            <th style="width: 33%" >Cookie</th>
            <th style="width: 33%" >Purpose</th>
        </tr>
        </thead>

        <tbody >
        <tr>
            <?php
            $essential_cookies = carbon_get_theme_option( 'essential_cookies' );
            foreach ( $essential_cookies as $cookie ) {
                echo '<tr>';
                if($cookie['name']) {
                    echo '<td >';
                    echo $cookie['name'];
                    echo '</td>';
                }
                if($cookie['cookies']) {
                    echo '<td >';
                    echo $cookie['cookies'];
                    echo '</td>';
                }
                if($cookie['usage']) {
                    echo '<td >';
                    echo $cookie['usage'];
                    echo '</td>';
                }
            }
            echo '</tr>';
            ?>
        </tr>
        </tbody>
    </table>

</div>

/**
 * Construct Essential Cookies Shortcode
 */
function construct_essential_cookies_table()
{

    ob_start();

        include dirname( __FILE__ ) . '/partials/essential_cookie_table.php';

    return ob_get_clean();

}
add_shortcode('diva_essential_cookies', 'construct_essential_cookies_table');

CodePudding user response：

You need to include the full HTML code inside the php output buffer functions like that.

    <?php ob_start(); ?>
        <div id="cookie-container">
            <div >
                <div >
                    <h3>Essential Cookies</h3>
                </div>
            </div>
        
            <table >
                <thead >
                <tr>
                    <th style="width: 33%" >Name</th>
                    <th style="width: 33%" >Cookie</th>
                    <th style="width: 33%" >Purpose</th>
                </tr>
                </thead>
        
                <tbody >
                <tr>
                    <?php
                    $essential_cookies = carbon_get_theme_option( 'essential_cookies' );
                    foreach ( $essential_cookies as $cookie ) {
                        
                        echo '<tr>';
                        if($cookie['name']) {
                            echo '<td >';
                            echo $cookie['name'];
                            echo '</td>';
                        }
                        if($cookie['cookies']) {
                            echo '<td >';
                            echo $cookie['cookies'];
                            echo '</td>';
                        }
                        if($cookie['usage']) {
                            echo '<td >';
                            echo $cookie['usage'];
                            echo '</td>';
                        }
                    }
                    echo '</tr>';
                    ?>
                </tr>
                </tbody>
            </table>
        
        </div>
 <?php return ob_get_clean();