Successfully reported this slideshow.

WordPress and Shortcodes


Published on

WordPress shortcodes assist in the creation of complex HTML elements and are very easy to use. Most premium themes provide a suite of shortcodes to extend default functionality and empower users to create professional looking content that matches the look and feel of the rest of their site.

Learn More:

Published in: Technology, Business
  • Be the first to comment

WordPress and Shortcodes

  1. 1. WordPress and Shortcodes Creating Better Content  w/ Shortcodes via J Shortcodes
  2. 2. What Is The Problem? <ul><li>WordPress users with minimal HTML experience spend too much time trying to format content. </li></ul>
  3. 3. 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>
  4. 4. Why Are Shortcodes Useful? <ul><ul><li>Easy to use </li></ul></ul><ul><ul><li>Easy to create </li></ul></ul><ul><ul><li>Simplify repetitive tasks </li></ul></ul>
  5. 5. 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>
  6. 6. 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>
  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 WPBoston Meetup!'; </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>         ),  </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>
  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>