How to pass parameter that ends up being part of a class name with wordpress shortcode

Question

This is the resulting html I want to produce with a shortcode - when editing page content in WordPress:

<div class="shadow-wrapper half-shadow im-centered">
<div class="box-shadow shadow-effect-2">
<div class="servive-block servive-block-bluemed">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec nulla vitae lacus. 
</div>
</div>
</div>

This is what I want to use inside of the editor box - when using the new shortcode I will define:

[box color="bluemed"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec nulla vitae lacus.
[/box]

The parameter being passed: color="bluemed" needs to become part of the div's class.. as in: <div class="servive-block servive-block-bluemed"> (see above example of resulting html code)

Here is what I have put inside of my functions.php file to try to create this new shortcode:

function colored_box_shortcode($atts) {
   extract(shortcode_atts(array(
      'color' => grey,
   ), $atts));
  return '<div class="shadow-wrapper half-shadow im-centered">
  <div class="box-shadow shadow-effect-2">
  <div class="servive-block servive-block-'.$color.'">';
}

add_shortcode('box', 'colored_box_shortcode');

function colored_box_end() {
    return '</div>
    </div>
    </div>';
}

add_shortcode('/box', 'colored_box_end');

As you can see I set the color attribute default content to be grey, but also allowing the ability to over-ride and specify the color in the parameter that is passed from the shortcode.

This color then needs to become part of the class name inside of the div. So if no parameter is passed then the class name will become: "servive-block-grey". Or if I pass the parameter of color="lavendar", then the class name will become: "servive-block-lavendar".

Is this even possible?

If so.. can someone help with the code I am using.. because I am getting hundreds of errors from WordPress when I view the page.

Basically the errors are a repeat of these 3 (which I think is probably caused by getting a syntax error with me trying to put in the parameter inside of a class name - like this: servive-block-'.$color.')

Warning: preg_split(): Unknown modifier 'b' in C:\xampp\htdocs\CIRB\CirbWP\wp-includes\formatting.php on line 244

Warning: Invalid argument supplied for foreach() in C:\xampp\htdocs\CIRB\CirbWP\wp-includes\formatting.php on line 246

Warning: implode(): Invalid arguments passed in C:\xampp\htdocs\CIRB\CirbWP\wp-includes\formatting.php on line 297

Thanks for any guidance!

Answer 1

The second argument of any WP shortcode is the content found inside the shortcode block. Additionally, Not sure how you are trying to use forward slash on a shortcode name, slashes are not allowed as a part of shortcode name. Try it like -

function colored_box_shortcode( $atts, $content )
{
   extract( shortcode_atts( array(
      'color' => 'grey',
   ), $atts));

  return 
  '<div class="shadow-wrapper half-shadow im-centered">
  <div class="box-shadow shadow-effect-2">
  <div class="servive-block servive-block-'. $color .'">'. $content .'</div>
  </div>
  </div>';
}
add_shortcode('box', 'colored_box_shortcode');

Answer 2

I go the solution to my problem from another forum just now: This was provided by @vrajesh:

I replace [/box] to [end-box] and also in grey to 'grey' so my code now looks like this, and it works perfectly.

function colored_box_shortcode($atts) {

   extract(shortcode_atts(array(
      'color' => 'grey',
   ), $atts));
  return '<div class="shadow-wrapper half-shadow im-centered"><div class="box-shadow shadow-effect-2">
  <div class="servive-block servive-block-'.$color.'">';
}

add_shortcode('box', 'colored_box_shortcode');

function colored_box_end() {
    return '</div>
    </div>
    </div>';
}

add_shortcode('end-box', 'colored_box_end');

Hope this helps someone else trying to do the same thing... which is to create the surrounding divs (via shortcodes to keep the coding simple), and that allows the client to write whatever content they want in between - because I won't be providing the content for them