0

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!

0

2 Answers 2

0

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');
4
  • Good idea - but I can't put it all in one shortcode. I need the first one to create the div with classes, and then the client can add the content in the middle, and then the ending shortcode with the closing divs will be executed.
    – SunnyOz
    Jul 23, 2015 at 10:05
  • Well, this should work on your expected way. [box] your client put content here [/box]
    – Shazzad
    Jul 25, 2015 at 1:47
  • actually @shazzad.. what you posted works better than the solution I posted after this. Although my 'solution' below does work - it ends up requiring 2 different shortcodes and the code in the editor uses [box] 'some content' [end-box]. Where yours is just 1 shortcode defined, and in the editor, I can use [box] 'some content' [/box] - which was what I wanted to do in the first place.. but was creating it the wrong way in functions.php. I hadn't realized how to use the $content in the editor, but after a bit of research, I now see that yours is the real solution to what I wanted. Thanks
    – SunnyOz
    Jul 25, 2015 at 13:29
  • I am glad it helps. However, you have shown a very good approach, what i might be using in different circumstances for sure. Thanks.
    – Shazzad
    Jul 26, 2015 at 14:36
0

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

1
  • See my comment on @shazzad solution.. his is the correct and more efficient way to accomplish what I was trying to do in the first place.
    – SunnyOz
    Jul 26, 2015 at 0:19

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.