30 Time Saving WordPress Shortcodes
WordPress shortcodes are code snippets used in pages or posts that allow you to easily customize the page content with less effort. Some shortcodes give you the opportunity to specify additional attributes so you’ll be able to create impresive things with them.
A shortcode is a special tag enclosed with square brackets that will be replaced with different content when actually viewing the post on your WordPress theme. First thing first when creating a shortcode is writing the primary function for it. Then by using the “add_shortcode” method you’ll be able to insert it into WordPress pages. For more information check the shortcode API.
If you are new to WordPress shortcodes this post will cover all you need to know about this great feature. Among the tips and tutorials gathered here you’ll find how to deal with the native gallery WordPress shortcode, create Google Maps shortcode or insert YouTube videos. Check them all and grab the ones you need for your website.
In this article, I’ve collected useful WordPress shortcodes that will help you customize your website pages in minutes. You’ll increase your productivity and focus more on design and user experience details.
In order to benefit from the any of the shortcodes you’ll need to copy the related function into your functions.php file.
1. WordPress Shortcode Tutorial: Simple to Advanced
Basic intro about shortcodes with easy to understand examples.
2. Add Google Maps Shortcode to WordPress
Add Google Maps into your WordPress website.
[php] function google_maps_shortcode($atts, $content = null) {
extract(shortcode_atts(array(
"width" => ’640′,
"height" => ’480′,
"src" => ”
), $atts));
return ‘<div class="google-map"><iframe width="’.$width.’" height="’.$height.’" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="’.$src.’&output=embed"></iframe></div>’;
}
add_shortcode("googlemap", "google_maps_shortcode");
[/php]
Usage:
[php][googlemap src="Your Map Full Url"][/php]
3. Facebook Like Button
Add a Facebook Like and Send button as a WordPress shortcode.
[php]function fb_like( $atts, $content=null ){
/* Author: Nicholas P. Iler
* URL: http://www.ilertech.com/2011/06/add-facebook-like-button-to-wordpress-3-0-with-a-simple-shortcode/
*/
extract(shortcode_atts(array(
‘send’ => ‘false’,
‘layout’ => ‘standard’,
‘show_faces’ => ‘true’,
‘width’ => ’400px’,
‘action’ => ‘like’,
‘font’ => ”,
‘colorscheme’ => ‘light’,
‘ref’ => ”,
‘locale’ => ‘en_US’,
‘appId’ => ” // Put your AppId here is you have one
), $atts));
$fb_like_code = <<<HTML
<div id="fb-root"></div><script src="http://connect.facebook.net/$locale/all.js#appId=$appId&xfbml=1"></script>
<fb:like ref="$ref" href="$content" layout="$layout" colorscheme="$colorscheme" action="$action" send="$send" width="$width" show_faces="$show_faces" font="$font"></fb:like>
HTML;
return $fb_like_code;
}
add_shortcode(‘fb’, ‘fb_like’);
[/php]
Usage:
[php][fb][/php]
[php][fb layout='button_count'][/php]
4. The WordPress Gallery Shortcode: A Comprehensive Overview
Great tutorial that covers all you need to know about WordPress gallery shortcode. Create amazing galleries with this useful shortcode.
5. Embed Youtube videos
Post Youtube videos on your blog with this easy shortcode.
[php]
function youtube($atts) {
extract(shortcode_atts(array(
"value" => ‘http://’,
"width" => ’475′,
"height" => ’350′,
"name"=> ‘movie’,
"allowFullScreen" => ‘true’,
"allowScriptAccess"=>’always’,
), $atts));
return ‘<object style="height: ‘.$height.’px; width: ‘.$width.’px"><param name="’.$name.’" value="’.$value.’"><param name="allowFullScreen" value="’.$allowFullScreen.’"></param><param name="allowScriptAccess" value="’.$allowScriptAccess.’"></param><embed src="’.$value.’" type="application/x-shockwave-flash" allowfullscreen="’.$allowFullScreen.’" allowScriptAccess="’.$allowScriptAccess.’" width="’.$width.’" height="’.$height.’"></embed></object>’;
}
add_shortcode("youtube", "youtube");
[/php]
Usage: [php][youtube value="https://www.youtube.com/watch?v=1MwjX4dG72s"][/php]
6. Embed HTML5 audio
If you love to post about music this shortcode will come in handy.
[php]
function html5_audio($atts, $content = null) {
extract(shortcode_atts(array(
"src" => ”,
"autoplay" => ”,
"preload"=> ‘true’,
"loop" => ”,
"controls"=> ”
), $atts));
return ‘<audio src="’.$src.’" autoplay="’.$autoplay.’" preload="’.$preload.’" loop="’.$loop.’" controls="’.$controls.’" autobuffer />’;
}
add_shortcode(‘audio5′, ‘html5_audio’);
[/php]
Usage: [php][audio5 src="http://your-site/videos/your-video.mp4" loop="true" autoplay="autoplay" preload="auto" loop="loop" controls=""][/php]
7. Display content to registered users only
You want to allow logged in users to access your content? This snippet will do the trick.
[php]
add_shortcode( ‘member’, ‘member_check_shortcode’ );
function member_check_shortcode( $atts, $content = null ) {
if ( is_user_logged_in() && !is_null( $content ) && !is_feed() )
return $content;
return ”;
}
[/php]
Usage: [php][member]This text will be only displayed to registered users.[/member][/php]
8. Embed Google Adsense Ads Anywhere
This simple shortcode will add an Adsense ad into your webpage page.
[php]
function showads() {
return ‘<script type="text/javascript"><!–
google_ad_client = "pub-3637220125174754";
google_ad_slot = "4668915978";
google_ad_width = 468;
google_ad_height = 60;
//–>
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
‘;
}
add_shortcode(‘adsense’, ‘showads’);
[/php]
Usage: [php][adsense][/php]
9. Tables with Multiple Rows and Columns
Have you have ever wanted to quickly and easily create a simple dataset table? Well adding this snippet to the functions.php of your wordpress theme to enable table shortcodes.
[php]function simple_table( $atts ) {
extract( shortcode_atts( array(
‘cols’ => ‘none’,
‘data’ => ‘none’,
), $atts ) );
$cols = explode(‘,’,$cols);
$data = explode(‘,’,$data);
$total = count($cols);
$output .= ‘<table><tr class="th">’;
foreach($cols as $col):
$output .= ‘<td>’.$col.’</td>’;
endforeach;
$output .= ‘</tr><tr>’;
$counter = 1;
foreach($data as $datum):
$output .= ‘<td>’.$datum.’</td>’;
if($counter%$total==0):
$output .= ‘</tr>’;
endif;
$counter++;
endforeach;
$output .= ‘</table>’;
return $output;
}
add_shortcode( ‘table’, ‘simple_table’ );
[/php]
Usage: [php][table cols="names,values" data="name1,25,name2,409"][/php]
10. Display Related Posts
If you want to keep your readers around your blog, related articles are a great solution.
[php]function related_posts_shortcode( $atts ) {
extract(shortcode_atts(array(
‘limit’ => ’5′,
), $atts));
global $wpdb, $post, $table_prefix;
if ($post->ID) {
$retval = ‘<ul>’;
// Get tags
$tags = wp_get_post_tags($post->ID);
$tagsarray = array();
foreach ($tags as $tag) {
$tagsarray[] = $tag->term_id;
}
$tagslist = implode(‘,’, $tagsarray);
// Do the query
$q = "SELECT p.*, count(tr.object_id) as count
FROM $wpdb->term_taxonomy AS tt, $wpdb->term_relationships AS tr, $wpdb->posts AS p WHERE tt.taxonomy =’post_tag’ AND tt.term_taxonomy_id = tr.term_taxonomy_id AND tr.object_id = p.ID AND tt.term_id IN ($tagslist) AND p.ID != $post->ID
AND p.post_status = ‘publish’
AND p.post_date_gmt < NOW()
GROUP BY tr.object_id
ORDER BY count DESC, p.post_date_gmt DESC
LIMIT $limit;";
$related = $wpdb->get_results($q);
if ( $related ) {
foreach($related as $r) {
$retval .= ‘<li><a title="’.wptexturize($r->post_title).’" href="’.get_permalink($r->ID).’">’.wptexturize($r->post_title).’</a></li>’;
}
} else {
$retval .= ‘
<li>No related posts found</li>’;
}
$retval .= ‘</ul>’;
return $retval;
}
return;
}
[/php]
Usage: [php][related_posts limit="10"][/php]
11. Create a Login Form
If you need a shortcode for a login form here’s how you do it. Copy the code in functions.php file.
[php]function devpress_login_form_shortcode() {
if ( is_user_logged_in() )
return ”;
return wp_login_form( array( ‘echo’ => false ) );
}
function devpress_add_shortcodes() {
add_shortcode( ‘devpress-login-form’, ‘devpress_login_form_shortcode’ );
}
add_action( ‘init’, ‘devpress_add_shortcodes’ );
[/php]
Usage: [php][devpress-login-form][/php]
12. Embed Google Chart
Pass this shortcode some data and it will convert it into a graph generated by google charts api.
[php]function chart_shortcode( $atts ) {
extract(shortcode_atts(array(
‘data’ => ”,
‘colors’ => ”,
‘size’ => ’400×200′,
‘bg’ => ‘ffffff’,
‘title’ => ”,
‘labels’ => ”,
‘advanced’ => ”,
‘type’ => ‘pie’
), $atts));
switch ($type) {
case ‘line’ :
$charttype = ‘lc’; break;
case ‘xyline’ :
$charttype = ‘lxy’; break;
case ‘sparkline’ :
$charttype = ‘ls’; break;
case ‘meter’ :
$charttype = ‘gom’; break;
case ‘scatter’ :
$charttype = ‘s’; break;
case ‘venn’ :
$charttype = ‘v’; break;
case ‘pie’ :
$charttype = ‘p3′; break;
case ‘pie2d’ :
$charttype = ‘p’; break;
default :
$charttype = $type;
break;
}
if ($title) $string .= ‘&chtt=’.$title.”;
if ($labels) $string .= ‘&chl=’.$labels.”;
if ($colors) $string .= ‘&chco=’.$colors.”;
$string .= ‘&chs=’.$size.”;
$string .= ‘&chd=t:’.$data.”;
$string .= ‘&chf=’.$bg.”;
return ‘<img title="’.$title.’" src="http://chart.apis.google.com/chart?cht=’.$charttype.”.$string.$advanced.’" alt="’.$title.’" />’;
}
add_shortcode(‘chart’, ‘chart_shortcode’);
[/php]
Usage:
[php][chart data="41.52,37.79,20.67,0.03" bg="F7F9FA" labels="Reffering+sites|Search+Engines|Direct+traffic|Other" colors="058DC7,50B432,ED561B,EDEF00" size="488x200" title="Traffic Sources" type="pie"][/php]
Popular WordPress Shortcode Plugins
Below will find shortcodes powered by a plugin, mainly because they offer more advanced configuration. You’ll have to download and install the plugin in order for the shortcode to work.
13. Add Tooltips to WordPress
Here is a short guide to implement a simple, stylish tooltip plugin into your WordPress blog. You’ll have to download and install the plugin first.
Usage:
[php][tooltip content="the content within the tooltip" url="define a link"]hover over this text for to display the toolip[/tooltip][/php]
14. Shortcodes Ultimate
With this plugin you can easily create buttons, boxes, different sliders and much, much more. Using Shortcodes Ultimate you can quickly and easily retrieve many premium themes features and display it on your site.
15. Easy Timer
Allows you to easily display a count down/up timer, the time or the current date on your website, and to schedule an automatic content modification.
16. Arconix Shortcode Collection
Provides a number of useful design elements to compliment any website.
17. Shortcodes Pro
Shortcodes Pro allows quick and easy creation of WordPress shortcodes and TinyMCE rich editor buttons from the comfort of the WordPress interface.
18. Display Posts Shortcode
The Display Posts Shortcode was written to allow users to easily display listings of posts without knowing PHP or editing template files.
19. Booking Calendar
Booking Calendar – its plugin for online reservation and availability checking service for your site.
20. J Shortcodes
J Shortcodes plugin offers collection of useful shortcodes to compliment and enrich any wordpress theme, blog and website.
Premium WordPress Shortcode Plugins
21. Styles with Shortcodes for WordPress
This plugin lets you customize content faster and easier than ever before by using Shortcodes. Choose from 100 built in Shortcodes like; jQuery Accordion, Tabs and Toogle, Tooltips, Column Shortcodes, Gallery and Image Shortcodes, Button Styles and many more.
22. All-In-One Shortcodes
WordPress All-In-One Shortcodes plugin allows you to add endless amount of easy-to-use shortcodes combinations of to ANY WordPress theme and customize the appearance of your content in seconds.
23. jNewsticker for WordPress
jNewsticker for WordPress is designed to be as painless as possible, regardless of your technical expertise. Just install the plugin, configure a news ticker and drop it into one of your theme’s widget ready areas or into any post with the shortcode.
24. SWS Sliding Tabs add-on for Styles with Shortcodes
Create cool looking jQuery powered Sliding Tabs with the simplicity of Shortcodes in WordPress. Create any number of tabs and make them slidable with the mouse scroll wheel or the directional buttons.
25. Pure CSS Responsive Pricing Tables for WordPress
This CSS Responsive Pricing Table plugin will help you to create unlimited CSS Responsive pricing tables with unlimited combination of colors and styles to suit your existing wordpress theme.
26. TitanEditor – The Shortcode Editor On Steroids
With TitanEditor your able to create as many page templates as you need and fill them with a visual short-code editor. Everything is taken care of, drag and drop functionality, delete page templates, ad page template, edit page templates.
27. CSS3 Accordions For WordPress
This is a pack of pure CSS3 Accordions For WordPress – horizontal and vertical. Tested and working in all browsers. IE 6 – 8 is supported by JS (jQuery Fallback).
28. DVin – Testimonials Manager WordPress Plugin
Plugin that will easily allow your visitors/customers to submit testimonials, and you can display them after approving those testimonials.
29. Locations Map WP Plugin
Add location based content to your site with this plugin, easily manage and update several locations and include them in maps and more. Stores, fields, anything with a latitude and longitude and be entered and updates. Includes 3 widget and shortcodes!
30. SWS: CSS Tooltip add-on for Styles With Shortcodes
We have created a Add-On plugin for Styles with Shortcodes, which makes it easier than ever to add beautiful looking CSS Tooltips and Speech Bubbles on your WordPress powered website.
Now you have all kinds of useful shortcodes to use in your WordPress posts. Do you know other useful WordPress shortcodes? Share your own ideas in the comments below.
Pingback: 30 Time Saving WordPress Shortcodes | Lively Flash Tuts
Pingback: 30 Time Saving WordPress Shortcodes | Snippets of Codes