WordPress Shortcodes: Inside Out

WordPress shortcodes are very handy for creating macros to be used in post content. It is very useful for average users to publish dynamic content without having any programming skill.

wordpress shortcodes

You may use shortcodes in posts, pages, widgets, comments or even in template. In this article you’ll learn how to create and use shortcodes inside posts, widgets, comments & in template. So, let’s get started!

How to Create a WordPress Shortcode?

Shortcodes API makes it easy to create shortcode in WordPress. First you’ll need to create a function in your theme’s functions.php file which should return a string.

The function can accept arguments like bellow:

Select Code
1
2
3
function ws_shortcode( $args, $content, $tag ) {
return ‘some string’;
}

The first parameter $args should be an associative array, like:

Select Code
1
2
3
4
5
$args = array(
‘key1=> ‘value1’,
‘key2=> ‘value2’,
‘key3=> ‘value3);

The keys are the attributes of the shortcodes.

$content is the enclosed content, if the shortcode is used in its enclosing form.
$tag is the shortcode tag.

After creating the function, you need to call WordPress’s function add_shortcode() to create the shortcode.

Let’s create your first shortcode! We’ll create a simple shortcode that links to your facebook profile.

Select Code
1
2
3
4
5
6
function ws_fb_shortcode( $atts, $content = null ) {
extract( shortcode_atts( array( 'url' => '#' ), $atts ) );
return '' . $content . '';
}

add_shorcode( 'fb_profile', 'ws_fb_shortcode' );

Never ever echo from a shortcode function, it should always be returned.

How to Use this Shortcode?

A shortcode is a bit of text wrapped in square brackets. The text should be the name of the shortcode. So, use the shortcode created above like bellow:

[fb_profile url=”wordpress.schools”]Like us on facebook[/fb_profile]

The above shortcode outputs: Like us on facebook

How to use Shortcode in Widget?

Normally, shortcodes do not work in text widget. To make this to work on text widget, we need to add a filter in your functions.php file:

Select Code
1
add_filter('widget_text', 'do_shortcode');

How to use shortcode in template?

To use shortcode directly on your template, you need to call do_shortcode() function in the template like bellow:

Select Code
1
do_shortcode(‘[fb_profile url="wordpress.schools"]Like us on facebook[/fb_profile]’);

How to use shortcode in Post excerpt?

If you have shortcode in your post excerpt, it is displayed as normal text rather than executing this. To make shortcodes to work in post excerpt, you’ll need to add the following filter in your theme’s functions.php:

Select Code
1
add_filter( 'the_excerpt', 'do_shortcode');

How to use shortcode in comments?

To allow the comment author to use shortcode, you’ll need to add the following filter in your theme’s functions.php file:

Select Code
1
add_filter( 'comment_text', 'do_shortcode' );

How to use nested shortcode or shortcode inside shortcode?

Sometimes, you may want to use shortcode inside another shortcode. It is easy, you can do it with do_shortcode() function.

Example:

Select Code
1
2
3
4
5
function ws_new_shortcode( $atts, $content = null ) {
extract( shortcode_atts( array( 'class' => 'btn' ), $atts ) );
return '<span class="' . $class . '">' . do_shortcode( $content ) . '</span>';
}
add_shrotcode( 'new_shortcode', 'ws_new_shortcode' );

Now, we can use it like:

[new_shortcode ][fb_profile url=”wordpress.schools”]Like Us on FB[/fb_profile][/ new_shortcode]

It outputs like: Like us on facebook

I have style added for btn class, this is why it gets the style.

New shortcode functions in 3.6

WordPress 3.6 is coming with some cool functions like has_shortcode() to check whether the content passed contains a specific short code.

To use this function in earlier version of WordPress, you’ll need to paste the following codes in your functions.php file:

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
if( !function_exists('shortcode_exists') ) {
function shortcode_exists( $tag ) {
global $shortcode_tags;
return array_key_exists( $tag, $shortcode_tags );
}
}

if( !function_exists( 'has_shortcode' ) ) {
function has_shortcode( $content, $tag ) {
if ( shortcode_exists( $tag ) ) {
preg_match_all( '/' . get_shortcode_regex() . '/s', $content, $matches, PREG_SET_ORDER );
if ( empty( $matches ) )
return false;

foreach ( $matches as $shortcode ) {
if ( $tag === $shortcode[2] )
return true;
}
}
return false;
}
}

Got any question? Fell free to share your thoughts in comments section.

Happy shortcoding :D

Comments

  1. Very nice but I wouldn’t recommend putting these functions directly into your functions.php as it can cause problems when updating. Instead I use a plugin called “Code Snippets” which allows me to put in any PHP I want without affecting functions.php itself.

    • Hi there,

      Thanks for commenting here. Yeah, putting these functions directly into theme’s functions.php can cause problems when updating, this is why I recommend creating “Child Theme”, so you never loose your styles and functions.

      I’m planning to write some tutorials on child theme development.

      Thanks again :)

Leave a Reply

%d bloggers like this: