If you (like me) are one of those impatient types that wants to see the full code right now, scroll to the bottom of the post.
There are so many plugins available for WordPress! And many of those use shortcodes to do their work. So many, in fact, that you can make WordPress do just about anything you’d want a CMS to do. What happens, though, when you can’t find one that you need? Why make your own of course!
Using the API, you can use your PHP skills to implement all sorts of things. First, you have to make sure you have correctly formatted plugin information as outlined here. The rest of the time I’m going to assume you have done this.
Shortcodes can be very versatile and they allow you to pass variables to them via the $atts variable. This variable must be run through the shortcode_atts function if you want to use them, though. Once run through the function, it will return an associative array with your variables as the keywords. Word of warning here: you MUST use lowercase variables here. Uppercase will not work.
In addition to the $atts variable, you have the $content variable which, if you are using a plugin that uses beginning and ending tags, returns the content from between your tags. This is useful if you want to allow someone to format the content being altered or just to pass a large string.
The last variable is the $code variable. This is rarely used and is only to pass the shortcode name being used. I have never used it, myself, but it’s there if you need it.
To start let’s create a function
1
2
3
4
| function my_function($atts,$content){
$html='Hello World';
return $html;
} |
Note that we return the string instead of simply echoing. This allows WordPress to place the shortcode where you want it and not at the top of your content.
Next we should let WordPress know that this is a shortcode function. We just add this bit of code after the function
1
| add_shortcode("my_shortcode", "my_function"); |
Now let’s mess with our attributes. Let’s say we may want to switch out ‘World’. We could do a str_replace, or we could use the $attr variable with a default settings array.
1
2
3
4
5
6
7
| function my_function ($atts,$content){
$opts=shortcode_atts ( array(
'who' => 'World'
), $atts );
$html='Hello '.$opts['who'];
return $html;
} |
With the shortcode_atts function, the first associative array you pass is your default settings. These will be overridden, however, by the $atts you pass to the function. That means that you could put something like
[my_shortcode who=”Everyone”]
and the output would be “Hello Everyone”.
Now what if you have some content between those tags that you want to edit? That sounds like a job for the $content function!
1
2
3
4
5
6
7
| function my_function ($atts,$content){
$opts=shortcode_atts ( array(
'who' => 'World'
), $atts );
$html=str_replace('{greeting}','Hello '.$opts['who'],$content);
return $html;
} |
Now the function does a string replace looking for the {greeting} string and replacing it with our Hello World string. So if you used the shortcode
[my_shortcode who=”Everyone”]. How are you?[/my_shortcode]
you would get the result “Hello Everyone. How are you?”.
That’s all there is to the shortcodes! Obviously you would probably want to do something a smidge more complex, but this give you the basic idea.
Full code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| function my_function ($atts,$content){
//get any attributes that may have been passed; override defaults
$opts=shortcode_atts ( array(
'who' => 'World'
), $atts );
//adjust the $content
$html=str_replace('{greeting}','Hello '.$opts['who'],$content);
//return the html, don't echo
return $html;
}
//let WordPress know the function is a shortcode
add_shortcode ("my_shortcode", "my_function"); |
So when making a plugin, I needed to use jQuery UI and make it match the admin color scheme. I didn’t think it would be too easy.
