WordPress Shortcodes can make managing and displaying your content a lot easier, faster and more manageable just by using a short "code" to do so. These code shortcuts that can be used within your posts and/or widgets can display almost any type of content, depending on how it's been created and so there are almost an unlimited amount of different shortcodes across the WordPress community today.
Very often, some basic content users want to display are often not conveniently developed into a shortcode, so here we attempt to list some of these snippets that can easily be integrated into your functions.php.
Installing and Displaying Shortcodes
You can install shortcodes simply by adding the functions and then giving it a shortcode tag, via add_shortcode($shortcode, $function), which we add after each function below.
These shortcodes work via the do_shortcode() function, which already works in the content section of the post. If you would like these to work in widgets (sidebar widgets for example) as well, if not already, simply add this filter to your functions.php file: add_filter('widget_text','do_shortcode');
To display them in template files, you do so by adding <?php echo do_shortcode('[shortcode]'); ?> within any template file for it to parse. Remember that the do_shortcode() function displays the content that is not a shortcode normally, and parses any shortcode it finds within the content accordingly. So if you'd like to display them in excerpts for example, you could wrap one around the returned value, in this case, <?php echo do_shortcode(get_the_excerpt()); ?>, would display the excerpt normally and parse any shortcodes it finds as well.
Embedding YouTube Videos
This is a particularly useful shortcode for displaying YouTube videos, both by iframe and if a lightbox is being used, also link via an image to the embed youtube link:
function mb_youtube($atts, $content = null) {
extract(shortcode_atts(array('embed' => '', 'iframe'=>'', 'width'=>'560', 'height'=>'315', 'alt'=>''), $atts));
// avoid empty alt attribute by checking if empty
$alt = (empty($alt))? '':'alt="'.$alt.'" ';
// return empty string if no video id set
if (empty($embed) && empty($iframe)) return '';
if (!empty($embed)) {
// Cache youtubes thumbnail image by default if using embed
$content = (empty($content))? '<img src="http://img.youtube.com/vi/'.$embed.'/0.jpg" width="'.$width.'" height="'.$height.'" '.$alt.'>':$content;
$output = '<a href="http://www.youtube.com/embed/'.$embed.'?rel=0&wmode=transparent" class="lightbox">'.do_shortcode($content). '</a>';
} else {
// If iframe id set, display iframe
$output = '<iframe width="'.$width.'" height="'.$height.'" src="http://www.youtube.com/embed/'.$iframe.'?feature=player_embedded&rel=0" frameborder="0" allowfullscreen></iframe>';
}
return $output;
}
add_shortcode('mb_video', 'mb_youtube');Parameters and How to Use:
To use this shortcode, you simply type the video ID either by iframe [mb_video iframe="id here"] or embed [mb_video embed="id here"]. Iframe is the way it would be displayed when taking the embed code from YouTube, whereas embed displays the thumbnail of the video and links to the embedded videos URL, typically for lightbox. You can also display your own image or text link instead of the default youtube video thumbnail. The other parameters are width, height and alt (for the image alt tag). Example:
[mb_video embed="bvB3msfJYdk"]click here[/embed]Subcategories of Category Archives
This next one is intended for the sidebar widgets on category archive pages, for displaying the subcategories of the current parent category:
function mb_categories($atts, $content = null ){extract(shortcode_atts(array('count'=>'10','show_count' =>0,'hide_empty'=>0), $atts));
$parents = array();
//Show Parent Categories on Home
if(is_home() || is_front_page()){
$categories = get_categories();
//Collect Categories without Parents by ID
if($categories) {
foreach($categories as $cat) {
if($cat->category_parent==0) $parents[] .= $cat->cat_ID;
}
}
$parents = (string) implode(',',$parents);
//Output only Parent Categories
$args = array('echo'=>0,'show_count'=> $show_count,'number' => $count,'include'=> $parents,'hide_empty'=>$hide_empty);
$output = '<ul>'.wp_list_categories($args).'</ul>';
} elseif(is_category()) { //If on a Category Archive Page, show its subcategories, if any
$cat = get_category(get_query_var('cat'), false);
$id = ($cat->category_parent==0)? $cat->cat_ID : $cat->category_parent;
if (get_term_children($id, 'category') != "") {
//List of subcategories with parent category in title.
$args =( array('show_option_none'=>'','title_li' => '','echo'=>0,'show_count'=> $show_count,'number' => $count,'hide_empty'=>$hide_empty,'child_of'=>$id));
$output = '<h3>'.get_the_category_by_ID($id).' Subcategories</h3><ul>'.wp_list_categories($args).'</ul>';
}
}
return $output;
}
add_shortcode('mb_categories', 'mb_categories');Parameters and Behaviour
The shortcode displays the subcategories of parent category pages and the adjacent subcategory children of a parent category when within a subcategory page. On the homepage or front page, it displays the parent categories. The parameters are hide_empty, which hides categories that don't have published posts, count, to show a maximum amount of categories and show_count, which gives you the choice of displaying how many posts are in a category. Example:
[mb_categories show_count=1 count=8]Google Maps Shortcode
Another popular feature, Google Maps, can also be integrated to easily embed maps without the steps one normally takes via the Google Maps app:
function mb_map( $atts, $content = null ) {
extract(shortcode_atts(mage_default_atts(array(
'width' => '425',
'height' => '350',
'z'=>'14',
'address' => ''
)), $atts));
// Separate address with + instead of whitespace
$loc = strtolower(str_replace(array(' '), '+', $address));
$output = '<iframe width="'.$width.'" height="'.$height.'" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q='.$loc.'&ie=UTF8&hq=&hnear='.$loc.'&t=m&z='.$z.'&iwloc=A&output=embed"></iframe>';
return $output;
}
add_shortcode('mb_map', 'mb_map');Generated with Address
To use this shortcode, simply type the address you wish to display in the address attibute:
[mb_map address="1414 Westwood Blvd., Los Angeles"]Latest Tweets
The syntax for the popular twitter feed has changed several times, but this one is currently working:
function mb_twitter($atts, $content = null ){
extract(shortcode_atts(array('count'=>'3','user'=>''), $atts));
//Cache user and then return last tweeted items (3 by default)
$via = '<div class="tweet-via"><a href="https://twitter.com/intent/user?screen_name='.$user.'" target="_blank" rel="nofollow">@'.$user.'</a></div>';
return '<div class="twitter-feed"><ul id="twitter_update_list"><li>Twitter feed loading</li></ul>'.$via.'</div><script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="https://api.twitter.com/1/statuses/user_timeline.json?screen_name='.$user.'&callback=twitterCallback2&count='.$count.'"></script>';
}
add_shortcode('mb_twitter', 'mb_twitter');Twitter Feed Shortcode Parameters
The parameters are count, which sets the amount of items in the twitter feed, user, which is required and is simply the twitter username without the @ symbol.
[mb_tweets count=5 user="OnlineMarket"]Feedburner Shortcode
This is a simple shortcode to quickly display the default Feedburner input form. You simply have to add your rss feedburner name via the user attribute.
function mb_feedburner( $atts, $content = null ){
extract(shortcode_atts(array('user'=>''), $atts));
//Default feedburner code with user attribute
$output = '<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open(\'http://feedburner.google.com/fb/a/mailverify?uri='.$user.'\', \'popupwindow\', \'scrollbars=yes,width=550,height=520\');return true"><p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="TheBusinessMarketingBlog" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Subscribe" /><p>Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a></p></form>';
return $output;
}
add_shortcode('mb_feedburner', 'mb_feedburner');How To Use:
[mb_feedburner count=5 user="MaximusBusiness"]All WordPress Shortcodes
Download all the above functions below and feel free to comment questions, fixes and other shortcodes you feel belongs on the list.
