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

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:xampphtdocsCIRBCirbWPwp-includesformatting.php on line 244

Warning: Invalid argument supplied for foreach() in C:xampphtdocsCIRBCirbWPwp-includesformatting.php on line 246

Warning: implode(): Invalid arguments passed in C:xampphtdocsCIRBCirbWPwp-includesformatting.php on line 297

Thanks for any guidance!


Source: shortcode

Leave a Reply