WordCamp Boston 2012 - Creating Content With Shortcodes


Published on

A fresh look at shortcdodes in WordPress and how to use them to create better looking content on your website. We also take a look at an easier way to embed videos and rich media into your site.

Published in: Technology, Business
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
  • Customize title / name
  • WordCamp Boston 2012 - Creating Content With Shortcodes

    1. 1. WordPress [Shortcodes] Prepared for WordCamp Boston on July 14th, 2012 http://bit.ly/wcbos_shortcodesJon Bishop • Web Developer • 77 N. Washington St., 8th Floor, Boston MA 02114 • 617.837.8158
    2. 2. About AMP Agency• Independently-owned, integrated communications agency• Clients Include: Hasbro, Maybelline New York, Samsonite, Intel, Princess Cruises, NFL Players and Ansell Healthcare
    3. 3. What Is The Problem?WordPress users withminimal HTML experiencespend too much time tryingto create and formatcontent.
    4. 4. Why Are Shortcodes Useful?• Easy to manage• Easier access to dynamic content• Simplify repetitive tasks• Make things look pretty
    5. 5. What Are Shortcodes?Bits of code you use in the WordPress visual editor togenerate dynamic content on the front end.HTML:Shortcode:Result:http://codex.wordpress.org/Shortcode
    6. 6. WordPress.org Shortcodes[gallery]The [gallery] shortcode is used in a Post or Page to display a thumbnail galleryof images attached to that post.
    7. 7. WordPress.com Shortcodes Jetpack:isc Shortcodes: •[archives]archives] •[audio] •[blip.tv]contact-form] •[dailymotion]digg] •[digg] •[flickr]googlemaps] •[googlevideo]polldaddy] •[polldaddy]http://en.support.wordpress.com/shortcodes/ •[scribd]sourcecode][/sourcecode]
    8. 8. Using ShortcodesEnclosed/Self-Enclosed[shortcode]Some Content[/shortcode][shortcode]Attributes[shortcode option1="something" option2="more"][shortcode option1="more"]Some Content[/shortcode]http://codex.wordpress.org/Shortcode_API
    9. 9. Creating Simple Shortcodes function wpb_shortcode() { return Hi Boston WordCamp!; } add_shortcode(wpb, wpb_shortcode); Now use can use [wpb] in your posts & pages to display the returned content from our wpb_boston function.http://codex.wordpress.org/Shortcode_API
    10. 10. Creating Advanced Shortcodes function link_shortcode($atts, $content = null) { extract(shortcode_atts( array( class => link, href => # ), $atts )); return <a href=".$href." class=".$class.">.$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
    11. 11. Real World Examples: Before
    12. 12. Real World Examples: After
    13. 13. More Examples ..Buttons Content Boxes
    14. 14. More Examples ..Icon Lists Columns
    15. 15. More Examples ..Drop Caps Quotes
    16. 16. More Examples ..Pricing Table Author Info
    17. 17. More Examples ..Contact Forms Tabs
    18. 18. Favorite Shortcode Pluginshortcodes Ultimate - Enables you to easily create buttons, tabs, boxes,sliders, tooltips and many more elementsttp://wordpress.org/extend/plugins/shortcodes-ultimate/Shortcodes - Similar to Shortcodes Ultimate with additional style optionsttp://wordpress.org/extend/plugins/j-shortcodes/hortcodes Pro -Allows for quick and easy creation of WordPress shortcodesfrom the WordPress adminttp://wordpress.org/extend/plugins/shortcodes-pro/
    19. 19. Other Cool Uses• Advertising• Social Media Buttons• Calls to Action• Posts from RSS• Hiding Private Content• Displaying Widgets in Content
    20. 20. Be Careful!• Themes vs Plugins• Nesting• Usability
    21. 21. Making Shortcodes Easiersing a UI to manage and insert shortcodes
    22. 22. Making Shortcodes Easier ..
    23. 23. Shortcode Tips & Trickshe following will execute all shortcodes in a string of text:o_shortcode(Text with a [shortcode] in it);un shortcodes in a text widget:dd_filter(widget_text, do_shortcode);un shortcodes in comment text:
    24. 24. Embedsmbedding javascript into your posts/pages is hard!avascript embed codes wont work on WordPress.comavascript embed codes sometimes work in the self-hostedHTML editorhttp://codex.wordpress.org/Embeds
    25. 25. Using oEmbedll you need to do to embed something into a post or page isto post the URL to it into your content area. Make sure thatthe URL is on its own line and not hyperlinked (clickablewhen viewing the post).dding Support For An oEmbed-Enabled Sitep_oembed_add_provider()http://codex.wordpress.org/Embedsdding Support For A Non-oEmbed Site
    26. 26. Using oEmbed ..heck the "Auto-embeds" check box in Administration> Settings > Media SubPanel.roviders • Revision3 • Scribd • Photobucket • PollDaddyouTube • WordPress.tvimeo • SmugMug • FunnyOrDie.comailyMotion • Twitterhttp://codex.wordpress.org/Embedslip.tv
    27. 27. Boston WordPress Meetupe are currently the 2nd largest WordPress meetup in theworld with 1390+ memberse are growing every day and our current team can nothandle the workloade are looking for speakers, sponsors and supporterslease email Kurt (keng@bostonwp.org) and Jonhttp://bostonwp.org(jbishop@bostonwp.org) if interested
    28. 28. Thanks!Jon BishopWeb Developer @ AMP AgencyWebsite / JonBishop.comTwitter / @JonDBishop