Styling The Custom Post Message Shortcode

In the last post I explained how to create a custom message that you can insert anywhere into your post with the use of shortcodes. If you are unsure of what I am talking about go check out the post, “Create A Custom Post Message With Shortcodes“.

If you followed the post and tried it out you may have found that even though it does create whatever message you want, it doens’t look any different then as if you would have just typed it in like you normally would. So, in order to separate it from the rest of the post we need to set it up inside of it’s own DIV or any other element and then all we need to do is do a little bit of CSS work.

Back into the functions.php file

It’s time to head back into the functions.php file to add the code that will let us style the message. Looking back at the post, the last function which allowed us to type in our own message looked like the following.

function CustomMessage( $atts, $content = null ) {
return $content;
}
add_shortcode('MyMessage', 'CustomMessage');

Lets wrap the custom message inside of a <P> tag as it will probably require the least amount of formatting in order for it to look correct.

function CustomMessage( $atts, $content = null ) {
$content = '<p class="customnote">'.$content.'</p>';
return $content;
}
add_shortcode('MyMessage', 'CustomMessage');

That is all that it takes. As you can see, we took the $content variable and placed it inside of our <P> tags in order to style it. Now, all that is left is to jump over into our CSS stylesheet and apply some formatting.

Formatting our message with CSS

In the above example I gave our <P> tags a custom class of customnote, this will let us easily format it with CSS. Inside of your style.css file all that you have to do is something as simple as…

.customnote {
background: red;
color: white;
}

With the styling set above, our custom message would look like…

This is our custom message with a red background and white text!

Of course, you can style it anyway that you like by adding a custom background, different borders along with other options.

Feedback!

If you read this post and understood it great! Let me know in the comments below. If you are still having issues and can't get it figured out, you are more than welcome to leave a comment or send me an email using the contact form and I'll do what I can to help!