Feature
Post

Category
Code


Enhance Your WordPress Themes With Shortcodes


When WordPress 2.5 was introduced in Spring 2008, one of the biggest innovations and additions was the WordPress Shortcode API. Shortcodes have become a regularly used feature by designers and can help to reduce the number of plugins used. In this post we look at some shortcodes you can implement and use to enhance your WordPress themes.

Getting Started With Shortcodes

A shortcode is a php function which you can add to the function.php of your theme. Via the trigger add_shortcode() you can define the name of your shortcode and how to call the function in the editor. Add this code immediately under the php function in your function.php.

1. Adding A Generic Link

The easiest use for shortcodes is probably to use a shortcode for content you publish regularly like a link to your subscription page.

Sample Code

function subscribe() {
    return '<a href="http://www.devlounge.net/subscribe">Subscribe to Devlounge</a>';
}
add_shortcode('sub', 'subscribe');

What we did in this example was to define the shortcode sub and link it to the function subscribe. Now if you use the shortcode [sub] in the text editor it will automatically replace it with the link Subscribe to Devlounge in the entry.

2. Adding Pullquotes To Your Theme

Example of a pullquotePullquotes are a well known design element in print design but often forgotten online. Especially when posting long entries, choosing an ad rem quote can highly improve the readability and interest. The screenshot on the right is a perfect example of the visual effect pullquotes have.

It is very simple to add pullquotes to entry with a simple shortcode, similar to BBCode.

Sample Code

function pullquote( $atts, $content = null ) {
	extract(shortcode_atts(array(
		'float' => '$align',
	), $atts));
   return '<blockquote class="pullquote ' . $float . '">' . $content . '</blockquote>';
}
add_shortcode('pull', 'pullquote')

You can now use the shortcode [pull]your quote here[/pull] in the editor when writing entries.

Do not forget to style the new code in your theme’s CSS. In this example the shortcode [pull] returns <blockquote class="pullquote">.

Sample Code

blockquote.pullquote { width: 220px; padding: 5px 0; border: 0; font-size: 18px; line-height: 150%; }

As you can see in this example, shortcodes can easily be used to use different styling in your entries without having to write HTML. This can be very handy for multi-authored blogs, not every author knows HTML, and makes shortcodes a genuine alternative for bbcode. It is very easy to provide a shortcode to use @font-face in your entries.

3. Adding A ‘Twit This’ Image/Link

Twitter is very practical to promote your entries and there are several methods to implement buttons or links to submit your entries. But sometimes you want an additional method to quickly add a button or submit link.
When entries start to become popular sometimes it can make sense to add a link at the top right or left of your entry, without having this submit link in every entry. This can easily be done with a shortcode and is also handy on multi-authored blogs and without the need to allow your authors the add code, scripts to their entries.

Sample code

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"><img src="link to your twitter-button image" alt="Twit This image" /></a></div>';
}

add_shortcode('twitter', 'twitt');

You can now easily style the id="twitit" in your CSS, all the authors have to do to display the link is use the shortcode [twitter] in their entry.

If you want to add buttons to other social networks you can find the code needed for the submission process here.

4. Adding Previous Entries From The Same Category

Displaying related entries is a very popular on many blogs but some bloggers might prefer to show previous entries from the same category instead. This is very handy when you only have few categories and want to randomly display previous entries from that category.

Sample Code

function prev_related($atts, $content = null) {
        extract(shortcode_atts(array(
                "num" => '5',
                "cat" => ''
        ), $atts));
        global $post;
        $myposts = get_posts('numberposts='.$num.'&order=DESC&orderby=random&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('related', 'prev_related');

In this example the shortcode [related] will randomly display 5 entries from the same category.

5. Using Shortcodes To Hide Content From The Public

Shortcodes can also be used to hide content from non-logged in members. This can be very handy when you regularly publish paid content and still want to show a teaser to your entries. Additionally it can be smart to show only not-logged in users a certain text, fe. ‘This content is only visible to members, subscribe here to get access to all our awesome tips or log in here if you are already a member‘.

Creating The Shortcode For Guests

function guest_check_shortcode( $atts, $content = null ) {
	 if ( ( !is_user_logged_in() && !is_null( $content ) ) || is_feed() )
		return $content;
	return '';
}

add_shortcode( 'guest', 'guest_check_shortcode' );

Creating The Shortcode For Members


function member_check_shortcode( $atts, $content = null ) {
	 if ( is_user_logged_in() && !is_null( $content ) && !is_feed() )
		return $content;
	return '';
}

add_shortcode( 'member', 'member_check_shortcode' );

With both shortcode functions added to the functions.php it now is very easy to add the teaser line, with link to your subscription or login page, and the content for members only.

An Example Entry

A small teaser paragraph here.
[guest]This content is only visible to members, subscribe here to get access to all our awesome tips or log in here if you are already a member[/guest]
[member]Your awesome tip and member-only content comes here[/member]
Continue with your regular scheduled program.

Sources


  1. By Eugenio Grigolon posted on December 11, 2009 at 4:23 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Nice collection of codes! I was looking for something like pullquotes, this is definitely a good feature to use. Thanks for sharing.

  2. By Thomas Plastino Martin posted on December 11, 2009 at 9:40 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Thanks for the shortcode ideas! I have started introducing shortcodes into my template designs and this makes it a lot easier. This is something I will definitely do with plugins as well, to give more freedom as to where plugin-related information can show up.

  3. By Bill Bolmeier posted on December 17, 2009 at 7:12 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Great explanation of shortcodes and their use. Yes, I also like the pullquotes.

  4. By Eduardo Mozart de Oliveira posted on December 24, 2009 at 3:45 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Thanks for this shortcodes, it facilitated my life!

  5. By Austin posted on December 27, 2009 at 6:29 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Would anyone be interested in a plugin to help you add these short codes if you aren’t comfortable working with PHP?

  6. Trackback  Enhance Your WordPress Themes With Shortcodes | Devlounge by กิ๊กก๊อก : ตามหาฝันบนโลกออนไลน์ !!!Display Upcoming Entries In Your Post With A WordPress Shortcode | Blogging ProAround the WordPress Community: WPMU Merger, Widgets, Custom Fields, Shortcodes | WordCast - Blogging news, WordPress help, WordPress plugins, WordPress themes, WordPress news