3/31/13 Mastering WordPress Shortcodes | Smashing WordPress

e.g. JavaScript Go!

WordPress

Mastering WordPress Shortcodes

By Jean-Baptiste Jung

February 2nd, 2009

Essentials, Shortcodes, Techniques

118 Comments

Advertisement

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.

wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 1/53
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress

WordPress shortcodes can do this and more and will definitely make your
blogging life easier. In this article, we’ll show you how to create and use
shortcodes, as well as provide killer ready-to-use WordPress shortcodes
that will enhance your blogging experience.

(Smashing’s Note: We are organizing a series of full-day workshops

with some of the most well-respected Web design experts in Freiburg,
Germany. Seats are very limited, so grab your workshop ticket today!)

What Are Shortcodes?

Using shortcodes is very easy. To use one, create a new post (or edit an
existing one), switch the editor to HTML mode and type a shortcode in
brackets, such as:

[showcase]

It is also possible to use attributes with shortcodes. A shortcode with

attributes would look something like this:

[showcase id="5"]

Shortcodes can also embed content, as shown here:

[url href="http://www.smashingmagazine.com"]Smashing Mag

azine[/url]

wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 2/53
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress

Shortcodes are handled by a set of functions introduced in WordPress 2.5

called the Shortcode API. When a post is saved, its content is parsed, and
the shortcode API automatically transforms the shortcodes to perform the
function they’re intended to perform.

Creating a Simple Shortcode

The thing to remember with shortcodes is that they’re very easy to create. If
you know how to write a basic PHP function, then you already know how to
create 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. Paste
this line after our hello() function, then save and close the
functions.php file:

add_shortcode('hw', 'hello');

The first parameter is the shortcode name, and the second is the
function to be called.

4. Now that the shortcode is created, we can use it in blog posts and on
pages. To use it, simply switch the editor to HTML mode and type the
following:

wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 3/53
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress

[hw]

You’re done! Of course, this is a very basic shortcode, but it is a good

example of how easy it is to create one.

Creating Advanced Shortcodes

As mentioned, shortcodes can be used with attributes, which are very
useful, 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 you
would with the BBCodes that one uses on forums such as VBulletin and
PHPBB.

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 and
pages:

[url href="http://www.wprecipes.com"]WordPress rec

ipes[/url]

When you save a post, the shortcode will display a link titled
“WordPress recipes” and pointing to http://www.wprecipes.com.

wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 4/53
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress

Code explanation. To work properly, our shortcode function must handle

two parameters: $atts and $content. $atts is the shortcode attribute(s). In
this example, the attribute is called href and contains a link to a URL.
$content is the content of the shortcode, embedded between the domain
and sub-directory (i.e. between “www.example.com” and “/subdirectory”). As
you 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 some
killer ready-to-use shortcodes!

1. Create a “Send to Twitter” Shortcode

The problem. Seems that a lot of you enjoyed the “Send to Twitter” hack
from 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 it
to a post. The solution is simple: a shortcode!

The solution. This shortcode is simple to create. Basically, we just get the
code from the “Send to Twitter” hack and turn it into a PHP function. Paste
the following code in the functions.php file in your theme:

wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 5/53
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress

function twitt() {
return '<div id="twitit"><a href="http://twitter.com/h
ome?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 then
type:

[twitter]

and a “Send to Twitter” link will appear where you placed the shortcode.

S O U R CE AN D R E LATE D PLU G -I N S :

How to: Create a “send this to twitter” button

Twitter tools

2. Create a “Subscribe to RSS” Shortcode

The problem. You already know that a very good way to gain RSS
subscribers is to display a nice-looking box that says something like

wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 6/53
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress

“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. In
this hack, we’ll create a “Subscribe to RSS” shortcode. Display it in some
places and not others, in posts or on pages, above or below the main
content, it’s all up to you.

The solution. As usual, we create a function and then turn it into a

shortcode. This code goes into your functions.php file. Don’t forget to
replace the example feed URL with your own!

function subscribeRss() {
return '<div class="rss-box"><a href="http://feeds.f
eedburner.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 to
the div element containing the link. This allows you to style the box the way
you 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

wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 7/53
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress

The problem. Most bloggers use Google AdSense. It is very easy to include
AdSense code in a theme file such as sidebar.php. But successful online
marketers know that people click more on ads that are embedded in the
content itself.

The solution. To embed AdSense anywhere in your posts or pages, create a

shortcode:

1. Open the functions.php file in your theme and paste the following
code. Don’t forget to modify the JavaScript code with your own
AdSense code!

function showads() {
return '<div id="adsense"><script type="text/j
avascript"><!--
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/s
how_ads.js">
</script></div>';
}

add_shortcode('adsense', 'showads');

2. Once you have saved functions.php, you can use the following

wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 8/53
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress

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.

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 is
pretty easy but also, you’ll agree, a real time-saver!

S O U R CE S :

How to: Embed AdSense anywhere on your posts

4. Embed an RSS Reader

The problem. Many readers also seemed to enjoy the “8 RSS Hacks for
WordPress” post published on Smashing Magazine recently. Now, let’s use
our knowledge of both RSS and shortcodes to embed an RSS reader right in
our posts and pages.

The solution. As usual, to apply this hack, simply paste the following code in
your theme’s function.php file.

wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 9/53
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress

//This file is needed to be able to use the wp_rss() fun

ction.
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 of
items 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 the
WordPress editor? Sure, the “Related posts” plug-in can retrieve related
posts for you, but with a shortcode you can easily get a list of any number of
posts 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(

wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 10/53
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress

"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 switching
to HTML mode:

[liste num="3" cat="1"]

This will display a list of three posts from the category with an ID of 1. If you
don’t know how to get the ID of a specific category, an easy way is
explained here.

Code explanation. After it has extracted the arguments and created the
global variable $posts, the sc_liste() function uses the get_posts()
function with the numberposts, order, orderby and category parameters to
get the X most recent posts from category Y. Once done, posts are
embedded in an unordered HTML list and returned to you.

S O U R CE :

1. WordPress: Création de shortcode avancé

wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 11/53
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress

6. Get the Last Image Attached to a Post

The problem. In WordPress, images are quite easy to manipulate. But why
not make it even easier? Let’s look at a more complex shortcode, one that
automatically 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: '.$widt
h.'px; height: '.$height.'px; float: '.$float.';">'.$ful
limage.'</div>';
}
add_shortcode("postimage", "sc_postimage");

To use the shortcode, simply type the following in the editor, when in HTML
mode:

[postimage size="" float="left"]

Code explanation. The sc_postimage() function first extracts the shortcode

attributes. Then, it retrieves the image by using the get_children(),

wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 12/53
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress

wp_get_attachment_image() and wp_get_attachment_image_src() WordPress

functions. Once done, the image is returned and inserted in the post
content.

S O U R CE S :

1. WordPress Shortcode: easily display the last image attached to post

7. Adding Shortcodes to Sidebar Widgets

The problem. Even if you enjoyed this article, you may have felt a bit
frustrated because, by default, WordPress doesn’t allow shortcode to be
inserted into sidebar widgets. Thankfully, here’s a little trick to enhance
WordPress 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 on

the widget_text() function to execute the do_shortcode() function, which
uses the API to execute the shortcode. Thus, shortcodes are now enabled in
sidebar widgets.

wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 13/53
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress

S O U R CE S :

How to: Add Shortcodes to Sidebar Widgets

Adding a Shortcode to a Sidebar Widget

WordPress Shortcodes Resources

Shortcode API
The WordPress Codex page related to the shortcode API.
WordPress 2.5 shortcodes
Excellent shortcodes tutorial.
WordPress shortcode generator
The page is in French but provides a very useful and easy-to-use app
to create shortcodes online.
Using WordPress shortcode to create beautiful download boxes
Another great use of shortcodes: creating fancy “Download” boxes
for your blog.
Easy way to advertise in WordPress using shortcodes
Great resource to manage and insert advertising on your blog,
brought to you by WpEngineer.
Create a signature using WordPress shortcodes
Really simple but really cool: a shortcode to display a graphic
signature on your blog.
How to: Use WordPress shortcodes with attributes
Concise tutorial on using shortcode attributes.

(al)

Tags: Essentials Shortcodes Techniques

Share on Twitter ↑ Back to top

wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 14/53
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress

Jean-Baptiste Jung
This guest post was written by Jean-Baptiste Jung, a 28-year-
old blogger from Belgium, who blogs about Web Development
on Cats Who Code, about WordPress at WpRecipes and about
blogging on Cats Who Blog . You can stay in touch with Jean
by following him on Twitter.

Related Articles

10 Useful WordPress Do-It-Yourself Caching Creating Mobile-

Hook Hacks Methods With Optimized Websites
WordPress Using 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 and
well-respected companies. Submit a job listing, and good luck!

118 Comments Best Comments

wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 15/53
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress

Japh
February 2nd, 2009 8:30 pm

Great post, thanks! I’m really only just starting to realise the power of
1
WordPress :)

0 Reply

DKumar M.
February 2nd, 2009 8:31 pm

Some Of them I knew Already Some of them are not… Thanks for the info
Jean!!
2
DKumar M.

0 Reply

Ejaz
February 2nd, 2009 8:32 pm

A very useful tips. Thanks Jean! 3

0 Reply

Aravind
February 2nd, 2009 9:37 pm

another smashing post!. :) 4

Now I am going to retheme my blog..

0 Reply

African Boy
February 2nd, 2009 9:47 pm

wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 16/53
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress

This is an example of articles we need, not just lists and lists. Not that the
lists are bad, but information is better.
5
Then again, we all have different requirements.

0 Reply

Don Campbell
February 2nd, 2009 9:59 pm

Wow this is a great tip that I didn’t know about – thanks!! (Dugg.) 6
+1 Reply

silentgirl
February 2nd, 2009 10:33 pm

a very good article! i’ll definitely gonna make shortcodes ! 7

0 Reply

Youri
February 2nd, 2009 10:35 pm

Agree with African Boy, less lists please and more articles like this. I
actually learned stuff I didn’t know!
8
+1 Reply

new
February 2nd, 2009 11:03 pm

Thank you!!! 9
+2 Reply

wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 17/53
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress

sandeep
February 2nd, 2009 11:06 pm

wow… nice post… thanks… 10

+1 Reply

Yogie
February 2nd, 2009 11:35 pm

Great !!! 11
+1 Reply

Sarah
February 2nd, 2009 11:50 pm

This is great! More like this, please 12

(Running off to create a new wp theme…)

0 Reply

Dany
February 2nd, 2009 11:57 pm

Very useful and interesting article. Thanks a lot! 13

0 Reply

Marvin
February 2nd, 2009 11:58 pm

this is so great! thanks for the detailed description!! 14

wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 18/53
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress

0 Reply

Wp Addict
February 3rd, 2009 12:00 am

Great tutorial. The one on inserting the adsense will definitely be of great
use to me.
15
0 Reply

Simon Day
February 3rd, 2009 12:59 am

Excellent article. Clear, consice and easy to follow…exactly what the Dr

ordered :-) Well done!
16
0 Reply

tom hermans
February 3rd, 2009 2:10 am

I’ve already discovered the power of the functions.php-file and these

shortcodes are another tool in my kit, thanks very much !
17
0 Reply

OnWebDev
February 3rd, 2009 2:58 am

Wow, that’s great! Didn’t knew that feature existed. I really like the Embed
Adsense Code in posts shortcode. It sure saves a lot of time… Thanks for
18
sharing!

0 Reply

wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 19/53
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress

tom hermans
February 3rd, 2009 2:58 am
19
I think I found a minor error.

In the 5th tip, where a post is retrieved directly from the database, the
shortcode reads

[liste num="3" cat="1"],

but the code in functions.php that catches the shortcut is

add_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 ?

0 Reply

Tam Mai
May 14th, 2012 11:21 pm

I think author want readers to understand what they type or

copy/paste ;-)
20
0 Reply

Alessandro
February 3rd, 2009 3:00 am

Great article! Thanks 21

0 Reply

Manu
February 3rd, 2009 3:12 am

wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 20/53
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress

Very interesting hack!

22
I’ll use them to make my codex smaller end easier!

Manu

manublog.org

0 Reply

airwolf
February 3rd, 2009 3:22 am

Awesome ! 23
WordPress is very suitable for light-scale web development for those
people that not much in pure coding techniques like me >_<

0 Reply

b00m
February 3rd, 2009 3:37 am

Yahooo! very helpful…Tnx for sharing SM! 24

0 Reply

JoSe
February 3rd, 2009 4:18 am

Excellent article, found it through feedly´s twitter. 25

0 Reply

mathiz

wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 21/53
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress

February 3rd, 2009 5:21 am

what is de URL of the picture by ” 2. Create a “Subscribe to RSS”

26
Shortcode”

0 Reply

Laura
February 3rd, 2009 5:33 am

Awesome post. Please give us more of these helpful tutorials that show us
more of what WordPress can do (and more of Jean-Baptiste’s genius!)
27
I agree with African Boy and Youri – list posts have nothing on posts as
useful and informational this one :)

0 Reply

unicatcher
February 3rd, 2009 6:35 am

Same question as mathiz’s; 28

What’s the url of the blog used for the screenshot at “Create a “Subscribe
to RSS” Shortcode”? Looks like I design worth checking out.

0 Reply

Jorge Bordás
February 3rd, 2009 6:42 am

Great list and great and useful information. A lot of thanks :) 29

0 Reply

Dainis Graveris

wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 22/53
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress

February 3rd, 2009 6:53 am

wow, this post is extremely useful for everybody who uses WordPress,
30
thanks!! :)

0 Reply

Full Circle Studio

February 3rd, 2009 8:26 am

Wow, we’ve been using WordPress for years and never knew the process
for doing this. Thanks for the great tip!
31
0 Reply

Cédric GIRARD
February 3rd, 2009 8:49 am

Awesome article !!! 32

Really thanks :-)

0 Reply

Ariyo
February 3rd, 2009 9:53 am

AWESOMENESS! bookmarked! 33
0 Reply

Jean-Baptiste Jung
February 3rd, 2009 10:05 am

I’m glad to see all theses nice comments, great to see you enjoyed the
article! Thanks for your support!
34
wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 23/53
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress

0 Reply

Mario Awad
February 3rd, 2009 11:39 am

I was lately thinking about how to easily add images with lighboxes to
posts… you just hit the jackpot… thanks for the amazing article :)
35
0 Reply

Jeff L
February 3rd, 2009 12:32 pm

Good stuff here – I just converted my site to use WordPress, and this
functionality seems to offer a great amount of flexibility. I wasn’t aware
36
that this existed at all, thanks!

0 Reply

Chris Robinson
February 3rd, 2009 12:56 pm

great article, definitely going to come in handy 37

0 Reply

Martin Greenwood
February 3rd, 2009 3:10 pm

Awesome. i love the twitter shortcode. highly useful… 38

0 Reply

runner

wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 24/53
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress

February 3rd, 2009 3:55 pm

good~!article
39
0 Reply

Leion
February 3rd, 2009 9:20 pm

Great! Can I use short codes in a comment? 40

0 Reply

Yang Yang
February 3rd, 2009 10:37 pm

This would come much more handy with large chunks of random snippet
insertions.
41
+1 Reply

kimee
February 3rd, 2009 11:43 pm

AWESOMENESS! 42
That’s I’ve been studying and trying to summarize.

Thanks for the tips. and hoping more informaiton for other shortcodes.

0 Reply

Charliend
February 4th, 2009 5:06 am

Simply marvellous it’s going to help me so much with my new blog: 43

wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 25/53
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress

charlie-blog.com/media

0 Reply

Digiscott
February 4th, 2009 7:44 am

Thanks, this post helped save me several hours of custom code on a

WordPress customization project.
44
0 Reply

Nicholi
February 4th, 2009 8:51 am

This is a great article. I didn’t know that WordPress had such a thing built
in. This is definitely useful. Thanks for the tips!
45
0 Reply

Sid W
February 4th, 2009 1:05 pm

This just made my day. 46

0 Reply

王韬
February 4th, 2009 11:02 pm

假如有中文就更完美了 47
0 Reply

wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 26/53
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress

Tinna
February 5th, 2009 2:27 am

Oh My ~楼上那个王韬~我好像认识你~
48
0 Reply

Burclar
February 5th, 2009 1:16 pm

very helpful article for webmaster who are using wordpress . Very Very
thank you.
49
+1 Reply

insic
February 6th, 2009 12:10 am

really awesome article. thanks for sharing 50

0 Reply

normalfx
February 7th, 2009 7:24 pm

so powerful tips. 51
0 Reply

E. Houston
February 8th, 2009 9:49 am

Great post. I like a lot of functionality but tons of plugins slow down
loading. This one tip replaces several plugins and gives me a great
52
direction to go in.

wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 27/53
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress

0 Reply

lyon
February 8th, 2009 4:53 pm

Impressive tutorial, or should i say tutorials to learn how to use wordpress

in an advanced way, for that i thank, a lot.
53
0 Reply

Cassiano
February 10th, 2009 6:34 pm

hi all 54
on “step” 6. why it takes the last image?! how can I do to take the first
image?!?!

BR,

Cassiano

0 Reply

Raj Kumar Maharjan

February 11th, 2009 9:26 pm

Thanks, this makes easy to maintain word press 55

0 Reply

Gary
February 11th, 2009 10:39 pm

Hi, 56
wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 28/53
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress

It is really neat tutorial, i have to admit :)

One question though. In the 3rd heading you’ve put the following in the
code 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 to
mess up the AdSense code which is against the AdSense ToS?

-1 Reply

George Serradinho
February 12th, 2009 5:00 am

Wow, this is awesome. 57

I guess there is always new stuff to learn, thanks for sharing.

0 Reply

Emiliano Jordan
February 19th, 2009 7:47 am

Great article, thanks. Also does anyone know what plugin is being used to
display the code here? I’d really like to get that rolling.
58
0 Reply

chris
March 31st, 2009 3:20 pm

wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 29/53
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress

59
Thanks for a great article. I wrote a plugin called ‘MapPress’ that lets you
insert Google Maps (as shortcodes), directly from the WordPress editor.

I stumbled on your article when my 71-year-old Mom asked me ‘what is a

shortcode?’…

0 Reply

jmezes
May 1st, 2009 2:20 pm

Great article but I was a bit frutrated with “Embed an RSS reader”. It really
dont works for me (WordPress 2.7.0).
60
For each try I made, it’s every time the same result in my page: “an error
has occured the feed is probably down, try again later”.

An idea ?

0 Reply

Luis Eduardo
May 6th, 2009 10:04 am

Great post, I’m really impressed about such things you can do with a bit of
code
61
0 Reply

The Frosty @WPCult

May 20th, 2009 9:24 am

How about: add_filter( 'comment_text', 'do_shortcode' ); 62

adding shortcodes to comments!

+1 Reply

wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 30/53
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress

bitlimakina
June 22nd, 2009 1:21 pm

thanks for great tutorial

63
0 Reply

liberta cara
July 12th, 2009 10:54 pm

You’re a great site! Thanks 64

0 Reply

piouPiouM
July 17th, 2009 1:33 am

The “Embed an RSS reader” shortcode is buggy ( wp_rss() performs echo 65

not a return). Fix it Fix it [fr] with the second block code.

0 Reply

Keith Collantine
August 31st, 2009 9:45 am

There’s a problem with the “Get posts from WordPress Database with a
Shortcode” example.
66
It causes all comments added to the final post in the list to appear in the
article you added the list to.

Is there a way to fix this problem?

0 Reply

segovia

wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 31/53
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress

September 24th, 2011 9:37 pm

I too noticed this, it’s definitely a bug because it seems to display the
67
comment box and any related comments for the last post shown. This
happens on all post types (posts, pages and CTP’s). I would also know
how to fix this.

0 Reply

Aakash Chakravarthy
September 2nd, 2009 5:07 am

Excellent Article !!!!!! 68

0 Reply

Rafans Manado
October 12th, 2009 4:40 pm

Tabea…. Salam kenal dari Manado – Indonesia. Good n thanks,- 69

0 Reply

Roozbeh
October 27th, 2009 9:48 pm

Thanks , this is awesome , made my life 10 years longer ;) 70

0 Reply

Robert@PNG
November 16th, 2009 4:08 am

Thanks for the valuable article on shortcodes. Your introduction and

application of this very powerful WordPress tool has come in handy on
71
several occasions throughout my “apprenticeship” with WordPress.

wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 32/53
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress

0 Reply

TATEZO-
December 1st, 2009 4:26 am

Great Article,thank you 72

0 Reply

Haitham Al Humsi
December 19th, 2009 6:21 am

Awesome writeup, but i have a question… 73

all the shortcodes i define myself end up giving me triplicate results on my
pages

for example if i create an adsense short code and embed it in my blog i get
3 adsense blocks… but if i use a short code defined in one of the plugins
i’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!

0 Reply

Judd Dunagan
January 18th, 2010 4:25 am

You guys rule! 74

0 Reply

wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 33/53
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress

Al

75
February 23rd, 2010 9:49 am

Good article!

Has any had a problem with Shortcode duplicating on pages? I’ve recently
used a few shortcodes for different wordpress plugins but when I look at
the page i create the code repeats it’s self and I wind up having the 3 of
the same thing on my page. How do I stop that from happening?

0 Reply

cameraadvice
March 3rd, 2010 7:29 am

there is a mistake in your post pulling shortcode. it should read list and not
liste.
76
i have used this code on my website

is it possible to pull more than just the title?

0 Reply

CSSReX
March 23rd, 2010 9:24 am

Thanks for this wonderful tutorial! I am going to implement it in my client’s

website right now.
77
0 Reply

Bob
April 5th, 2010 12:52 pm

Interesting to note that in WP 2.9.2 shortcodes only seems to work when

using the template tag the_content(). Using the function get_the_content()
78
wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 34/53
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress

does not perform the replacement and the shortcode is visible on the
page.

0 Reply

Moochyschwag
April 25th, 2010 9:45 am

Create a signature using WordPress shortcodes is a broken link. 79

0 Reply

Carl - Web Courses Bangkok

May 22nd, 2010 12:02 am

A wonderful article! I am just getting into the programming side of

WordPress and this will be really useful to pass onto our trainees.
80
Thanks,

0 Reply

Xcellence IT
June 17th, 2010 9:49 pm

very useful tutorial. 81

I want to create a short code that will create div with some specific class
applied to it.. how can I do that?

like this one..

[div_halfcol] will create a and something that will close this div…

0 Reply

wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 35/53
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress

Deepesh Divakaran
June 18th, 2010 11:46 am

Wonderful post…! it helped me create a shortcode for my site where I allow 82

downloads only if registered/logged in

0 Reply

Char-Lou Benedict
August 12th, 2010 12:33 pm

Enjoyed the post – but when I tried the rss shortcode on my arras theme
with a yahoo.pipe, nothing shows up.
83
The pipe does show with the rss sidebar widget. Any suggestions or noted
conflicts?

0 Reply

Andreas Ostheimer
September 7th, 2010 7:58 am

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 ;-)
84
Thanks, Andreas

0 Reply

Osu
September 12th, 2010 11:23 pm

Nice article – will definitely use these shortcodes. This is off-topic, but is
there a way to allow wp registered users to upload their own avatar
85
without using the Gravatar website? Is this website doing that? Thanks

wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 36/53
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress

0 Reply

sagive
September 18th, 2010 8:57 am

GR8 post men… very usefull.. 86

was looking for that list post for a personal automated sitemap

10x a lot :)

0 Reply

vee ray
September 30th, 2010 8:22 pm

Hi this is a great post. one thing I noticed is that in item# 5 the shortcode
has a typo which renders the example invalid.
87
it says:

1 [liste num="3" cat="1"]

it should say:

1 [list num="3" cat="1"]

thanks though. it works great!

0 Reply

Mati
October 12th, 2010 8:56 am

great post! 88
I wonder how these shortcodes affect performance?

wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 37/53
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress

I guess that WP is scanning the post content for any inline shortcodes
before echoing it, how bad is that for the website’s performance?

0 Reply

Brett Widmann
October 23rd, 2010 2:24 pm

wow! so easy. thanks for the code sets. 89

0 Reply

Niraj
November 1st, 2010 8:42 pm

Hey nice tutorial 90

but i have a problem

i have a wordpress plugin Taxonomy Terms List, this plugin is used to

display 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 ) . ”;

wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 38/53
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress

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;

wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 39/53
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress

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????

0 Reply

Eric
November 6th, 2010 11:40 pm

Thanks! 91
0 Reply

wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 40/53
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress

Eric
November 6th, 2010 11:40 pm
92
Thanks!

+1 Reply

Chris
November 24th, 2010 1:40 am

These are all great but what if I want to display a shortcode in the visual
editor in a specific way instead of just having the shortcode text?
93
+1 Reply

vinod
December 27th, 2010 11:24 pm

Hey, 94
These are all great ,

Thanks Dear!

+1 Reply

Paulo
January 3rd, 2011 9:30 am

Wonderful! 95
The best article I’ve ever seen on this content!

Congratulations.

Very good!

wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 41/53
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress

+1 Reply

Rohan @techlunatic
January 10th, 2011 11:28 pm

hello i am using the elegant themes framework and i pasted the code in
the functions.php as you said but it has error messages. plz help!!
96
+1 Reply

Chris @cquinndesign
February 15th, 2011 1:33 pm

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 template
97
I like the shortcodes on, can I take those shortcodes and insert them into
another template for wordpress?

Thanks

+1 Reply

oem store
March 2nd, 2011 1:56 pm

I am totally delighte with strong you blog greatly that warned me God
bless yo
98
+1 Reply

dhanapal
March 11th, 2011 4:48 am

Hai friend, 99
Its very easy to understand and thanks for this post. keep updating our
knowledge through this types of posts.

wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 42/53
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress

Thanks Thanks Thanks,

bye take care

+2 Reply

Kevin Leary
March 11th, 2011 12:08 pm

I’ve created a modified version of the RSS feed shortcode that uses
fetch_feed() instead of wp_rss(). It allows you to pull in a little more
100
information including the date posted and a description/excerpt and
provides some basic CSS to get you started also. I hope it can help
someone out there!

+1 Reply

ARS
April 2nd, 2011 2:26 pm

Wow, this is great! You’re awsome Jean!! 101

+1 Reply

Ron Finnerty
May 5th, 2011 8:39 am

Great article. 102

My question relates to whether plugins run previous to a plugin I wish to
use uses a Shortcode already.

Would this cause a collission and different processing of the shortcode

between the two?

How could I either detect the other shortcode definition or create some
mechanism to avoid collissions completely.

wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 43/53
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress

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.

+1 Reply

Donna Bushek
September 14th, 2011 7:10 pm

This has just what I needed to get going thanks. 103

+1 Reply

Splendid Angst
September 25th, 2011 4:21 pm

How hard would it be to create a short code that requires you to use a 2
part short code. Example: I would like to avoid the copy/paste method that
104
I’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 be
awesome, 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.

+1 Reply

Arvind Bhardwaj
September 26th, 2011 11:00 pm

Shortcodes are not working in my WordPress(3.2.1) installation. It just prints

the code itself. Anyone has any idea?
105
+1 Reply

wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 44/53
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress

prit
December 23rd, 2011 4:43 am

function sc_postimage($postID)
106
{

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

?>

wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 45/53
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress

<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

Manuel S.
October 10th, 2011 10:37 am

wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 46/53
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress

107
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 main
post, they will be overriden by the posts from the shortcode. Depending
on your specific theme, this can have unwanted results, wrong values in
sidebars, footers, etc.

You probably want to go back to the main loop, and that’s exactly what
“wp_reset_query();” does.

+1 Reply

brian.s
November 10th, 2011 1:18 pm

Rad. I dislike WordPress slightly less after reading this. We (WP + me) have
a love/hate relationship.
108
+1 Reply

Prashant
December 21st, 2011 3:51 am

thanks a lot.. I was breaking my head from last few hours.. and here I found
the exact solution.
109
+1 Reply

vivek
February 6th, 2012 5:59 am

Amazing post. I love it. Thanks for sharing with us. I hope to see more 110
+1 Reply

wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 47/53
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress

Shawn
February 17th, 2012 10:23 pm

Thank you. What a nice explanation of Shortcodes and how they work. I 111
had no idea they were so simple to create and implement. You have
inspired me to experiment. Thanks!

0 Reply

Surendra
March 25th, 2012 11:23 am

Great Man!!! 112

Now I’m going to create my own shortcode…..

0 Reply

Caps
July 15th, 2012 12:18 pm

Is there a shortcode for username that you can place on a page? This
would be for a Welcome page.
113
Caps

0 Reply

SID SUZUKI
July 26th, 2012 2:06 pm

Get page from WordPress Database with a Shortcode 114

function pagedata($atts, $content = null) {

extract(shortcode_atts(array(

wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 48/53
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress

“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”);

0 Reply

Steve
August 14th, 2012 5:46 am

The adsense shortcode worked like a charm…Thanks Great Article BTW! 115
0 Reply

max
August 28th, 2012 1:44 pm

Hi there, 116
wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 49/53
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress

Im wanting to create a photo blog theme, i want to use short codes for
inserting images into posts rather than the user just adding images straight
to the editor.

What I want to do also is wrap the image inside some custom html, this is
just 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 and
over:

[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?

0 Reply

chazzer
January 1st, 2013 2:10 pm

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
117
“twitter” example hung around like a bad smell. Where does the code
reside when this happens. The reverse also occurred. I coded the “Hello
world” example but made some sort of mistake. However even when I
corrected the mistake it could not be made to work. I then coded
remove_shortcode(‘hw’) and a corrected version of “Hello world”. It then
worked.

wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 50/53
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress

0 Reply

Kamal
January 13th, 2013 7:44 am

The adsense code is not working anymore! 118

0 Reply

Leave a Comment
Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that
comments are moderated and rel="nofollow" is in use. So, please do not use a
spammy keyword or a domain as your name, or it will be deleted. Let's have a
personal and meaningful conversation instead. Thanks for dropping by!

Your name *

Your email *

Your message *

Submit comment
wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 51/53
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress

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?

SMA SHING HUB

Smashing Magazine
The Smashing eBook Library
Smashing Books
Smashing eBooks
Smashing Email Newsletter
Smashing Shop
Smashing Job Board

wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 52/53
3/31/13 Mastering WordPress Shortcodes | Smashing WordPress

OTHER RESOURCES

Free Anniversary eBook

Smashing Book 1 in HTML
Smashing Book 2 Extras
Publishing Policy
About us
Contact us

With a commitment to quality content for the design community.

Smashing Media. Made in Germany. 2006-2013. About / Impressum.

wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ 53/53