mastering wordpress shortcodes - national council for ... · 3/31/13 mastering wordpress shortcodes...
TRANSCRIPT
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress
wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 1/53
e.g. JavaScript Go!
WordPress
Mastering WordPress Shortcodes
Introduced in WordPress 2.5, shortcodes are powerful but still
yet quite unknown WordPress functions. Imagine you could
just type “adsense” to display an AdSense ad or “post_count”
to instantly find out the number of posts on your blog.
By Jean-Baptiste Jung
February 2nd, 2009
Essentials, Shortcodes, Techniques
118 Comments
Advertisement
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress
wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 2/53
WordPress shortcodes can do this and more and will definitely make yourblogging life easier. In this article, we’ll show you how to create and useshortcodes, as well as provide killer ready-to-use WordPress shortcodesthat will enhance your blogging experience.
What Are Shortcodes?
Using shortcodes is very easy. To use one, create a new post (or edit anexisting one), switch the editor to HTML mode and type a shortcode inbrackets, such as:
[showcase]
It is also possible to use attributes with shortcodes. A shortcode withattributes would look something like this:
[showcase id="5"]
Shortcodes can also embed content, as shown here:
[url href="http://www.smashingmagazine.com"]Smashing Magazine[/url]
(Smashing’s Note: We are organizing a series of full-day workshopswith some of the most well-respected Web design experts in Freiburg,Germany. Seats are very limited, so grab your workshop ticket today!)
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress
wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 3/53
Shortcodes are handled by a set of functions introduced in WordPress 2.5called the Shortcode API. When a post is saved, its content is parsed, andthe shortcode API automatically transforms the shortcodes to perform thefunction they’re intended to perform.
Creating a Simple Shortcode
The thing to remember with shortcodes is that they’re very easy to create. Ifyou know how to write a basic PHP function, then you already know how tocreate a WordPress shortcode. For our first one, let’s create the well-known“Hello, World” message.
1. Open the functions.php file in your theme. If the file doesn’t exists,create it.
2. First, we have to create a function to return the “Hello World” string.Paste this in your functions.php file:
function hello() { return 'Hello, World!';}
3. Now that we have a function, we have to turn it into a shortcode.Thanks to the add_shortcode() function, this is very easy to do. Pastethis line after our hello() function, then save and close thefunctions.php file:
add_shortcode('hw', 'hello');
The first parameter is the shortcode name, and the second is thefunction to be called.
4. Now that the shortcode is created, we can use it in blog posts and onpages. To use it, simply switch the editor to HTML mode and type thefollowing:
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress
wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 4/53
Creating Advanced Shortcodes
As mentioned, shortcodes can be used with attributes, which are veryuseful, for example, for passing arguments to functions. In this example,we’ll show you how to create a shortcode to display a URL, just as youwould with the BBCodes that one uses on forums such as VBulletin andPHPBB.
[hw]
You’re done! Of course, this is a very basic shortcode, but it is a goodexample of how easy it is to create one.
1. Open your functions.php file. Paste the following function in it:
function myUrl($atts, $content = null) { extract(shortcode_atts(array( "href" => 'http://' ), $atts)); return '<a href="'.$href.'">'.$content.'</a>';}
2. Let’s turn the function into a shortcode:
add_shortcode("url", "myUrl");
3. The shortcode is now created. You can use it on your posts andpages:
[url href="http://www.wprecipes.com"]WordPress recipes[/url]
When you save a post, the shortcode will display a link titled“WordPress recipes” and pointing to http://www.wprecipes.com.
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress
wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 5/53
Code explanation. To work properly, our shortcode function must handletwo parameters: $atts and $content. $atts is the shortcode attribute(s). Inthis example, the attribute is called href and contains a link to a URL.$content is the content of the shortcode, embedded between the domainand sub-directory (i.e. between “www.example.com” and “/subdirectory”). Asyou can see from the code, we’ve given default values to $content and$atts.
Now that we know how to create and use shortcodes, let’s look at somekiller ready-to-use shortcodes!
1. Create a “Send to Twitter” Shortcode
The problem. Seems that a lot of you enjoyed the “Send to Twitter” hackfrom my latest article on Smashing Magazine. I also really enjoyed that hack,but it has a drawback: if you paste the code to your single.php file, the“Send to Twitter” link will be visible on every post, which you may not want.It would be better to control this hack and be able to specify when to add itto a post. The solution is simple: a shortcode!
The solution. This shortcode is simple to create. Basically, we just get thecode from the “Send to Twitter” hack and turn it into a PHP function. Pastethe following code in the functions.php file in your theme:
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress
wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 6/53
function twitt() { return '<div id="twitit"><a href="http://twitter.com/home?status=Currently reading '.get_permalink($post->ID).'" title="Click to send this page to Twitter!" target="_blank">Share on Twitter</a></div>';}
add_shortcode('twitter', 'twitt');
To use this shortcode, simply switch the editor to HTML mode and thentype:
[twitter]
and a “Send to Twitter” link will appear where you placed the shortcode.
SOUR CE AND R E LATE D PLUG-INS:
2. Create a “Subscribe to RSS” Shortcode
The problem. You already know that a very good way to gain RSSsubscribers is to display a nice-looking box that says something like
How to: Create a “send this to twitter” button
Twitter tools
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress
wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 7/53
“Subscribe to the RSS feed.” But once again, we don’t really want to hard-code something into our theme and lose control of the way it appears. Inthis hack, we’ll create a “Subscribe to RSS” shortcode. Display it in someplaces and not others, in posts or on pages, above or below the maincontent, it’s all up to you.
The solution. As usual, we create a function and then turn it into ashortcode. This code goes into your functions.php file. Don’t forget toreplace the example feed URL with your own!
function subscribeRss() { return '<div class="rss-box"><a href="http://feeds.feedburner.com/wprecipes">Enjoyed this post? Subscribe to my RSS feeds!</a></div>';}
add_shortcode('subscribe', 'subscribeRss');
Styling the box. You probably noticed the rss-box class that was added tothe div element containing the link. This allows you to style the box the wayyou like. Here’s an example of some CSS styles you can apply to your“Subscribe to RSS” box. Simply paste it into the style.css file in your theme:
.rss-box{ background:#F2F8F2; border:2px #D5E9D5 solid; font-weight:bold; padding:10px;}
3. Insert Google AdSense Anywhere
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress
wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 8/53
The problem. Most bloggers use Google AdSense. It is very easy to includeAdSense code in a theme file such as sidebar.php. But successful onlinemarketers know that people click more on ads that are embedded in thecontent itself.
The solution. To embed AdSense anywhere in your posts or pages, create ashortcode:
1. Open the functions.php file in your theme and paste the followingcode. Don’t forget to modify the JavaScript code with your ownAdSense code!
function showads() { return '<div id="adsense"><script type="text/javascript"><!-- google_ad_client = "pub-XXXXXXXXXXXXXX"; 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></div>';}
add_shortcode('adsense', 'showads');
2. Once you have saved functions.php, you can use the following
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress
wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 9/53
Code explanation. The above code is used simply to display AdSense ads.When the shortcode is inserted in a post, it returns an AdSense ad. It ispretty easy but also, you’ll agree, a real time-saver!
SOUR CE S:
4. Embed an RSS Reader
The problem. Many readers also seemed to enjoy the “8 RSS Hacks forWordPress” post published on Smashing Magazine recently. Now, let’s useour knowledge of both RSS and shortcodes to embed an RSS reader right inour posts and pages.
The solution. As usual, to apply this hack, simply paste the following code inyour theme’s function.php file.
shortcode to display AdSense anywhere on your posts and pages:
[adsense]
Note that our AdSense code is wrapped with an adsense div element,we can style it the way we want in our style.css file.
How to: Embed AdSense anywhere on your posts
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress
wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 10/53
//This file is needed to be able to use the wp_rss() function.include_once(ABSPATH.WPINC.'/rss.php');
function readRss($atts) { extract(shortcode_atts(array( "feed" => 'http://', "num" => '1', ), $atts));
return wp_rss($feed, $num);}
add_shortcode('rss', 'readRss');
To use the shortcode, type in:
[rss feed="http://feeds.feedburner.com/wprecipes" num="5"]
The feed attribute is the feed URL to embed, and num is the number ofitems to display.
5. Get posts from WordPress Database with a
Shortcode
The problem. Ever wished you could call a list of related posts directly in theWordPress editor? Sure, the “Related posts” plug-in can retrieve relatedposts for you, but with a shortcode you can easily get a list of any number ofposts from a particular category.
The solution. As usual, paste this code in your functions.php file.
function sc_liste($atts, $content = null) { extract(shortcode_atts(array(
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress
wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 11/53
"num" => '5', "cat" => '' ), $atts)); global $post; $myposts = get_posts('numberposts='.$num.'&order=DESC&orderby=post_date&category='.$cat); $retour='<ul>'; foreach($myposts as $post) : setup_postdata($post); $retour.='<li><a href="'.get_permalink().'">'.the_title("","",false).'</a></li>'; endforeach; $retour.='</ul> '; return $retour;}add_shortcode("list", "sc_liste");
To use it, simply paste the following in the WordPress editor, after switchingto HTML mode:
[liste num="3" cat="1"]
This will display a list of three posts from the category with an ID of 1. If youdon’t know how to get the ID of a specific category, an easy way isexplained here.
Code explanation. After it has extracted the arguments and created theglobal variable $posts, the sc_liste() function uses the get_posts()function with the numberposts, order, orderby and category parameters toget the X most recent posts from category Y. Once done, posts areembedded in an unordered HTML list and returned to you.
SOUR CE :
1. WordPress: Création de shortcode avancé
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress
wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 12/53
6. Get the Last Image Attached to a Post
The problem. In WordPress, images are quite easy to manipulate. But whynot make it even easier? Let’s look at a more complex shortcode, one thatautomatically gets the latest image attached to a post.
The solution. Open the functions.php file and paste the following code:
function sc_postimage($atts, $content = null) { extract(shortcode_atts(array( "size" => 'thumbnail', "float" => 'none' ), $atts)); $images =& get_children( 'post_type=attachment&post_mime_type=image&post_parent=' . get_the_id() ); foreach( $images as $imageID => $imagePost ) $fullimage = wp_get_attachment_image($imageID, $size, false); $imagedata = wp_get_attachment_image_src($imageID, $size, false); $width = ($imagedata[1]+2); $height = ($imagedata[2]+2); return '<div class="postimage" style="width: '.$width.'px; height: '.$height.'px; float: '.$float.';">'.$fullimage.'</div>';}add_shortcode("postimage", "sc_postimage");
To use the shortcode, simply type the following in the editor, when in HTMLmode:
[postimage size="" float="left"]
Code explanation. The sc_postimage() function first extracts the shortcodeattributes. Then, it retrieves the image by using the get_children(),
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress
wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 13/53
wp_get_attachment_image() and wp_get_attachment_image_src() WordPressfunctions. Once done, the image is returned and inserted in the postcontent.
SOUR CE S:
7. Adding Shortcodes to Sidebar Widgets
The problem. Even if you enjoyed this article, you may have felt a bitfrustrated because, by default, WordPress doesn’t allow shortcode to beinserted into sidebar widgets. Thankfully, here’s a little trick to enhanceWordPress functionality and allow shortcodes to be used in sidebar widgets.
The solution. One more piece of code to paste in your functions.php file:
add_filter('widget_text', 'do_shortcode');
That’s all you need to allow shortcodes in sidebar widgets!
Code explanation. What we did here is quite simple: we added a filter onthe widget_text() function to execute the do_shortcode() function, whichuses the API to execute the shortcode. Thus, shortcodes are now enabled insidebar widgets.
1. WordPress Shortcode: easily display the last image attached to post
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress
wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 14/53
SOUR CE S:
WordPress Shortcodes Resources
(al)
How to: Add Shortcodes to Sidebar Widgets
Adding a Shortcode to a Sidebar Widget
Shortcode APIThe WordPress Codex page related to the shortcode API.
WordPress 2.5 shortcodesExcellent shortcodes tutorial.
WordPress shortcode generatorThe page is in French but provides a very useful and easy-to-use appto create shortcodes online.
Using WordPress shortcode to create beautiful download boxesAnother great use of shortcodes: creating fancy “Download” boxesfor your blog.
Easy way to advertise in WordPress using shortcodesGreat resource to manage and insert advertising on your blog,brought to you by WpEngineer.
Create a signature using WordPress shortcodesReally simple but really cool: a shortcode to display a graphicsignature on your blog.
How to: Use WordPress shortcodes with attributesConcise tutorial on using shortcode attributes.
↑ Back to topShare on Twitter
Tags: Essentials Shortcodes Techniques
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress
wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 15/53
Jean-Baptiste Jung
This guest post was written by Jean-Baptiste Jung, a 28-year-old blogger from Belgium, who blogs about Web Developmenton Cats Who Code, about WordPress at WpRecipes and aboutblogging on Cats Who Blog . You can stay in touch with Jeanby following him on Twitter.
Related Articles
10 Useful WordPressHook Hacks
Do-It-Yourself CachingMethods WithWordPress
Creating Mobile-Optimized WebsitesUsing WordPress
Post your job listing in our Job Board!
If you're looking for a job or have a job opening to announce,post it in our job board and get noticed by professionals andwell-respected companies. Submit a job listing, and good luck!
118 Comments Best Comments
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress
wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 16/53
Japh
February 2nd, 2009 8:30 pm
Reply
DKumar M.
February 2nd, 2009 8:31 pm
Reply
Ejaz
February 2nd, 2009 8:32 pm
Reply
Aravind
February 2nd, 2009 9:37 pm
Reply
African Boy
February 2nd, 2009 9:47 pm
1
2
3
4
Great post, thanks! I’m really only just starting to realise the power ofWordPress :)
Some Of them I knew Already Some of them are not… Thanks for the infoJean!!
DKumar M.
A very useful tips. Thanks Jean!
another smashing post!. :)
Now I am going to retheme my blog..
0
0
0
0
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress
wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 17/53
Reply
Don Campbell
February 2nd, 2009 9:59 pm
Reply
silentgirl
February 2nd, 2009 10:33 pm
Reply
Youri
February 2nd, 2009 10:35 pm
Reply
new
February 2nd, 2009 11:03 pm
Reply
5
6
7
8
9
This is an example of articles we need, not just lists and lists. Not that thelists are bad, but information is better.
Then again, we all have different requirements.
Wow this is a great tip that I didn’t know about – thanks!! (Dugg.)
a very good article! i’ll definitely gonna make shortcodes !
Agree with African Boy, less lists please and more articles like this. Iactually learned stuff I didn’t know!
Thank you!!!
0
+1
0
+1
+2
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress
wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 18/53
sandeep
February 2nd, 2009 11:06 pm
Reply
Yogie
February 2nd, 2009 11:35 pm
Reply
Sarah
February 2nd, 2009 11:50 pm
Reply
Dany
February 2nd, 2009 11:57 pm
Reply
Marvin
February 2nd, 2009 11:58 pm
10
11
12
13
14
wow… nice post… thanks…
Great !!!
This is great! More like this, please
(Running off to create a new wp theme…)
Very useful and interesting article. Thanks a lot!
this is so great! thanks for the detailed description!!
+1
+1
0
0
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress
wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 19/53
Reply
Wp Addict
February 3rd, 2009 12:00 am
Reply
Simon Day
February 3rd, 2009 12:59 am
Reply
tom hermans
February 3rd, 2009 2:10 am
Reply
OnWebDev
February 3rd, 2009 2:58 am
Reply
15
16
17
18
Great tutorial. The one on inserting the adsense will definitely be of greatuse to me.
Excellent article. Clear, consice and easy to follow…exactly what the Drordered :-) Well done!
I’ve already discovered the power of the functions.php-file and theseshortcodes are another tool in my kit, thanks very much !
Wow, that’s great! Didn’t knew that feature existed. I really like the EmbedAdsense Code in posts shortcode. It sure saves a lot of time… Thanks forsharing!
0
0
0
0
0
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress
wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 20/53
tom hermans
February 3rd, 2009 2:58 am
Reply
Tam Mai
May 14th, 2012 11:21 pm
Reply
Alessandro
February 3rd, 2009 3:00 am
Reply
Manu
February 3rd, 2009 3:12 am
19
20
21
I think I found a minor error.
In the 5th tip, where a post is retrieved directly from the database, theshortcode reads
[liste num="3" cat="1"],
but the code in functions.php that catches the shortcut isadd_shortcode(“list”, “sc_liste”);
so I guess the code you have to insert should read:
[list num="3" cat="1"]
It’s just one character, but an important one, right ?
I think author want readers to understand what they type orcopy/paste ;-)
Great article! Thanks
0
0
0
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress
wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 21/53
Reply
airwolf
February 3rd, 2009 3:22 am
Reply
b00m
February 3rd, 2009 3:37 am
Reply
JoSe
February 3rd, 2009 4:18 am
Reply
mathiz
22
23
24
25
Very interesting hack!
I’ll use them to make my codex smaller end easier!
Manu
manublog.org
Awesome !
WordPress is very suitable for light-scale web development for thosepeople that not much in pure coding techniques like me >_<
Yahooo! very helpful…Tnx for sharing SM!
Excellent article, found it through feedly´s twitter.
0
0
0
0
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress
wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 22/53
February 3rd, 2009 5:21 am
Reply
Laura
February 3rd, 2009 5:33 am
Reply
unicatcher
February 3rd, 2009 6:35 am
Reply
Jorge Bordás
February 3rd, 2009 6:42 am
Reply
Dainis Graveris
26
27
28
29
what is de URL of the picture by ” 2. Create a “Subscribe to RSS”Shortcode”
Awesome post. Please give us more of these helpful tutorials that show usmore of what WordPress can do (and more of Jean-Baptiste’s genius!)
I agree with African Boy and Youri – list posts have nothing on posts asuseful and informational this one :)
Same question as mathiz’s;
What’s the url of the blog used for the screenshot at “Create a “Subscribeto RSS” Shortcode”? Looks like I design worth checking out.
Great list and great and useful information. A lot of thanks :)
0
0
0
0
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress
wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 23/53
February 3rd, 2009 6:53 am
Reply
Full Circle Studio
February 3rd, 2009 8:26 am
Reply
Cédric GIRARD
February 3rd, 2009 8:49 am
Reply
Ariyo
February 3rd, 2009 9:53 am
Reply
Jean-Baptiste Jung
February 3rd, 2009 10:05 am
30
31
32
33
34
wow, this post is extremely useful for everybody who uses WordPress,thanks!! :)
Wow, we’ve been using WordPress for years and never knew the processfor doing this. Thanks for the great tip!
Awesome article !!!
Really thanks :-)
bookmarked!AWESOMENESS!
I’m glad to see all theses nice comments, great to see you enjoyed thearticle! Thanks for your support!
0
0
0
0
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress
wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 24/53
Reply
Mario Awad
February 3rd, 2009 11:39 am
Reply
Jeff L
February 3rd, 2009 12:32 pm
Reply
Chris Robinson
February 3rd, 2009 12:56 pm
Reply
Martin Greenwood
February 3rd, 2009 3:10 pm
Reply
runner
35
36
37
38
I was lately thinking about how to easily add images with lighboxes toposts… you just hit the jackpot… thanks for the amazing article :)
Good stuff here – I just converted my site to use WordPress, and thisfunctionality seems to offer a great amount of flexibility. I wasn’t awarethat this existed at all, thanks!
great article, definitely going to come in handy
Awesome. i love the twitter shortcode. highly useful…
0
0
0
0
0
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress
wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 25/53
February 3rd, 2009 3:55 pm
Reply
Leion
February 3rd, 2009 9:20 pm
Reply
Yang Yang
February 3rd, 2009 10:37 pm
Reply
kimee
February 3rd, 2009 11:43 pm
Reply
Charliend
February 4th, 2009 5:06 am
39
40
41
42
43
good~!article
Great! Can I use short codes in a comment?
This would come much more handy with large chunks of random snippetinsertions.
AWESOMENESS!
That’s I’ve been studying and trying to summarize.
Thanks for the tips. and hoping more informaiton for other shortcodes.
Simply marvellous it’s going to help me so much with my new blog:
0
0
+1
0
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress
wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 26/53
Reply
Digiscott
February 4th, 2009 7:44 am
Reply
Nicholi
February 4th, 2009 8:51 am
Reply
Sid W
February 4th, 2009 1:05 pm
Reply
王韬February 4th, 2009 11:02 pm
Reply
44
45
46
47
charlie-blog.com/media
Thanks, this post helped save me several hours of custom code on aWordPress customization project.
This is a great article. I didn’t know that WordPress had such a thing builtin. This is definitely useful. Thanks for the tips!
This just made my day.
假如有中文就更完美了
0
0
0
0
0
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress
wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 27/53
Tinna
February 5th, 2009 2:27 am
Reply
Burclar
February 5th, 2009 1:16 pm
Reply
insic
February 6th, 2009 12:10 am
Reply
normalfx
February 7th, 2009 7:24 pm
Reply
E. Houston
February 8th, 2009 9:49 am
48
49
50
51
52
Oh My ~楼上那个王韬~我好像认识你~
very helpful article for webmaster who are using wordpress . Very Verythank you.
really awesome article. thanks for sharing
so powerful tips.
Great post. I like a lot of functionality but tons of plugins slow downloading. This one tip replaces several plugins and gives me a greatdirection to go in.
0
+1
0
0
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress
wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 28/53
Reply
lyon
February 8th, 2009 4:53 pm
Reply
Cassiano
February 10th, 2009 6:34 pm
Reply
Raj Kumar Maharjan
February 11th, 2009 9:26 pm
Reply
Gary
February 11th, 2009 10:39 pm
53
54
55
56
Impressive tutorial, or should i say tutorials to learn how to use wordpressin an advanced way, for that i thank, a lot.
hi all
on “step” 6. why it takes the last image?! how can I do to take the firstimage?!?!
BR,
Cassiano
Thanks, this makes easy to maintain word press
Hi,
0
0
0
0
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress
wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 29/53
Reply
George Serradinho
February 12th, 2009 5:00 am
Reply
Emiliano Jordan
February 19th, 2009 7:47 am
Reply
chris
March 31st, 2009 3:20 pm
57
58
It is really neat tutorial, i have to admit :)
One question though. In the 3rd heading you’ve put the following in thecode box:
<script type=”text/javascript”
src=”http://media.smashingmagazine.com/images/mastering-wordpress-shortcodes/http://pagead2.googlesyndication.com/pagead/show_ads.js”>
</script>
Is this an AdSense hack I’m not aware of or you just deliberately wanted tomess up the AdSense code which is against the AdSense ToS?
Wow, this is awesome.
I guess there is always new stuff to learn, thanks for sharing.
Great article, thanks. Also does anyone know what plugin is being used todisplay the code here? I’d really like to get that rolling.
-1
0
0
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress
wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 30/53
Reply
jmezes
May 1st, 2009 2:20 pm
Reply
Luis Eduardo
May 6th, 2009 10:04 am
Reply
The Frosty @WPCult
May 20th, 2009 9:24 am
Reply
59
60
61
62
Thanks for a great article. I wrote a plugin called ‘MapPress’ that lets youinsert Google Maps (as shortcodes), directly from the WordPress editor.
I stumbled on your article when my 71-year-old Mom asked me ‘what is ashortcode?’…
Great article but I was a bit frutrated with “Embed an RSS reader”. It reallydont works for me (WordPress 2.7.0).
For each try I made, it’s every time the same result in my page: “an errorhas occured the feed is probably down, try again later”.
An idea ?
Great post, I’m really impressed about such things you can do with a bit ofcode
How about: add_filter( 'comment_text', 'do_shortcode' );
adding shortcodes to comments!
0
0
0
+1
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress
wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 31/53
bitlimakina
June 22nd, 2009 1:21 pm
Reply
liberta cara
July 12th, 2009 10:54 pm
Reply
piouPiouM
July 17th, 2009 1:33 am
Reply
Keith Collantine
August 31st, 2009 9:45 am
Reply
segovia
63
64
65
66
thanks for great tutorial
You’re a great site! Thanks
The “Embed an RSS reader” shortcode is buggy ( performs not a ). Fix it [fr] with the second block code.
wp_rss() echo
return Fix it
There’s a problem with the “Get posts from WordPress Database with aShortcode” example.
It causes all comments added to the final post in the list to appear in thearticle you added the list to.
Is there a way to fix this problem?
0
0
0
0
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress
wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 32/53
September 24th, 2011 9:37 pm
Reply
Aakash Chakravarthy
September 2nd, 2009 5:07 am
Reply
Rafans Manado
October 12th, 2009 4:40 pm
Reply
Roozbeh
October 27th, 2009 9:48 pm
Reply
Robert@PNG
November 16th, 2009 4:08 am
67
68
69
70
71
I too noticed this, it’s definitely a bug because it seems to display thecomment box and any related comments for the last post shown. Thishappens on all post types (posts, pages and CTP’s). I would also knowhow to fix this.
Excellent Article !!!!!!
Tabea…. Salam kenal dari Manado – Indonesia. Good n thanks,-
Thanks , this is awesome , made my life 10 years longer ;)
Thanks for the valuable article on shortcodes. Your introduction andapplication of this very powerful WordPress tool has come in handy onseveral occasions throughout my “apprenticeship” with WordPress.
0
0
0
0
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress
wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 33/53
Reply
TATEZO-
December 1st, 2009 4:26 am
Reply
Haitham Al Humsi
December 19th, 2009 6:21 am
Reply
Judd Dunagan
January 18th, 2010 4:25 am
Reply
72
73
74
R
Great Article,thank you
Awesome writeup, but i have a question…
all the shortcodes i define myself end up giving me triplicate results on mypages
for example if i create an adsense short code and embed it in my blog i get3 adsense blocks… but if i use a short code defined in one of the pluginsi’m using it works great (only 1 instance of the results)…
Would you happen to have any insight on this issue ?
Thank you for the great writeup!
You guys rule!
0
0
0
0
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress
wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 34/53
Al
February 23rd, 2010 9:49 am
Reply
cameraadvice
March 3rd, 2010 7:29 am
Reply
CSSReX
March 23rd, 2010 9:24 am
Reply
Bob
April 5th, 2010 12:52 pm
75
76
77
78
Good article!
Has any had a problem with Shortcode duplicating on pages? I’ve recentlyused a few shortcodes for different wordpress plugins but when I look atthe page i create the code repeats it’s self and I wind up having the 3 ofthe same thing on my page. How do I stop that from happening?
there is a mistake in your post pulling shortcode. it should read list and notliste.
i have used this code on my website
is it possible to pull more than just the title?
Thanks for this wonderful tutorial! I am going to implement it in my client’swebsite right now.
Interesting to note that in WP 2.9.2 shortcodes only seems to work whenusing the template tag the_content(). Using the function get_the_content()
0
0
0
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress
wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 35/53
Reply
Moochyschwag
April 25th, 2010 9:45 am
Reply
Carl - Web Courses Bangkok
May 22nd, 2010 12:02 am
Reply
Xcellence IT
June 17th, 2010 9:49 pm
Reply
79
80
81
does not perform the replacement and the shortcode is visible on thepage.
Create a signature using WordPress shortcodes is a broken link.
A wonderful article! I am just getting into the programming side ofWordPress and this will be really useful to pass onto our trainees.
Thanks,
C
very useful tutorial.
I want to create a short code that will create div with some specific classapplied to it.. how can I do that?
like this one..
[div_halfcol] will create a and something that will close this div…
0
0
0
0
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress
wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 36/53
Deepesh Divakaran
June 18th, 2010 11:46 am
Reply
Char-Lou Benedict
August 12th, 2010 12:33 pm
Reply
Andreas Ostheimer
September 7th, 2010 7:58 am
Reply
Osu
September 12th, 2010 11:23 pm
82
83
84
85
Wonderful post…! it helped me create a shortcode for my site where I allowdownloads only if registered/logged in
Enjoyed the post – but when I tried the rss shortcode on my arras themewith a yahoo.pipe, nothing shows up.
The pipe does show with the rss sidebar widget. Any suggestions or notedconflicts?
Great stuff – please correct the typo in [liste num="3" cat="1"] – it should be“list” not “liste”. Took me like 25-30ms to check this ;-)
Thanks, Andreas
Nice article – will definitely use these shortcodes. This is off-topic, but isthere a way to allow wp registered users to upload their own avatarwithout using the Gravatar website? Is this website doing that? Thanks
0
0
0
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress
wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 37/53
Reply
sagive
September 18th, 2010 8:57 am
Reply
vee ray
September 30th, 2010 8:22 pm
Reply
Mati
October 12th, 2010 8:56 am
86
87
88
GR8 post men… very usefull..
was looking for that list post for a personal automated sitemap
10x a lot :)
Hi this is a great post. one thing I noticed is that in item# 5 the shortcodehas a typo which renders the example invalid.
it says:
1 [liste num="3" cat="1"]
it should say:
1 [list num="3" cat="1"]
thanks though. it works great!
great post!
I wonder how these shortcodes affect performance?
0
0
0
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress
wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 38/53
Reply
Brett Widmann
October 23rd, 2010 2:24 pm
Reply
Niraj
November 1st, 2010 8:42 pm
89
90
I guess that WP is scanning the post content for any inline shortcodesbefore echoing it, how bad is that for the website’s performance?
wow! so easy. thanks for the code sets.
Hey nice tutorial
but i have a problem
i have a wordpress plugin Taxonomy Terms List, this plugin is used todisplay all the custom taxonomies exactly next to post,
i want to change the position of it
i just want it to make above the post
just like this, check this image
http://i56.tinypic.com/2vctjlf.jpg
the plugin is also too short
if( !function_exists( ‘pr’ ) ) {
function pr( $var ) {
print ” . print_r( $var, true ) . ”;
}
0
0
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress
wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 39/53
}
if( !function_exists( ‘mfields_taxonomy_terms_list’ ) ) {
add_filter( ‘the_content’, ‘mfields_taxonomy_terms_list’ );
function mfields_taxonomy_terms_list( $c ) {
global $post;
$o = ”;
$terms = array();
$lists = array();
$custom_taxonomy_names = array();
$custom_taxonomies = mfields_get_custom_taxonomies();
if( !empty( $custom_taxonomies ) )
foreach( $custom_taxonomies as $name => $config )
$custom_taxonomy_names[] = $config->name;
if( !empty( $custom_taxonomy_names ) )
$terms = get_terms( $custom_taxonomy_names );
foreach( $custom_taxonomies as $name => $config )
$o.= get_the_term_list( $post->ID, $name, $before = ” . $config->label . ‘: ‘,$sep = ‘, ‘, $after = ” );
if( is_single() )
return $c . $o;
return $c;
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress
wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 40/53
Reply
Eric
November 6th, 2010 11:40 pm
Reply
91
}
}
if( !function_exists( ‘mfields_get_custom_taxonomies’ ) ) {
function mfields_get_custom_taxonomies( ) {
global $wp_taxonomies;
$custom_taxonomies = array();
$default_taxonomies = array( ‘post_tag’, ‘category’, ‘link_category’ );
foreach( $wp_taxonomies as $slug => $config )
if( !in_array( $slug, $default_taxonomies ) )
$custom_taxonomies[$slug] = $config;
return $custom_taxonomies;
}
}
?>
can you help me out in this????
Thanks!
0
0
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress
wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 41/53
Eric
November 6th, 2010 11:40 pm
Reply
Chris
November 24th, 2010 1:40 am
Reply
vinod
December 27th, 2010 11:24 pm
Reply
Paulo
January 3rd, 2011 9:30 am
92
93
94
95
Thanks!
These are all great but what if I want to display a shortcode in the visualeditor in a specific way instead of just having the shortcode text?
Hey,
These are all great ,
Thanks Dear!
Wonderful!
The best article I’ve ever seen on this content!
Congratulations.
Very good!
+1
+1
+1
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress
wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 42/53
Reply
Rohan @techlunatic
January 10th, 2011 11:28 pm
Reply
Chris @cquinndesign
February 15th, 2011 1:33 pm
Reply
oem store
March 2nd, 2011 1:56 pm
Reply
dhanapal
March 11th, 2011 4:48 am
96
97
98
99
hello i am using the elegant themes framework and i pasted the code inthe functions.php as you said but it has error messages. plz help!!
is it possible to take shortcodes that were created for another template,and then put them into a new template? For instance, say I find a templateI like the shortcodes on, can I take those shortcodes and insert them intoanother template for wordpress?
Thanks
I am totally delighte with strong you blog greatly that warned me Godbless yo
Hai friend,
Its very easy to understand and thanks for this post. keep updating ourknowledge through this types of posts.
+1
+1
+1
+1
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress
wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 43/53
Reply
Kevin Leary
March 11th, 2011 12:08 pm
Reply
ARS
April 2nd, 2011 2:26 pm
Reply
Ron Finnerty
May 5th, 2011 8:39 am
100
101
102
Thanks Thanks Thanks,
bye take care
I’ve created a . It allows you to pull in a little more
information including the date posted and a description/excerpt andprovides some basic CSS to get you started also. I hope it can helpsomeone out there!
modified version of the RSS feed shortcode that usesfetch_feed() instead of wp_rss()
Wow, this is great! You’re awsome Jean!!
Great article.
My question relates to whether plugins run previous to a plugin I wish touse uses a Shortcode already.
Would this cause a collission and different processing of the shortcodebetween the two?
How could I either detect the other shortcode definition or create somemechanism to avoid collissions completely.
+2
+1
+1
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress
wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 44/53
Reply
Donna Bushek
September 14th, 2011 7:10 pm
Reply
Splendid Angst
September 25th, 2011 4:21 pm
Reply
Arvind Bhardwaj
September 26th, 2011 11:00 pm
Reply
103
104
105
MANY people will create shortcodes that are named the same. [hw], [big],[name] ect seem to come to mind as examples.
thanks for the article.
This has just what I needed to get going thanks.
How hard would it be to create a short code that requires you to use a 2part short code. Example: I would like to avoid the copy/paste method thatI’m using to create a 2 column table set. If I could do [side1]…[/side1] [side2]…[.side2] and have them combine each other into 1 table that would beawesome, but it would only work if they are both used.
http://inertubetv.splendidangst.com/archives/79
That’s the table layouts I have manually created in HTML in the post.
Shortcodes are not working in my WordPress(3.2.1) installation. It just printsthe code itself. Anyone has any idea?
+1
+1
+1
+1
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress
wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 45/53
prit
December 23rd, 2011 4:43 am
106function sc_postimage($postID)
{
$args = array(
‘numberposts’ => 500,
‘order’=> ‘ASC’,
‘post_mime_type’ => ‘image’,
‘post_parent’ => $postID,
‘post_status’ => null,
“size” => ‘thumbnail’,
‘post_type’ => ‘attachment’,
“float” => ‘none’
);
$attachments = get_children( $args );
//print_r($attachments);
if ($attachments) {
$i=0;
?>
ID, ‘thumbnail’ ) ? wp_get_attachment_image_src( $attachment->ID,‘thumbnail’ ) : wp_get_attachment_image_src( $attachment->ID, ‘full’);
?>
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress
wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 46/53
Reply
Manuel S.
October 10th, 2011 10:37 am
<a href="”>
<?php if($i==0){echo "”;}
$i++; ?>
<?php echo 'ID ).’” class=”current” style=”width: ‘.$width.’px; height:‘.$height.’px; float: ‘.$float.’;”>’;
?>
<?php
if($i==3)
{
echo "”;
$i=0;
}
}
echo “”;
}
}
add_shortcode(“postimage”, “sc_postimage”);
html tag table tr td not working in form
+1
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress
wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 47/53
Reply
brian.s
November 10th, 2011 1:18 pm
Reply
Prashant
December 21st, 2011 3:51 am
Reply
vivek
February 6th, 2012 5:59 am
Reply
107
108
109
110
About example 5), there is an important fix:
You should add “wp_reset_query();” inbetween line 13 and 14 (before“return $retour;”).
Otherwise you mess with the values (date, categories etc) of the mainpost, they will be overriden by the posts from the shortcode. Dependingon your specific theme, this can have unwanted results, wrong values insidebars, footers, etc.
You probably want to go back to the main loop, and that’s exactly what“wp_reset_query();” does.
Rad. I dislike WordPress slightly less after reading this. We (WP + me) havea love/hate relationship.
thanks a lot.. I was breaking my head from last few hours.. and here I foundthe exact solution.
Amazing post. I love it. Thanks for sharing with us. I hope to see more
+1
+1
+1
+1
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress
wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 48/53
Shawn
February 17th, 2012 10:23 pm
Reply
Surendra
March 25th, 2012 11:23 am
Reply
Caps
July 15th, 2012 12:18 pm
Reply
SID SUZUKI
July 26th, 2012 2:06 pm
111
112
113
114
Thank you. What a nice explanation of Shortcodes and how they work. Ihad no idea they were so simple to create and implement. You haveinspired me to experiment. Thanks!
Great Man!!!
Now I’m going to create my own shortcode…..
Is there a shortcode for username that you can place on a page? Thiswould be for a Welcome page.
Caps
Get page from WordPress Database with a Shortcode
function pagedata($atts, $content = null) {
extract(shortcode_atts(array(
0
0
0
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress
wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 49/53
Reply
Steve
August 14th, 2012 5:46 am
Reply
max
August 28th, 2012 1:44 pm
115
116
“id” => ’1′
), $atts));
query_posts( ‘page_id=’.$id);
if ( have_posts() ) : while ( have_posts() ) : the_post();
$retour=”.get_the_title().”;
$retour.=’‘;
$retour.=’ ‘;
endwhile;
endif;
wp_reset_query();
return $retour;
}
add_shortcode(“page”, “pagedata”);
The adsense shortcode worked like a charm…Thanks Great Article BTW!
Hi there,
0
0
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress
wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 50/53
Reply
chazzer
January 1st, 2013 2:10 pm
117
Im wanting to create a photo blog theme, i want to use short codes forinserting images into posts rather than the user just adding images straightto the editor.
What I want to do also is wrap the image inside some custom html, this isjust some divs and spans.
so basically the output looks like:
Description goes here.
I’m guessing the shortcode would look something like:
[img src="path to image"]Image Description[/img]
Then the user can just keep adding this shortcode to the editor over andover:
[img src="path to image"]Me at the beach[/img]
[img src="path to image"]Friends at dinner[/img]
[img src="path to image"]Vacation in New Zealand[/img]
Is that possible with shortcodes?
I found this very difficult. I coded the “twitter” example and it worked well.However when I removed the “twitter” code from the functions file, the“twitter” example hung around like a bad smell. Where does the codereside when this happens. The reverse also occurred. I coded the “Helloworld” example but made some sort of mistake. However even when Icorrected the mistake it could not be made to work. I then codedremove_shortcode(‘hw’) and a corrected version of “Hello world”. It thenworked.
0
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress
wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 51/53
Reply
Kamal
January 13th, 2013 7:44 am
Reply
Leave a Comment
Yay! You've decided to leave a comment. That's fantastic! Please keep in mind thatcomments are moderated and rel="nofollow" is in use. So, please do not use aspammy keyword or a domain as your name, or it will be deleted. Let's have apersonal and meaningful conversation instead. Thanks for dropping by!
Your name *
Your email *
Your message *
Submit comment
118The adsense code is not working anymore!
0
0
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress
wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 52/53
Submit comment
↑ Back to top
BEST OF DESIGN
Responsive Design
Photoshop
Typography
Mobile Design
Usability and UX
Web Design Showcases
BEST OF CODING
JavaScript & jQuery
WordPress Techniques
HTML5 Tutorials
CSS, CSS3
Useful Time Savers
Bored?
SMASHING HUB
Smashing Magazine
The Smashing eBook Library
Smashing Books
Smashing eBooks
Smashing Email Newsletter
Smashing Shop
Smashing Job Board
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress
wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 53/53
With a commitment to quality content for the design community.
Smashing Media. Made in Germany. 2006-2013. About / Impressum.
OTHER RESOURCES
Free Anniversary eBook
Smashing Book 1 in HTML
Smashing Book 2 Extras
Publishing Policy
About us
Contact us