WordPress shortcode API is a powerful function which was introduced from version 2.5, it’s just a simple set of functions for creating macro codes in post content. If you’ve developed a Vbulletin forum before, you would have been familiar with the shortcode (something called BBCode) but the WordPress users maybe not. In this article, I would like to show you how to create and use shortcodes, in addition, I will show you some creative examples of using shortcode in WordPress blog.
What Are Shortcodes?
The shortcodes I’m going to introduce are very simple and easy to use, they look like this:
[text][/text], [clip][/clip], [flv][/flv], [flash][/flash].....
The shortcodes may have attributes or without attributes, so we will go from the easy first.
WordPress Shortcodes without attributes
Example of the shortcodes without attributes:
[text][/text]
How to create? It’s most simple, let’s add the code below to your functions.php file (stored in your current theme directory):
function text() {
return 'Good morning'; } add_shortcode('gm', 'text');As you see in the code above, the first thing I do is create a function like any other WordPress functions, the function will return the text “Good morning” when called then I add the API call to register the shortcode handler:
add_shortcode('gm', 'text');The first parameter is a name of the shortcode and the second parameter is the name of the function will be called, in my situation is “text”.
How to use? When posting a new article, whenever you want to display the “Good morning” text, switch the editor to HTML mode and type the following shortcode:
[gm]
WordPress Shortcodes with attributes
WordPress Shortcodes with attributes are more complicated, for example:
[text attribute=""][/text]
The code you should add to your functions.php is:
function text($atts) {
extract(shortcode_atts(array(
'attribute' => 'Good morning' // The default value if you do not pass the attribute to the shortcode
), $atts));
return $attribute;
}
add_shortcode('gm', 'text');How to use? With attributed shortcode you should pass the value of the attributes to the shortcode when using, if not, the function will use the default value:
[gm attribute="Good night"]
… will output “Good night”, but:
[gm]
… will output “Good morning”
WordPress Shortcodes with attributes and content
After reading and trying two trivial examples above, it’s the time to go to the WP shortcodes which you will deal with a lot of time, let’s see this example:
function a($atts, $content = null) {
extract(shortcode_atts(array(
"class" => '',
"rel" => '',
"url" => ''
), $atts));
return '<a class="'.$class.'" rel="'.$rel.'" href="'.$url.'">'.$content.'</a>';
}
add_shortcode('link', 'a');Notes:
- $atts: an array of attributes.
- $content: the enclosed content.
So if the shortcode I place on the post editor is:
[link url="http://www.google.com" rel="nofollow" class="hyperlink"]Google[/link]
… the result will be:
<a class="hyperlink" rel="nofollow" href="http://www.google.com">Google</a>
Other ways of using this shortcode:
[link] or [link/] will return: <a></a>
[link]Google[/link] will return <a>Google</a>
Shortcodes were parsed after post formatting was applied so If you do want your shortcode output to be formatted, you should call wpautop() or wptexturize() directly when you return the output from your shortcode handler.WordPress.org
WordPress shortcode is not too hard to understand, and it help you to create a dynamic content for your web blog, you could make anything you want with it, the only limitation is just your imagine, next up I would like to show you how to take advantage of it.
Create Special List Styles
You could create a special list styles easily with shortcodes, first add the code below to your functions.php file:
function checklist($atts, $content = null) {
return '
<div class="checklist">'.$content.'</div>
';
}
add_shortcode('checklist', 'checklist')This shortcode will wrap the <div> around the specific content and we will markup this <div> element by adding to your css file:
.checklist ul {
margin-left:50px;
list-style:none!important
}
.checklist ul li{
padding:5px 5px 5px 30px;
background:#fff url(images/check.png) no-repeat center left
}Using:
[checklist]
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
</ul>
[/checklist]
Thanks to http://www.dezinerfolio.com for the free icon set.
Create Box Styles
The code:
function box($atts, $content = null) {
return '
<div class="box">;'.$content.'</div>
';
}
add_shortcode('box', 'box');[php]
The css:
[css].box {
background:#bfe4f9;
border:1px solid #68a2cf;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding:10px
}[/css]
Using:
[html][box]Mauris ut lectus erat. In condimentum, turpis ac ultricies laoreet, felis ante aliquet nulla, vitae volutpat nunc sapien eget quam. Proin auctor auctor mollis. Curabitur congue sem ante, luctus euismod lorem. In iaculis ultrices lorem, ut viverra ipsum fringilla.[/box][/html]
<h3>Create Dropcaps</h3>
<img src="http://www.tuttoaster.com/wp-content/uploads/2010/06/dropcap1.png" alt="dropcap" width="517" height="96" />
The code:
[php]function dropcap($atts, $content = null) {
return '
<div class="dropcap">'.$content.'</div>
;';
}
add_shortcode('dropcap', 'dropcap');
]The css:
.dropcap {
display:block;
float:left;
font-size:50px;
line-height:40px;
margin:0 8px 0 0;
}Using:
Mauris ut lectus erat. In ...
Create A Download Button
The code:
function download($atts, $content = null) {
extract(shortcode_atts(array(
"url" => ''
), $atts));
return '<a class="download" href="'.$url.'">'.$content.'</a>';
}
add_shortcode('download', 'download');The css:
.download {
display: inline-block;color:#fff;
font-weight:bold;
font-size:1.2em;
background : -webkit-gradient(linear, left top, left bottom, from(#88c841), to(#73b338));
background : -moz-linear-gradient(center top, #88c841, #73b338);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 5px 20px;
text-align: center;
-shadow: 0px 1px 0px #6c0909;
}
.download:hover {
background : -webkit-gradient(linear, left top, left bottom, from(#73b338), to(#88c841));
background : -moz-linear-gradient(center top, #73b338, #88c841);
}Using:
[download url="http://www.google.com"]Download Google Chrome[/download]
Jquery Slide Up / Slide Down Shortcode
The code:
function slide($atts, $content = null) {
extract(shortcode_atts(array(
"title" =>; ''
), $atts));
return '<a class="slide">'.$title.'</a>
'.$content.'
';
}
add_shortcode('slide', 'slide');The css:
.slide {cursor:pointer}
.slide-next {display:none}The Javascript: (You can add the javascript code to your footer.php file)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"><!--mce:0--></script>
<script type="text/javascript"><!--mce:1--></script>
Using:
[slide title="Lorem ipsum dolor sit amet"]Mauris ut lectus erat. In condimentum, turpis ac ...[/slide]
Post Content In Column
The code:
function half($atts, $content = null) {
return '
<div class="half">'.$content.'</div>
';
}
function half_last($atts, $content = null) {
return '
<div class="half-last">'.$content.'</div>
<br style="clear: both;" />';
}
add_shortcode('half', 'half');
add_shortcode('half_last', 'half_last');The css:
.half, .half-last {float:left;width:47%;margin:10px 0;margin-right:6%;}
.half-last {margin-right:0}Using:
[half]Mauris ut lectus erat. In condimentum, turpis ...[/half]
[half_last]Mauris ut lectus erat. In condimentum, turpis ...[/half_last]
Of course, you could modify the code to create 3,4 or 5 columns post layout as your needs 
.
Create A Multiple URL Shortener Shortcode
This is an exclusive WordPress Shortcode I created for Tuttoaster.com, all you need to do is give shortcode the URL then it will shorten via the most 4 popular sevices: : tinyURL, Google shortener, is.gd and Su.pr (Stumbleupon), paste the code below to your functions.php file:
function getContent($url) {
$content = '';
if (function_exists('curl_init')) {
$ch = curl_init($url);
curl_setopt($ch, CURLOPT_HEADER, false);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
$content = curl_exec($ch);
curl_close($ch);
}
elseif (ini_get('allow_url_fopen')) {
$content = file_get_contents($url);
}
return $content;
}
function short($atts) {
extract(shortcode_atts(array(
"url" => ''
), $atts));
$googledata = getContent("http://ggl-shortener.appspot.com/?url=$url");
$googlejson = json_decode($googledata);
$isgd = getContent("http://is.gd/api.php?longurl=$url");
$tinyurl = getContent("http://tinyurl.com/api-create.php?url=$url");
$google = $googlejson->short_url;
$supr = getContent("http://su.pr/api?url=$url");
$output = '
<ul>';
$output .= '
<li>Is.gs: <a href="'.$isgd.'">'.$isgd.'</a></li>
';
$output .= '
<li>Google: <a href="'.$google.'">'.$google.'</a></li>
';
$output .= '
<li>Tinyurl:<a href="'.$tinyurl.'">'.$tinyurl.'</a>;</li>
';
$output .= '
<li>Su.pr: <a href="'.$supr.'">;'.$supr.'</a></li>
';
$output.='</ul>
';
return $output;
}
add_shortcode('short', 'short');How to use? It’s very simple, huh?:
[short url="http://url-need-to-be-shortened.com"]
And the result would be:
In the shortcode code above, I think you should register for the services account and using the callback with APIKey then your post content does not need to re-shorten the URL every-time loaded.
The next following is 2 shortcodes which I like most and I want to introduce to you:
Get posts from WordPress Database with a Shortcode
The code:
function sc_liste($atts, $content = null) {
extract(shortcode_atts(array(
"nombre" => '5',
"cat" => ''
), $atts));
//requete sur la BDD pour recuperr la liste de billet
global $post;
$myposts = get_posts('numberposts='.$nombre.'&order=DESC&orderby=post_date&category='.$cat);
$retour='
<ul>';
foreach($myposts as $post) :
setup_postdata($post);
$retour.='
<li><a href="'.get_permalink().'">'.the_title("","",false).'</a></li>
';
endforeach;
$retour.='</ul>
';
//on renvoi la liste
return $retour;
}
add_shortcode("liste", "sc_liste");Using: (It will display 3 posts from the category ID = 1)
[liste nombre="3" cat="1"]
The code source.
Hide Content From The Public
The code:
function guest_check_shortcode( $atts, $content = null ) {
if ( ( !is_user_logged_in() && !is_null( $content ) ) || is_feed() )
return $content;
return '';
}
add_shortcode( 'guest', 'guest_check_shortcode' );
function member_check_shortcode( $atts, $content = null ) {
if ( is_user_logged_in() && !is_null( $content ) && !is_feed() )
return $content;
return '';
}
add_shortcode( 'member', 'member_check_shortcode' );
12:57 AM
panyinyo
