Today, we're going to look at how to use shortcodes in conjunction with a variety of popular services - including sites like YouTube and Flickr by first recapping how to create a shortcode, and then how to convert that third-party code into something that can be repeated and manipulated.
We've covered shortcodes already here at WPTuts+, discussing the advantages of using them and how to actually, well, use them. Shortcodes are effectively shortcuts (as defined by WordPress themselves) that allow an outcome to be achieved repeatedly with the least work possible. In their simplest form, a shortcode includes some code you've hooked into WordPress in another file, sometimes the product of a third-party, such as a YouTube video or a Flickr stream.
Recap: Creating a Basic Shortcode
If you're not familiar to shortcodes, then you should probably stop reading this article and check out one of the other articles we have here at Tuts+ about shortcodes in WordPress.
- Getting Started with WordPress Shortcodes
- WordPress Shortcodes: The Right Way
- Resource Roundup! 20 Creating Shortcodes To Use In Your Projects
A shortcode is created by adding a function to your functions.php file, and then linking it up as a shortcode. The example below creates a link to the AppStorm hub.
function link_to_appstorm($atts, $content=null) {
return '<a href="http://www.appstorm.net">AppStorm</a>';
}
add_shortcode('appstorm', 'link_to_appstorm');
To use it, we use the simplest form of a shortcode with no attributes.
[appstorm]
We can take this idea further by introducing an attribute, in which to specify a specific AppStorm site to link to.
function link_to_appstorm($atts, $content=null) {
extract(shortcode_atts( array('site' => 'www'), $atts));
return '<a href="http://' . $site . '.appstorm.net">AppStorm</a>';
}
add_shortcode('appstorm', 'link_to_appstorm');
The time, the shortcode is linking to a subdomain of AppStorm. We specify which subdomain by adding the site attribute. If there is no attribute defined in the shortcode, the shortcode defaults it to www which just links back to the main homepage. The usage example below would link to iPad.AppStorm.
[appstorm site="ipad"]
As you can see, shortcodes are pretty self-explanatory. What we want to do, however, is use the same basic principle of a link generated by a shortcode with an attribute to use in conjunction with a third-party service like YouTube or Flickr.
From Embed to Shortcode
Converting a static third-party piece of code to a shortcode is pretty similar to the method used to create a link. Simply, we're going to create a function that returns the code as a shortcode and then throw in a few attributes to customise it.
Step 1. Creating A Non-Variable Shortcode
The first step we should take is to take the regular embed code, and create a simple return function out of it.
function youtube_video($atts, $content=null) {
return '<iframe width="640" height="360" src="http://www.youtube.com/embed/caYu-Lf9A4Y?rel=0" frameborder="0" allowfullscreen></iframe>';
}
add_shortcode('youtube', 'youtube_video');
Usage
[youtube]
In the same way we created that first, non-variable link in the first example, the piece of code above embeds a YouTube video that will not change at all. And how it does that is pretty self-explanatory too.
Step 2. Introducing Some Attributes
Essentially, the piece of code in the previous step will produce a result identical to if the returned code was pasted into the editor itself. Unless you are going to be regularly embedding the same video over-and-over again, this shortcode is probably useless. Therefore, we want to introduce some attributes to translate into parameters for the iframe.
In order to achieve this, we once again use the extract() function to pull attributes in from the shortcode. In the code below, we do this in a basic form by only creating an attribute to replace the video ID.
function youtube_video($atts, $content=null) {
extract(shortcode_atts( array('id' => ''), $atts));
return '<iframe width="640" height="360" src="http://www.youtube.com/embed/' . $id . '?rel=0" frameborder="0" allowfullscreen></iframe>';
}
add_shortcode('youtube', 'youtube_video');
Usage
[youtube id=""]
And, just like substituting the video ID, we can do the same for the width and height. This is the time you'll want to make sure you're providing default values for, however, in case the user doesn't provide a width or height value.
function youtube_video($atts, $content=null) {
extract(shortcode_atts( array(
'id' => '',
'width' => '640',
'height' => '360'
), $atts));
return '<iframe width="' . $width . '" height="' . $height .'" src="http://www.youtube.com/embed/' . $id . '?rel=0" frameborder="0" allowfullscreen></iframe>';
}
add_shortcode('youtube', 'youtube_video');
Usage
[youtube id="" width="" height=""]
Step 2b. Additional Parameters
YouTube does have additional parameters that can be added to the URL, such as autoplay. Obviously, these can be applied to the returned code too, with their own attribute if necessary. Generally, this is self-explanatory and is demonstrated below (added parts are in bold).
function youtube_video($atts, $content=null) {
extract(shortcode_atts( array(
'id' => '',
'width' => '640',
'height' => '360',
'autoplay' => '0'
), $atts));
return '<iframe width="' . $width . '" height="' . $height .'" src="http://www.youtube.com/embed/' . $id . '?autoplay=' . $autoplay . '&rel=0" frameborder="0" allowfullscreen></iframe>';
}
add_shortcode('youtube', 'youtube_video');
Usage
[youtube id="" width="" height="" autoplay=""]
Step 3. Done!
It really is that simple, and, as you'll see in the following roundup, the same basic method can be used to create shortcodes for other third-party services.
Additional Examples
All these third-party embeds have been created by using the same steps as above. Of course, like in step 2b, additional parameters can be added at will.
Vimeo
A Vimeo video is embedded in pretty much the exact same way as a YouTube video, through an iframe with width and height variables. The only addition is the color variable to customize the player.
function vimeo_video($atts, $content=null) {
extract(shortcode_atts( array(
'id' => '',
'width' => '640',
'height' => '360',
'color' => '59a5d1'
), $atts));
return '<iframe src="http://player.vimeo.com/video/' . $id . '?color=' . $color . '" width="' . $width .'" height="' . $height . '" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe>';
}
add_shortcode('vimeo', 'vimeo_video');
Usage
[vimeo id="" width="" height="" color=""]
Twitter (Profile)
The Twitter profile widget is a piece of JavaScript, with a ton of different attributes, all substituted for shortcode attributes in the code below. Because there is so many, you may want to remove some and replace them with constant values (such as styling) in the actual JavaScript, or just change the default attributes in the array and forget about using them in the shortcode.
function twitter_widget($atts, $content=null) {
extract(shortcode_atts( array(
'username' => '',
'width' => '300',
'height' => '200',
'tweetnum' => '4',
'shellbgcolor' => 'cccccc',
'listbgcolor' => 'eeeeee',
'textcolor' => '333333',
'linkcolor' => '639ee3',
'hashtags' => 'true',
'scrollbar' => 'true',
'loop' => 'false',
'stream' => 'false',
'avatars' => 'false',
'timestamp' => 'false'
), $atts));
return '<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: "profile",
rpp: ' . $tweetnum . ',
interval: 30000,
width: ' . $width . ',
height: ' . $height . ',
theme: {
shell: {
background: "#' . $shellbgcolor .'",
color: "#' . $textcolor . '"
},
tweets: {
background: "#' . $listbgcolor .'",
color: "#' . $textcolor . '",
links: "#' . $linkcolor . '"
}
},
features: {
scrollbar: ' . $scrollbar . ',
loop: ' . $loop . ',
live: ' . $stream . ',
hashtags: ' . $hashtags . ',
timestamp: ' . $timestamp . ',
avatars: ' . $avatars . ',
behavior: "all"
}
}).render().setUser("' . $username .'").start();
</script>
';
}
add_shortcode('twitter', 'twitter_widget');
Usage
All of these shortcode attributes have defaults, except the username which is required. As to what to actually put in the attribute, they are all self-explanatory up to hashtags in which the rest are just true/false.
[twitter username="" tweetnum="" width="" height="" shellbgcolor="" listbgcolor="" textcolor="" linkcolor="" hashtags="" scrollbar="" loop="" stream="" avatars="" timestamp=""]
Tweet (Button)
The Tweet Button is a popular social sharing button for Twitter.
function tweet_button($atts, $content=null) {
extract(shortcode_atts( array(
'username' => '',
'url' => '',
'style' => 'none'
), $atts));
return '<a href="https://twitter.com/share" class="twitter-share-button" data-url="' . $url . '" data-count="' . $style .'" data-via="' . $username . '">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>';
}
add_shortcode('tweetbutton', 'tweet_button');
Usage
The tweet button's first two attributes are not really ambiguous. The last one sets the style for the tweet button, either horizontal, vertical or none.
[tweetbutton username="" url="" style=""]
Facebook Like and Send Buttons
Like the Tweet Button, the Like and Send buttons are the social sharing buttons for Facebook. Please note these buttons also need the JavaScript SDK referenced somewhere on the current page.
function facebook_buttons($atts, $content=null) {
extract(shortcode_atts( array(
'width' => '450',
'showfaces' => 'false',
'colorscheme' => 'light',
'font' => 'arial'
), $atts));
return '<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<fb:like send="true" width="' . $width .'" show_faces="' . $showfaces .'" colorscheme="' . $colorscheme . '" font="' . $font . '"></fb:like>';
}
add_shortcode('like', 'facebook_buttons');
Usage
The different attributes for use are explained on Facebook's associated page, but essentially, the width is written in the same format as before, showfaces is a true/false value of whether to show faces of the "like-ees", colorscheme is either dark or light and font is, well, a font.
Since the XFBML will automatically target the current page, it's not necessary to have any attributes in use, meaning the shortcode can be as simple as the below example.
[like]
Flickr Badge
The Flickr badge is a way of displaying your recent photos from Flickr. Unfortunately, the Flickr widget comes with it's own CSS (although you can easily move this into your stylesheet), and uses tables for layout. Once your finished being highly frustrated over this practice, here's the shortcode.
function flickr_widget($atts, $content=null) {
extract(shortcode_atts( array(
'userid' => '',
'num' => '3',
'sort' => 'random',
'size' =>
), $atts));
return '
<style type="text/css">
#flickr_badge_source_txt {padding:0; font: 11px Arial, Helvetica, Sans serif; color:#666666;}
#flickr_badge_icon {display:block !important; margin:0 !important; border: 1px solid rgb(0, 0, 0) !important;}
#flickr_icon_td {padding:0 5px 0 0 !important;}
.flickr_badge_image {text-align:center !important;}
.flickr_badge_image img {border: 1px solid black !important;}
#flickr_www {display:block; padding:0 10px 0 10px !important; font: 11px Arial, Helvetica, Sans serif !important; color:#3993ff !important;}
#flickr_badge_uber_wrapper a:hover,
#flickr_badge_uber_wrapper a:link,
#flickr_badge_uber_wrapper a:active,
#flickr_badge_uber_wrapper a:visited {text-decoration:none !important; background:inherit !important;color:#3993ff;}
#flickr_badge_wrapper {background-color:#ffffff;border: solid 1px #000000}
#flickr_badge_source {padding:0 !important; font: 11px Arial, Helvetica, Sans serif !important; color:#666666 !important;}
</style>
<table id="flickr_badge_uber_wrapper" cellpadding="0" cellspacing="10" border="0"><tr><td><a href="http://www.flickr.com" id="flickr_www">www.<strong style="color:#3993ff">flick<span style="color:#ff1c92">r</span></strong>.com</a><table cellpadding="0" cellspacing="10" border="0" id="flickr_badge_wrapper">
<tr>
<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=' . $num . '&display=' . $sort . '&size=m&layout=h&source=user&user=' . $userid . '"></script>
</tr>
</table>
</td></tr></table>
';
}
add_shortcode('flickr', 'flickr_widget');
Usage
Flickr's widget has four basic variables, the userid is the user's id (in the format of 12345678@N01), the num is the number of photos shown, the sort is either latest or random and relates to how the photos shown are determined and the size is either s (a small square), t (a thumbnail) or m (medium).
[flickr userid="" num="" sort="" size=""]
Wrap-up
Hopefully i've explained how to create a shortcode in the context of a third-party service. It is fairly simple, we just need to work out how the original code works and swap out static variables for attributes. This saves time, but, perhaps more importantly, means that the code can be modified at a later date whilst maintaining the parameters allowing you to change, say, the width at a later date across all uses of the particular shortcode.
Comments