orthopedic pain management

Flashuser

  • Pin It

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.

View Source

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]

View Source

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&amp;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]

View Source

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.

View Source

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]

View Source

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]

View Source

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]

View Source

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]

View Source

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]

View Source

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]

View Source

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]

View Source

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="488×200" title="Traffic Sources" type="pie"][/php]

View Source

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]

View Source

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.

wordpress-shortcodes

View Source

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.

wordpress-shortcodes-2

View Source

16. Arconix Shortcode Collection

Provides a number of useful design elements to compliment any website.

wordpress-shortcodes-3

View Source

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.

wordpress-shortcodes-4

View Source

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.

View Source

19. Booking Calendar

Booking Calendar – its plugin for online reservation and availability checking service for your site.

wordpress-shortcodes-6

View Source

20. J Shortcodes

J Shortcodes plugin offers collection of useful shortcodes to compliment and enrich any wordpress theme, blog and website.

wordpress-shortcodes-7

View Source

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.

wordpress-plugin-shortcode-1

View Source

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.

wordpress-plugin-shortcode-2

View Source

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.

wordpress-plugin-shortcode-7

View Source

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.

wordpress-plugin-shortcode-3

View Source

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.

wordpress-plugin-shortcode-4

View Source

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.

wordpress-plugin-shortcode-5

View Source

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).

wordpress-plugin-shortcode-6

View Source

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.

wordpress-plugin-shortcode-8

View Source

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!

wordpress-plugin-shortcode-9

View Source

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.

wordpress-plugin-shortcode-10

View Source

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.

Author: Alin

Passionate about web and graphic design, photography and climbing. Follow me at Twitter , Facebook and Google+