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.

1. WordPress [Shortcodes]
Prepared for WordCamp Boston on July 14th, 2012
http://bit.ly/wcbos_shortcodes
Jon Bishop • Web Developer • 77 N. Washington St., 8th Floor, Boston MA 02114 • 617.837.8158

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. What Is The Problem?
WordPress users with
minimal HTML experience
spend too much time trying
to create and format
content.

4. Why Are Shortcodes Useful?
• Easy to manage
• Easier access to dynamic content
• Simplify repetitive tasks
• Make things look pretty

5. What Are Shortcodes?
Bits of code you use in the WordPress visual editor to
generate dynamic content on the front end.
HTML:
Shortcode:
Result:
http://codex.wordpress.org/Shortcode

6. WordPress.org Shortcodes
[gallery]
The [gallery] shortcode is used in a Post or Page to display a thumbnail gallery
of images attached to that post.

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. Using Shortcodes
Enclosed/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. 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. 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. Real World Examples: Before

12. Real World Examples: After

13. More Examples ..
Buttons
Content Boxes

14. More Examples ..
Icon Lists
Columns

15. More Examples ..
Drop Caps
Quotes

16. More Examples ..
Pricing Table
Author Info

17. More Examples ..
Contact Forms
Tabs

18. Favorite Shortcode Plugins
hortcodes Ultimate - Enables you to easily create buttons, tabs, boxes,
sliders, tooltips and many more elements
ttp://wordpress.org/extend/plugins/shortcodes-ultimate/
Shortcodes - Similar to Shortcodes Ultimate with additional style options
ttp://wordpress.org/extend/plugins/j-shortcodes/
hortcodes Pro -Allows for quick and easy creation of WordPress shortcodes
from the WordPress admin
ttp://wordpress.org/extend/plugins/shortcodes-pro/

19. Other Cool Uses
• Advertising
• Social Media Buttons
• Calls to Action
• Posts from RSS
• Hiding Private Content
• Displaying Widgets in Content

20. Be Careful!
• Themes vs Plugins
• Nesting
• Usability

21. Making Shortcodes Easier
sing a UI to manage and insert shortcodes

22. Making Shortcodes Easier ..

23. Shortcode Tips & Tricks
he 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. Embeds
mbedding javascript into your posts/pages is hard!
avascript embed codes won't work on WordPress.com
avascript embed codes sometimes work in the self-hosted
HTML editor
http://codex.wordpress.org/Embeds

25. Using oEmbed
ll you need to do to embed something into a post or page is
to post the URL to it into your content area. Make sure that
the URL is on its own line and not hyperlinked (clickable
when viewing the post).
dding Support For An oEmbed-Enabled Site
p_oembed_add_provider()
http://codex.wordpress.org/Embeds
dding Support For A Non-oEmbed Site

26. Using oEmbed ..
heck the "Auto-embeds" check box in Administration
> Settings > Media SubPanel.
roviders • Revision3
• Scribd
• Photobucket
• PollDaddy
ouTube
• WordPress.tv
imeo • SmugMug
• FunnyOrDie.com
ailyMotion • Twitter
http://codex.wordpress.org/Embeds
lip.tv

27. Boston WordPress Meetup
e are currently the 2nd largest WordPress meetup in the
world with 1390+ members
e are growing every day and our current team can not
handle the workload
e are looking for speakers, sponsors and supporters
lease email Kurt (keng@bostonwp.org) and Jon
http://bostonwp.org
(jbishop@bostonwp.org) if interested

28. Thanks!
Jon Bishop
Web Developer @ AMP Agency
Website / JonBishop.com
Twitter / @JonDBishop