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!

Dario Ferrer · Accepted Answer · 2023-12-27 07:26:11Z

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

edited Dec 27, 2023 at 7:26

Dario Ferrer

8241 gold badge8 silver badges24 bronze badges

answered Jul 23, 2015 at 6:23

Gerald Schneider

17.8k10 gold badges64 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

SunnyOz Over a year ago

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. I used the example of @GeraldSchneider to just change the name of the 'ending' shortcode - and it worked

SunnyOz Over a year ago

You might be right.. but some more info would be helpful. I tried your suggestion, and when I enter the shortcode in the page editor, then add what I want for content just after the shortcode, the content ends up displaying outside of the last ending div of the shortcode when viewing the page. I can't figure out how to put a shortcode into the editor and allow the user to edit the content, and still have the ending divs show up afterward the content without doing it in a 2 step process like I suggested in own my answer. I've looked it up in Google, but can't figure out how to implement it.

SunnyOz Over a year ago

Now I finally understand.. that this is the correct & concise way to do what I was trying to do originally with the 2 step shortcodes. In the page editor you enter [box] the content the client can edit goes here [/box]. I was not realising you needed to manually enter the end tag yourself in the editor, so that was why I couldn't get your solution to work at first. Thanks.

vrajesh · Accepted Answer · 2015-07-23 07:43:03Z

0

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

edited Jul 23, 2015 at 7:43

answered Jul 23, 2015 at 6:44

vrajesh

2,9423 gold badges28 silver badges40 bronze badges

1 Comment

SunnyOz Over a year ago

perfect.. just what I needed. Thx

mmm · Accepted Answer · 2015-07-23 11:06:11Z

0

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

});

edited Jul 23, 2015 at 11:06

answered Jul 23, 2015 at 6:19

mmm

1,3301 gold badge11 silver badges25 bronze badges

2 Comments

SunnyOz Over a year ago

Good idea.. but I need 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. I won't be providing the content for them.

mmm Over a year ago

to apply other shortcodes to content, use echo do_shortcode($content) - i edit my code

Collectives™ on Stack Overflow

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

3 Answers 3

3 Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related