Successfully reported this slideshow.

WordPress and Shortcodes

4,096 views

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: http://www.jonbishop.com/2011/06/wordpress-shortcodes/

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 WordPress.com 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 WordPress.org 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 / JonBishop.com </li></ul><ul><li>Newsletter / WPBusiness.info </li></ul><ul><li>Twitter / @JonDBishop </li></ul>

×