Make Your Own Shortcode

I needed to make it easy for a client to place different colored boxes behind text when she edits her new website. I could use code, of course, but the client wouldn’t know how to do that. I found this little 3 step process worked very well.

STEP ONE: Insert the following code into your functions.php file. In this case, I’m calling in a <div> with an id of “white”.

//* green box *//
function greenbox($atts, $content=null, $code="") {
$return = '<div id="green">';
$return .= $content;
$return .= '</div>';
return $return;
}
add_shortcode('green' , 'greenbox' );


STEP TWO: Create your css.

#green {
background-color: #cddc92;
width: 100%;
clear: both;
padding: 10px 25px;
padding: 1.0rem 2.5rem;
margin: 10px 0;
}

STEP THREE: Then you can insert it into your WordPress editor like this (without the spaces after/before the brackets):

[ green ]My Green Box[ /green ]

THE RESULT: My green box ends up looking like this:

My Green Box