1

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;

?>
1

1 Answer 1

2

Because the shortcode must return a string. Avoid using the "echo" function in shortcode.

Instead of doing that:

function my_shortcode_function($content){

  echo '<div class="wrap">';
  echo '<div class="col">'.$content.'</div>';
  echo '</div>';

}

Do that:

function my_shortcode_function($content){

  $shortcode_return = '<div class="wrap">';
  $shortcode_return .= '<div class="col">'.$content.'</div>';
  $shortcode_return .= '</div>';

  return $shortcode_return;

}

Or use object buffering:

function my_shortcode_function($content){

  ob_start(); ?>

  <div class="wrap">
    <div class="col"><?php echo $content; ?> </div>
  </div>

  <?php
  $shortcode_return = ob_get_clean();

  return $shortcode_return;

}
2
  • Ok, I will try. I have a class so I need to implement this inside the functions I have, any help will be appreciated. NB if it's possible I also want to avoid to use the switch() but it seems to be the only reliable way to achieve what I want to do without create too many functions
    – userone2
    Sep 28, 2019 at 17:36
  • That's exactly what is written in the Codex: Note that the function called by the shortcode should never produce output of any kind. Shortcode functions should return the text that is to be used to replace the shortcode.
    – Max Yudin
    Sep 28, 2019 at 18:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.