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

3 Views

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:

Read More
[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!

Post Views: 3

Related posts

3 comments

  1. I think your problem is in this line:

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

    This warning:

    preg_split(): Unknown modifier ‘b’

    could be the result of your '/box' parameter, assuming WordPress uses regex to parse this (the documentation doesn’t say anything about this and I didn’t look through the code). You don’t need to add the closing tag explicitly, just use add_shortcode('box', 'colored_box_shortcode'); and put everything in one function instead of two.

    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');

  2. please modify your shortcode : [/box] to [end-box]

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

    Try this :
    I replace [/box] to [end-box] and also in grey to ‘grey’

    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');

  3. use $content to output what is inside the shortcode : 

    add_shortcode("box", function ($atts, $content = "") {

    $atts = shortcode_atts(array(
        "color" => "grey",
    ), $atts);

    ?>
        <div class="shadow-wrapper half-shadow im-centered">
        <div class="box-shadow shadow-effect-2">
        <div class="servive-block servive-block-<?php echo $atts["color"];?>">
            <?php echo do_shortcode($content);?>
        </div>
        </div>
        </div>
    <?php

});

Comments are closed.