Creating Content With Shortcodes


Published on

How to create better looking content on your WordPress site. For more information and relevant links check out

1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Intro: WordPress allows me to enable my customers to take control of content they previously had no control over Shortcodes are one of the ways I give my customers control over their content What do I mean by better content? Mostly I just mean better looking content but you can also have access to content that was previously harder to display on your WordPress site.
  • Easy to use: With only a few keystrokes you can create and test your shortcodes. Easy to create: Shortcodes are easy to create and with a little know-how you can convert previously repetitive tasks into easy to use shortcodes Simplify repetitive tasks: Rather than have my clients copy and paste chunks of code to recreate buttons or text boxes on their sites they can simply reuse the same shortcodes which are a lot easier to remember and involve a lot less code on their end
  • Shortcodes were added in WordPress 2.5 as an easy way to create macros for use in your content.
  • Jetpack Plugin
  • You associate your shortcode with a handler using add_shortcode.
  • If you are using shortcodes provided by a theme you are potentially bound to that theme unless you change your content or find a theme with the same shortcode syntax Your handler needs to call do_shortcode
  • Creating Content With Shortcodes

    1. 1. [WordPress Shortcodes] Creating Better Content  w/ Shortcodes Boston WordCamp 2011
    2. 2. What Is The Problem? <ul><li>WordPress users with minimal HTML experience spend too much time trying to create and format content. </li></ul>
    3. 3. Why Are Shortcodes Useful? <ul><ul><li>Easy to manage </li></ul></ul><ul><ul><li>Easier access to dynamic content </li></ul></ul><ul><ul><li>Simplify repetitive tasks </li></ul></ul><ul><ul><li>Make things look  pretty </li></ul></ul>
    4. 4. What Are Shortcodes? <ul><li>Bits of code you use in the WordPress visual editor to generate dynamic content on the front end. </li></ul><ul><li>HTML: </li></ul><ul><li>Shortcode: </li></ul><ul><li>Result: </li></ul>
    5. 5. Built-In Shortcodes <ul><li>[gallery] </li></ul><ul><li>The [gallery] shortcode is used in a Post or Page to display a thumbnail gallery of images attached to that post. </li></ul>
    6. 6. Built-In Shortcodes <ul><li>Misc Shortcodes: </li></ul><ul><ul><li>[archives] </li></ul></ul><ul><ul><li>[contact-form] </li></ul></ul><ul><ul><li>[digg] </li></ul></ul><ul><ul><li>[googlemaps] </li></ul></ul><ul><ul><li>[polldaddy] </li></ul></ul><ul><ul><li>[sourcecode][/sourcecode] </li></ul></ul><ul><li>Assortment of Shortcodes for: </li></ul><ul><ul><li>Images </li></ul></ul><ul><ul><li>Videos </li></ul></ul><ul><ul><li>Audio </li></ul></ul>
    7. 7. Using Shortcodes <ul><li>Enclosed/Self-Enclosed </li></ul><ul><li>[shortcode]Some Content[/shortcode] </li></ul><ul><li>[shortcode] </li></ul><ul><li>Attributes </li></ul><ul><li>[shortcode option1=&quot;something&quot; option2=&quot;more&quot;] </li></ul><ul><li>[shortcode option1=&quot;more&quot;]Some Content[/shortcode] </li></ul>
    8. 8. Creating Simple Shortcodes <ul><li>function wpb_shortcode() { </li></ul><ul><li>    return 'Hi Boston WordCamp!'; </li></ul><ul><li>} </li></ul><ul><li>add_shortcode('wpb', 'wpb_shortcode'); </li></ul><ul><li>Now use can use [wpb] in your posts & pages to display the returned content from our wpb_boston function. </li></ul>
    9. 9. Creating Advanced Shortcodes <ul><li>function link_shortcode($atts, $content = null) {     extract(shortcode_atts( </li></ul><ul><li>         array(  </li></ul><ul><li>             'class' => 'link', </li></ul><ul><li>             'href' => '#'  </li></ul><ul><li>         ), $atts </li></ul><ul><li>     )); </li></ul><ul><li>     return '<a href=&quot;'.$href.'&quot; class=&quot;'.$class.'&quot;>'.$content.'</a>'; } add_shortcode('link', 'link_shortcode'); Now use can use [link] in your posts & pages to display the returned content from our link_shortcode function </li></ul>
    10. 10. Real World Examples Turn This Into This via Striking Theme
    11. 11. Examples cont. <ul><li>Buttons </li></ul><ul><li>via ElegantThemes </li></ul><ul><li>Content Boxes </li></ul><ul><li>via J Shortcodes </li></ul>
    12. 12. Examples cont. <ul><li>Icon Lists </li></ul><ul><li>via Showtime Theme </li></ul><ul><li>Columns </li></ul><ul><li>via Awake Theme </li></ul>
    13. 13. Examples cont. <ul><li>Drop Caps </li></ul><ul><li>via Striking Theme </li></ul><ul><li>Quotes </li></ul><ul><li>via Avisio Theme </li></ul>
    14. 14. Examples cont. <ul><li>Pricing Table </li></ul><ul><li>via ElegantThemes </li></ul><ul><li>Author Info </li></ul><ul><li>via HubSpot for WordPress Plugin </li></ul>
    15. 15. Examples cont. <ul><li>Contact Forms </li></ul><ul><li>via inFocus Theme </li></ul><ul><li>Tabs </li></ul><ul><li>via  DynamiX Theme </li></ul>
    16. 16. Other Cool Uses <ul><ul><li>Advertising </li></ul></ul><ul><ul><li>Social Media Buttons </li></ul></ul><ul><ul><li>Calls to Action </li></ul></ul><ul><ul><li>Posts from RSS </li></ul></ul><ul><ul><li>Hiding Private Content </li></ul></ul><ul><ul><li>Displaying Widgets in Content </li></ul></ul>
    17. 17. Potential Pitfalls w/ Shortcodes <ul><ul><li>Themes vs Plugins </li></ul></ul><ul><ul><li>Nesting </li></ul></ul><ul><ul><li>Usability </li></ul></ul>
    18. 18. Making Shortcodes Even Easier <ul><li>Using a UI to manage and insert shortcodes </li></ul><ul><li>via ElegantThemes </li></ul>
    19. 19. Making Shortcodes Even Easier cont. <ul><li>via Striking Theme </li></ul><ul><li>via HubSpot for WordPress Plugin </li></ul>
    20. 20. Shortcode Tips & Tricks <ul><li>The following will execute all shortcodes in a string of text: </li></ul><ul><li>do_shortcode('Text with a [shortcode] in it'); </li></ul><ul><li>Use this to run shortcodes in a text widget: </li></ul><ul><li>add_filter('widget_text', 'do_shortcode'); </li></ul><ul><li>Execute a shortcode anywhere in your template files: </li></ul><ul><li>do_shortcode('[shortcode]'); </li></ul>
    21. 21. Thanks! <ul><li>Jon Bishop </li></ul><ul><li>Web Developer in Boston Area </li></ul><ul><li>WordPress Plugins: </li></ul><ul><ul><li>Socialize </li></ul></ul><ul><ul><li>HubSpot for WordPress </li></ul></ul><ul><li>Website / </li></ul><ul><li>Newsletter / </li></ul><ul><li>Twitter / @JonDBishop </li></ul>