Description:

In your blog life you could highlight some text, especially if you want to give importance to some part of your article’s text. In this tutorial i’ll show you how to create a color boxes via shortcode that will give you the result you can see in the picture.

In this tutorial we’ll use some basic wordpress php syntax and some css. You can customize the color editing the css of the background color and margin color.

The Code:

You just need to add this code to your theme’s function.php file:

function wpc_red_box($atts, $content = null) {
 return '<p style="margin-top:10px;margin-left:0;background: #FFD9C8;border: 1px solid #F37C72;padding:20px;	overflow:hidden;">' . $content . '</p>';
}
add_shortcode('wpc_red_box', 'wpc_red_box');

Now in your post add:

[wpc_red_box]This is text in a red box[/wpc_red_box]

Results:

[red_box]This is text in a red box[/red_box]

Cheers