Create A Custom Post Message With Shortcodes
Introduced into WordPress 2.5, shortcodes are a very simple set of particular functions for use inside of the post content. They use the same setup as BBCode that you may be familiar with on forum software such as phpBB and vBulletin.
One of the coolest things that I like about using shortcodes is that you can create a custom message for your posts such as the one below.
[note]This is a custom message using a shortcode![/note]
As you can see, using shortcodes in such a way can add quite a bit of depth as the above creates a nice “look at me” message thanks to a little bit of CSS styling. Enough talking though, lets get into the actual coding.
Creating the shortcode in functions.php
The nice thing is that we are only going to be working inside of one file in order to create the shortcode. Make your way into the functions.php file by accessing the Theme Editor which can be found under the Appearance tab in WordPress 2.7. From there, select Theme Functions (functions.php) from the list on the right hand side.
Once you are inside, make your way onto a new line while ensuring that you are still within the <?php and ?> tags. A shortcode is just a function, lets create the first line of that right now.
function CustomMessage() {
Alright, now that we have the function started, lets move into the actual code that does all the leg work. Keeping this simple, move down to the next line and type in the following line of code.
$text = "This is a custom shortcode!";
This text within the quotes is what is going to be displayed as the shortcode when we add it to our post. Once again, move down to the next line and insert the following code.
return $text;
Now, we close the function out.
}
Then add the line of code that enables us to use the shortcode inside of our post. Without this code, the only thing that would show up would be the tag for the shortcode instead of the content that you actually want.
add_shortcode('MyMessage', 'CustomMessage');
In the above code, MyMessage refers to what you will use as the tag for the shortcode inside of your post. CustomMessage refers to the name of the function used to display the shortcode. Adding the code together we can see it in all it’s glory below.
function CustomMessage() {
$text = "This is a custom shortcode!";
return $text;
}
add_shortcode('MyMessage', 'CustomMessage');
So there we have it, the full function for the shortcode written inside of functions.php.
Using the shortcode in a post
Fortunately, it is really easy to implement the shortcode. All that you have to do is place the name of the shortcode inside of [ ] brackets. So in the above shortcode that we created, all that you would have to do is insert [MyMessage] anywhere inside of the post.
Wherever you placed the shortcode, This is a custom shortcode! would show up.
Creating a real custom message
As you may have already realized, the above shortcode doesn’t allow you to exactly create a custom message for each post. Every time that you use the shortcode the same text will be displayed. Fear not, there is a way to create a full customized message so that you can display whatever you want inside of the shortcode.
Lets head back into our functions.php file for some quick code modification. Once inside, we are going to change the first line of our function file from
function CustomMessage() {
into
function CustomMessage( $atts, $content = null ) {
Then, remove
$text = "This is a custom shortcode!"; return $text;
and replace it with
return $content;
Those are the only parts that are needed to change the function in order to allow you to create a custom message with the shortcode. To recap, the new function will look like the following.
function CustomMessage( $atts, $content = null ) {
return $content;
}
add_shortcode('MyMessage', 'CustomMessage');
Once you have that done, make sure to save the file and head back into your post. This is where you are going to create the custom text that will display. The example below will show you how to create the custom text.
[MyMessage]Hey, look! I just created a custom shortcode![/MyMessage]
Notice that instead of just a single word inside of [ ] braces, we now have our custom text sitting inside of an opening and closing tag for the shortcode. In the above example, whatever text or HTML you place inside of the opening and closing tags will be displayed.
How is that any different from just typing it out?
Good question! It’s different because a shortcode allows you to surround the shortcode text with a custom class defined element using the <P>, <DIV>, <SPAN> and other HTML tags.
Interested in learning how to style the custom message we just created? Check out the post, “Styling The Custom Post Message Shortcode“.
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!