216 – Building a WordPress Shortcode

Announcements

• February WordPress Webinar
  • Editing Your Premium Theme the RIGHT way
  • February 6th 10am EST
  • Register Today!
• Smart Podcast Player use the coupon code betafriend

Is there a plugin for that?

With more than 50,000 plugins in the WordPress repository, it’s hard to find the perfect one. Each week, I will highlight an interesting plugin form the repository.

For more great plugins, download my 50 Most Useful Plugins eBook.

CM Tooltip Glossary is a plugin that you can easily create a Glossary, Encyclopaedia or Dictionary of your terms and show tooltip when users hover over specific words. This plugin will also build a glossary or index page with all of words you’ve defined on your site.

Building a WordPress Shortcode

In today’s episode, we are going to discuss how to build your own shortcode and we’ll go over a few examples.

There’s three ways to implement shortcodes on your site

1. Use shortcodes build into your theme
2. Use a shortcode plugin
3. Use GenerateWP
4. Write the code yourself

Use Shortcodes in Theme

This is the easiest method as the shortcodes are built right into the theme. Sometimes theme developers will even add buttons to the visual editor to make it extremely easy to add to your post or page.

Use a Plugin

Shortcodes Ultimate has 30+ shortcodes built in. The premium version of the plugin allows you to create your own custom plugin

Use GenerateWP

GenerateWP gives you the ability to generate code for lots of different WordPress things, like custom post types, plugin readme generator, theme headers, menu generator and more.

First, fill out the form, use the ‘Update Code’ button to generate the code snippet, copy your code to your website functions.php file or custom plugin.

Plus there are a handful of examples, both self-closing and enclosing along with ones that pass in parameters.

Write the Code Yourself

This is the trickiest option and you’ll be spending time digging thru the WordPress codex to find exactly how to add the necessary code to your site.

Here’s the broad level overview of how to create a shortcode:

1. Create the code you want
2. Save the code (either in functions.php or custom plugin)
3. Reference your shortcode using add_shortcode(‘shortcode’, ‘function’)
4. Place your shortcode wherever you want it

Examples

Follow Me On Twitter

// Add Shortcode
function custom_shortcode_twitter() {
  // Code
  return 'Follow Me On Twitter';
}
add_shortcode( '[twitter]', 'custom_shortcode_twitter' );

// Add Shortcode
function custom_shortcode_twitter( $atts ) {

   // Attributes
    extract( shortcode_atts(
            array(
                    'handle' => 'DustinHartzler',
            ), $atts )
    );

    // Code
return '<a href="http://twitter.com/' . $handle . '">Follow Me On Twitter</a>';
}
add_shortcode( '[twitter]', 'custom_shortcode_twitter' );<[/code]

Code Highlighting

[code type="PHP"]// Add Shortcode
function code_highlight_shortcode( $atts , $content = null ) {
     // Attributes
     extract( shortcode_atts(
          array(
               'type' => 'HTML',
          ), $atts )
     );


// Code
return '<pre rel=' . $type . '><code>' . $content . '</code></pre>';

Code Formatting

code {
   font: 13px Monaco;
}
pre {
   background: #333;
   color: white;
   padding: 20px;
   margin: 0 0 20px 0;
}

Fernando’s example
Fernando - I support a news webpage in Mexico morelosmagazzine.com and we have 6 or 7 author, each of them have a different picture, text and information. I have created one draft post template for every one of them, when I have to upload their articles I look for their template, copy let say header and footer and paste it in a new post...It will be great to create a shortcode for each one of them instead of do all that process I'm doing right now.

// Add Shortcode
function custom_shortcode_reporter_bio( $atts ) {

    // Attributes
    extract( shortcode_atts(
            array(
                    'reporter' => 'Reporter #1',
            ), $atts )
    );

    // Code
   if ($reporter == "Reporter #1"){
      return '<img src="#">Reporter #1 Bio goes here';
   }elseif {
      return '<img src="#">Reporter #2 Bio goes here';
   }else {
      return '<img src="#">Reporter #2 Bio goes here';
   }
}
add_shortcode( '[reporter_bio]', 'custom_shortcode_reporter_bio' );

A few caveats:
Shortcodes won’t work inside of shortcodes unless you add this code:

add_filter('the_content', 'do_shortcode', 10);

Shortcodes won’t work inside of widgets unless you add this code:

add_filter( 'widget_text', 'shortcode_unautop');
add_filter( 'widget_text', 'do_shortcode');

Call To Action

Sign up for next webinar