Wordpress Shortcode Output

Question

I'm developing a plugin to wordpress using WordPress Plugin Boilerplate. Therefore, I need to create a shortcode to show up my data in one page for the user.

Is it correct to concatenate the HTML as below?

function custom_shortcode( $atts ) {

    // Attributes
    $atts = shortcode_atts(
        array(
            'type' => 'type'
        ),
        $atts
    );

    //get all entries (page 1 with 999999 entries per page should do it:)
    $data = Data::get_entries( $atts['type']);

    ob_start();
    ?>

        <div class="row">
            <header><h3>Expenses</h3></header>
            <p>
                <span class="cf-entries-header app-name">Expense Origin</span>
                <span class="cf-entries-header page-name">Expense Value</span>
            </p>

            <?php
                foreach ( (array)$data['entries'] as $entry ) {
                    echo '<p class="cf-entry">’ .
                    ‘<span class="exp-origin">' . $entry['data']['origin'] . '</span>’ .
                    ‘<span class="exp-value">' . $entry['data']['value'] . '</span>’;
                };
            ?>
        </div>
       <?php

        $output = ob_get_clean();
        return $output;
    };

}
add_shortcode( 'cf_app_entries', 'cf_app_entries' );

Answer 1

No this is not right way..

You can't echo all content in shortcode..

You need to bind all content (HTML) in one variable and return this variable

Example

function loginform() {

$html = '<form class="custom_login_form" rel="" method="POST" role="form" action="" autocomplete="off">
    <div class="form-group">
        <div class="input-container">
            <input id="useremail" type="text" class="form-control input-field" name="email" placeholder="Email">
        </div>
    </div>
    <div class="twice-box"> 
        <div class="form-group">
            <div class="input-container">
                <input id="userpassword" type="password" class="form-control input-field" name="userpassword" placeholder="Password">
            </div>
        </div>
        <div class="form-group text-center">
            <a href="javascript:void(0)" id="submit_login" class="btn yell-btn submt-btn">Login</a>
        </div>
    </div>
    </form>';

return $html;
}
add_shortcode('login-form', 'loginform');

Please check this ShortCode..

If any issue please let me know..

I will be happy to help you..