mastering wordpress shortcodes - national council for ... · 3/31/13 mastering wordpress shortcodes...

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

http://www.smashingmagazine.com/

http://wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/

http://wp.smashingmagazine.com/author/jean-baptiste-jung/?rel=author

http://wp.smashingmagazine.com/tag/essentials/

http://wp.smashingmagazine.com/tag/shortcodes/

http://wp.smashingmagazine.com/tag/techniques/

http://wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/#comments

http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=5293__zoneid=22__OXLCA=1__cb=756245cdcf__oadest=http%3A%2F%2Fmediatemple.net%2Flanding%2Fgs-grid-service%2Findex-v2.php%2F%3Futm_source%3Dsmashmag%26utm_medium%3Dbanner%26utm_content%3D300x250cnttrgt_wp_wp2mofree%26utm_campaign%3Dwp



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

http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=5038__zoneid=68__OXLCA=1__cb=ba8705c514__oadest=https%3A%2F%2Fshop.smashingmagazine.com%2Fworkshops%2F

http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=5038__zoneid=68__OXLCA=1__cb=ba8705c514__oadest=https%3A%2F%2Fshop.smashingmagazine.com%2Fworkshops%2F



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:



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.

http://www.wprecipes.com/



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:

http://wp.smashingmagazine.com/2009/01/07/10-killer-wordpress-hacks/



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

http://www.wprecipes.com/how-to-create-a-send-this-to-twitter-button

http://alexking.org/blog/2007/05/07/twitter-tools-10



“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

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"></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



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

http://wp.smashingmagazine.com/2008/12/02/10-useful-rss-hacks-for-wordpress/

http://www.wprecipes.com/how-to-embed-adsense-anywhere-on-your-posts



//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(



"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é

http://www.wprecipes.com/how-to-find-wordpress-category-id

http://www.webinventif.fr/wordpress-creation-de-shortcode-avance/



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(),



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

http://www.wprecipes.com/wordpress-shortcode-easily-display-the-last-image-attached-to-post



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

http://www.wprecipes.com/how-to-add-shortcodes-in-sidebar-widgets

http://englishmike.net/2008/07/07/wordpress-quick-tips-3adding-a-shortcode-to-a-sidebar-widget/

http://codex.wordpress.org/Shortcode_API

http://xavisys.com/2008/04/wordpress-25-shortcodes/

http://www.webinventif.fr/generateur-de-shortcode-et-de-boutons-pour-wordpress/

http://www.subzane.com/2009/01/07/wordpress-shortcode-create-beautiful-download-boxes/

http://wpengineer.com/easy-way-for-advertisement-in-wordpress/

http://nice2all.com/2008/12/17/wordpress-short-codes/

http://www.wprecipes.com/how-to-use-wordpress-shortcodes-with-attributes

http://wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/#top

https://twitter.com/intent/tweet?original_referer=http%3A%2F%2Fwp.smashingmagazine.com%2F2009%2F02%2F02%2Fmastering-wordpress-shortcodes%2F&source=tweetbutton&text=Mastering%20WordPress%20Shortcodes&url=http%3A%2F%2Fwp.smashingmagazine.com%2F2009%2F02%2F02%2Fmastering-wordpress-shortcodes%2F&via=smashingmag

http://wp.smashingmagazine.com/tag/essentials/

http://wp.smashingmagazine.com/tag/shortcodes/

http://wp.smashingmagazine.com/tag/techniques/



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

http://wp.smashingmagazine.com/author/jean-baptiste-jung/?rel=author

http://www.catswhocode.com/

http://www.wprecipes.com/

http://www.catswhoblog.com/

http://twitter.com/catswhocode

http://wp.smashingmagazine.com/2009/08/18/10-useful-wordpress-hook-hacks/

http://wp.smashingmagazine.com/2009/08/18/10-useful-wordpress-hook-hacks/

http://wp.smashingmagazine.com/2012/06/26/diy-caching-methods-wordpress/

http://wp.smashingmagazine.com/2012/06/26/diy-caching-methods-wordpress/

http://mobile.smashingmagazine.com/2012/05/24/creating-mobile-optimized-websites-using-wordpress/

http://mobile.smashingmagazine.com/2012/05/24/creating-mobile-optimized-websites-using-wordpress/

http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=4551__zoneid=26__OXLCA=1__cb=bec9120f66__oadest=http%3A%2F%2Fjobs.smashingmagazine.com%2F%3Futm_source%3Dsm%26utm_medium%3Dtextad%26utm_campaign%3Dinternal

http://wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/#show-comments

http://wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/#best-comments



Japh

February 2nd, 2009 8:30 pm

Reply

DKumar M.


Reply

Ejaz


Reply

Aravind


Reply

African Boy


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

http://wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/#comment-3520

http://wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/?replytocom=3520#respond










Reply

Don Campbell


Reply

silentgirl


Reply

Youri


Reply

new


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












sandeep


Reply

Yogie


Reply

Sarah


Reply

Dany


Reply

Marvin


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












Reply

Wp Addict

February 3rd, 2009 12:00 am

Reply

Simon Day


Reply

tom hermans


Reply

OnWebDev


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












tom hermans


Reply

Tam Mai

May 14th, 2012 11:21 pm

Reply

Alessandro


Reply

Manu


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










Reply

airwolf


Reply

b00m


Reply

JoSe


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











Reply

Laura


Reply

unicatcher


Reply

Jorge Bordás


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












Reply

Full Circle Studio


Reply

Cédric GIRARD


Reply

Ariyo


Reply

Jean-Baptiste Jung


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












Reply

Mario Awad


Reply

Jeff L

February 3rd, 2009 12:32 pm

Reply

Chris Robinson


Reply

Martin Greenwood


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













Reply

Leion


Reply

Yang Yang


Reply

kimee


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












Reply

Digiscott


Reply

Nicholi


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










http://wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/www.charlie-blog.com/media



Tinna


Reply

Burclar


Reply

insic


Reply

normalfx


Reply

E. Houston


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












Reply

lyon


Reply

Cassiano


Reply

Raj Kumar Maharjan


Reply

Gary


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











Reply

George Serradinho


Reply

Emiliano Jordan


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









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










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









http://pioupioum.fr/developpement/shortcode-wordpress-integrer-flux-rss.html



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












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










Al


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










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










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


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










Reply

sagive

September 18th, 2010 8:57 am

Reply

vee ray


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









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





http://i56.tinypic.com/2vctjlf.jpg



}

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;



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






Eric


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










Reply

Rohan @techlunatic

January 10th, 2011 11:28 pm

Reply

Chris @cquinndesign


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











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







http://www.kevinleary.net/display-rss-feeds-wordpress-shortcodes-simplepie-fetch_feed/



Reply

Donna Bushek


Reply

Splendid Angst


Reply

Arvind Bhardwaj


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








http://inertubetv.splendidangst.com/archives/79



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’);

?>




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





Reply

brian.s


Reply

Prashant

December 21st, 2011 3:51 am

Reply

vivek


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










Shawn


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










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







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





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






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

http://wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/#top

http://www.smashingmagazine.com/responsive-web-design-guidelines-tutorials/

http://www.smashingmagazine.com/professional-photoshop-techniques-tutorials/

http://www.smashingmagazine.com/typography-guidelines-and-references/

http://www.smashingmagazine.com/guidelines-for-mobile-web-development/

http://www.smashingmagazine.com/usability-and-user-experience/

http://www.smashingmagazine.com/web-design-essentials-examples-and-best-practices/

http://www.smashingmagazine.com/learning-javascript-essentials-guidelines-tutorials/

http://www.smashingmagazine.com/learning-wordpress-useful-wordpress-tips-tutorials/

http://www.smashingmagazine.com/coding-with-html5-tutorials-guidelines/

http://www.smashingmagazine.com/mastering-css-principles-comprehensive-reference-guide/

http://www.smashingmagazine.com/learning-css3-useful-reference-guide/

http://www.smashingmagazine.com/time-savers-tools-useful-services-web-design/

http://www.smashingmagazine.com/bored-the-curious-side-of-smashing-magazine/

http://www.smashingmagazine.com/

http://www.smashinglibrary.com/

http://www.smashingmagazine.com/books/

http://www.smashingmagazine.com/ebooks/

http://www.smashingmagazine.com/the-smashing-newsletter/

http://shop.smashingmagazine.com/

http://jobs.smashingmagazine.com/



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

http://www.smashing-media.com/

http://www.smashingmagazine.com/about/

http://www.smashingmagazine.com/2011/09/08/to-five-smashing-years-and-a-free-anniversary-ebook-treat/

http://www.smashingmagazine.com/smashing-book-1/

http://www.smashingmagazine.com/the-lost-files/

http://www.smashingmagazine.com/publishing-policy/

http://www.smashingmagazine.com/about/

http://www.smashingmagazine.com/contact/

mastering wordpress shortcodes - national council for ... · 3/31/13 mastering wordpress shortcodes...

Documents