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.
'&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