Wordpress Shortcode Output - wordpress

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">
Login
</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..