I'm trying to create a plugin to have some shortcodes utility for my custom bootstrap 4 layouts. I'm reading the shortcode API docs but I'm unable to display the contents wrapped inside the shortcodes I've created. The plugin class is loaded correctly but if I load the test page I've made, it will display only the header and the footer, the content inside the shortcodes will not be loaded. Is there a fix to this? What's wrong with the code?
<?php
/*
* Plugin Name: BootstrapGrid
*/
class BootstrapUtilsGrid {
public function __construct()
{
add_shortcode('page_container', array( $this, 'pageContainer' ) );
add_shortcode('page_col', array( $this, 'pageCol' ) );
}
public function pageCover()
{
// code here
}
public function parallaxSection()
{
// code here
}
public function pageContainer($atts, $content)
{
$output = '';
$val = shortcode_atts(array(
'type' => 'container'
),$atts);
switch($val){
case 'container':
echo '<div class="container page-content"><div class="row">'.do_shortcode($content).'</div></div>';
break;
case 'container-fluid':
echo '<div class="container-fluid page-fluid-content"><div class="row">'.do_shortcode($content).'</div></div>';
break;
}
}
public function pageCol($atts, $content)
{
$output = '';
$val = shortcode_atts(array(
'type' => 'col-12',
'mobile' => 'display'
),$atts);
if( $val['mobile'] === 'hide' ){
switch($val['type']){
case 'col-3':
echo '<div class="col-md-3 col-lg-3 d-none d-sm-none d-md-block">'.$content.'</div>';
break;
case 'col-4':
echo '<div class="col-md-4 col-lg-4 d-none d-sm-none d-md-block">'.$content.'</div>';
break;
case 'col-6':
echo '<div class="col-md-6 col-lg-6 d-none d-sm-none d-md-block">'.$content.'</div>';
break;
case 'col-8':
echo '<div class="col-md-8 col-lg-8 d-none d-sm-none d-md-block">'.$content.'</div>';
break;
case 'col-12':
echo '<div class="col-md-12 col-lg-12 d-none d-sm-none d-md-block">'.$content.'</div>';
break;
}
}
else{
switch($val['type']){
case 'col-3':
echo '<div class="col-sm-12 col-md-3 col-lg-3">'.$content.'</div>';
break;
case 'col-4':
echo '<div class="col-sm-12 col-md-4 col-lg-4">'.$content.'</div>';
break;
case 'col-6':
echo '<div class="col-sm-12 col-md-6 col-lg-6">'.$content.'</div>';
break;
case 'col-8':
echo '<div class="col-sm-12 col-md-8 col-lg-8">'.$content.'</div>';
break;
case 'col-12':
echo '<div class="col-sm-12 col-md-12 col-lg-12">'.$content.'</div>';
break;
}
}
}
}
$init = new BootstrapUtilsGrid;
?>