WordPress and Shortcodes Creating Better Content  w/ Shortcodes via J Shortcodes
What Is The Problem? <ul><li>WordPress users with minimal HTML experience spend too much time trying to format content. </...
What Are Shortcodes? <ul><li>Bits of code you use in the WordPress visual editor to generate dynamic content on the front ...
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>Si...
Built-In WordPress.com Shortcodes <ul><li>Misc Shortcodes: </li></ul><ul><ul><li>[archives] </li></ul></ul><ul><ul><li>[co...
Built-In WordPress.org Shortcodes <ul><li>[gallery] </li></ul><ul><li>The [gallery] shortcode is used in a Post or Page to...
Using Shortcodes <ul><li>Enclosed/Self-Enclosed </li></ul><ul><li>[shortcode]Some Content[/shortcode] </li></ul><ul><li>[s...
Creating Simple Shortcodes <ul><li>function wpb_shortcode() { </li></ul><ul><li>     return 'Hi WPBoston Meetup!'; </li></...
Creating Advanced Shortcodes <ul><li>function link_shortcode($atts, $content = null) {     extract(shortcode_atts( </li></...
Real World Examples Turn This Into This via Striking Theme
Examples cont. <ul><li>Buttons </li></ul><ul><li>via ElegantThemes </li></ul><ul><li>Content Boxes </li></ul><ul><li>via J...
Examples cont. <ul><li>Icon Lists </li></ul><ul><li>via Showtime Theme </li></ul><ul><li>Columns </li></ul><ul><li>via Awa...
Examples cont. <ul><li>Drop Caps </li></ul><ul><li>via Striking Theme </li></ul><ul><li>Quotes </li></ul><ul><li>via Avisi...
Examples cont. <ul><li>Pricing Table </li></ul><ul><li>via ElegantThemes </li></ul><ul><li>Author Info </li></ul><ul><li>v...
Examples cont. <ul><li>Contact Forms </li></ul><ul><li>via inFocus Theme </li></ul><ul><li>Tabs </li></ul><ul><li>via  Dyn...
Other Cool Uses <ul><ul><li>Advertising </li></ul></ul><ul><ul><li>Social Media Buttons </li></ul></ul><ul><ul><li>Calls t...
Potential Pitfalls w/ Shortcodes <ul><ul><li>Themes vs Plugins </li></ul></ul><ul><ul><li>Nesting </li></ul></ul><ul><ul><...
Making Shortcodes Even Easier <ul><li>Using a UI to manage and insert shortcodes </li></ul><ul><li>via ElegantThemes </li>...
Making Shortcodes Even Easier cont. <ul><li>via Striking Theme </li></ul><ul><li>via HubSpot for WordPress Plugin </li></ul>
Shortcode Tips & Tricks <ul><li>The following will execute all shortcodes in a string of text: </li></ul><ul><li>do_shortc...
Thanks! <ul><li>Jon Bishop </li></ul><ul><li>Web Developer in Boston Area </li></ul><ul><li>WordPress Plugins: </li></ul><...
Upcoming SlideShare
Loading in...5
×

WordPress and Shortcodes

3,273

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
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,273
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
25
Comments
0
Likes
2
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.
  • Shortcodes were added in WordPress 2.5 as an easy way to create macros for use in your content.
  • 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
  • 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
  • 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>
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×