Friday, September 2, 2016

Most Important Short-Codes in WordPress

Wordpress is the world most popular CMS and platforms and it's currently estimated to power 26% of all websites. It's known as highly customisable, easy to use and available free of cost. Due to it's enormous popularity, there is a wealth of wordpress devloper, institutes and online tutorials to help individual to grips with worpress CMS. But with so much features, things can often get confusing. Let's try to discuss some extraordinary features available in wordpress:

The most important feature in word press has called short codes. Wordpress offers super short way to add all kinds of content in a shorthand way. Short codes provides flexibility to us and it saves repeating blocks of code and running into issues and errors. This can be used in huge variety of content such as slider, query form, gallary, social icons, buttons, sharing buttons etc....

The most important things about shortcodes are that it's work on visual editor which enables us to use them without having knowledge of HTML or PHP. Various “built in” shortcodes standards are available in wordpress which provides features to do things in little efforts. You can find full list here.

Here, I want to discuss number of shortcode examples that will either offer something that you can use or inspire to create your own shortcodes to make your work easier....

A Sample Button:
Buttons are important example of something we can use a shortcode for a typical button appear as:

<a class="mybutton" href="http://www.admecindia.co.in">Wordpress Institute</a>

Using short code we can change it to his:

[button link="http://www.admecindia.co.in"]Wordpress Institute[/button]

Google Document:
Google document is one of the incredibly useful tool for access file in a multiple formats. This can be used for a number of file format as: .DOC, .DOCX .XLS .XLSX .PPT .PPTX .ODT .ODS .PDF .PAGES .AI .PSD .TIFF .DXF .SVG .EPS .PS .TTF .OTF .XPS .ZIP .RAR...

Functions.php

class="western" style="font-weight: normal;"> 
function docs_shortcode($attr, $content) 
{
return '<a  href="http://docs.google.com/viewer?url=' . $attr['link'] . '">'
.$content.'</a>';
}
add_shortcode('doc', 'docs_shortcode');

Google Map

Google Maps is another most useful google service. Wordpress allows us to add map on post or page:

Functions.php

function googlemap($atts, $content = null)
{
extract(shortcode_atts(array("width" => '',"height" => '',"src" => ''), $atts));
return '<iframe width="'.$width.'" height="'.$height.'" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="'.$src.
'&amp;output=embed"></iframe>';}add_shortcode("map", "googlemap");

Usage:
[map width="300" height="300" src="https://maps.google.co.in/maps?q=delhi&hl=en&sll=53.800651,
-4.064941&sspn=12.165846,33.815918&hnear=delhi,++India=m&z=11"]

Embed video

Videos are becoming one of the popular addition to many wordpress sites. So WordPress now auto embeds a number of video services.

Functions.php
function youtube($atts)
{
extract(shortcode_atts(array("value" => '',"width" => '640',"height" => '480',"name"=> 'movie',"allowFullScreen" =>
 'true',"allowScriptAccess"=>'always',), $atts));
return '<object style="height: '.$height.'px; width: '.$width.'px"><param name="'.$name.'" value=
"http://www.youtube.com/v/'.$value.'"><param name="allowFullScreen" value="'.$allowFullScreen.'"></param>
<param name="allowScriptAccess" value="'.$allowScriptAccess.'"></param><embed src="
http://www.youtube.com/v/'.$value.'" type="application/x-shockwave-flash" allowfullscreen="'.$allowFullScreen.
'" allowScriptAccess="'.$allowScriptAccess.'" width="'.$width.'" height="'.$height.'"></embed></object>';}
add_shortcode("youtube", "youtube");

Usage

[youtube value="QH2-TGUlwu4"]
When using the shortcode we just have to insert the video value, so we put part after the v= (www.youtube.com/watch?v=QH2-TGUlwu4).

Shortcode won’t work in my widgets

Shortcodes do not work automatically in widgets but we can use it by enable this using the following code in our functions.php file:
add_filter('widget_text','do_shortcode'); 
Summary: I have covered some basics of shortcodes and you can use the above examples to implement in your website and expand for your own needs. Good Luck!

No comments:

Post a Comment