wordcamp boston 2012 - creating content with shortcodes
DESCRIPTION
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.TRANSCRIPT
![Page 1: WordCamp Boston 2012 - Creating Content With Shortcodes](https://reader036.vdocuments.net/reader036/viewer/2022081516/554bb07cb4c905ae618b588a/html5/thumbnails/1.jpg)
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
WordPress [Shortcodes]
![Page 2: WordCamp Boston 2012 - Creating Content With Shortcodes](https://reader036.vdocuments.net/reader036/viewer/2022081516/554bb07cb4c905ae618b588a/html5/thumbnails/2.jpg)
About AMP Agency
• Independently-owned, integrated communications agency
• Clients Include: Hasbro, Maybelline New York, Samsonite, Intel, Princess Cruises, NFL Players and Ansell Healthcare
![Page 3: WordCamp Boston 2012 - Creating Content With Shortcodes](https://reader036.vdocuments.net/reader036/viewer/2022081516/554bb07cb4c905ae618b588a/html5/thumbnails/3.jpg)
What Is The Problem?
WordPress users with minimal HTML experience spend too much time trying to create and format content.
![Page 4: WordCamp Boston 2012 - Creating Content With Shortcodes](https://reader036.vdocuments.net/reader036/viewer/2022081516/554bb07cb4c905ae618b588a/html5/thumbnails/4.jpg)
Why Are Shortcodes Useful?
• Easy to manage
• Easier access to dynamic content
• Simplify repetitive tasks
• Make things look pretty
![Page 5: WordCamp Boston 2012 - Creating Content With Shortcodes](https://reader036.vdocuments.net/reader036/viewer/2022081516/554bb07cb4c905ae618b588a/html5/thumbnails/5.jpg)
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
![Page 6: WordCamp Boston 2012 - Creating Content With Shortcodes](https://reader036.vdocuments.net/reader036/viewer/2022081516/554bb07cb4c905ae618b588a/html5/thumbnails/6.jpg)
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.
![Page 7: WordCamp Boston 2012 - Creating Content With Shortcodes](https://reader036.vdocuments.net/reader036/viewer/2022081516/554bb07cb4c905ae618b588a/html5/thumbnails/7.jpg)
WordPress.com Shortcodes
Misc Shortcodes:
•[archives]
•[contact-form]
•[digg]
•[googlemaps]
•[polldaddy]
•[sourcecode][/sourcecode]
•[gist]
Assortment of Shortcodes for:
•Images
•Videos
•Audio
http://en.support.wordpress.com/shortcodes/
Jetpack:
•[archives]
•[audio]
•[blip.tv]
•[dailymotion]
•[digg]
•[flickr]
•[googlevideo]
•[polldaddy]
•[scribd]
•[slideshare]
•[soundcloud]
•[vimeo ]
•[youtube ]
•[googlemaps]
![Page 8: WordCamp Boston 2012 - Creating Content With Shortcodes](https://reader036.vdocuments.net/reader036/viewer/2022081516/554bb07cb4c905ae618b588a/html5/thumbnails/8.jpg)
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
![Page 9: WordCamp Boston 2012 - Creating Content With Shortcodes](https://reader036.vdocuments.net/reader036/viewer/2022081516/554bb07cb4c905ae618b588a/html5/thumbnails/9.jpg)
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
![Page 10: WordCamp Boston 2012 - Creating Content With Shortcodes](https://reader036.vdocuments.net/reader036/viewer/2022081516/554bb07cb4c905ae618b588a/html5/thumbnails/10.jpg)
Creating Advanced Shortcodesfunction 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
![Page 11: WordCamp Boston 2012 - Creating Content With Shortcodes](https://reader036.vdocuments.net/reader036/viewer/2022081516/554bb07cb4c905ae618b588a/html5/thumbnails/11.jpg)
Real World Examples: Before
![Page 12: WordCamp Boston 2012 - Creating Content With Shortcodes](https://reader036.vdocuments.net/reader036/viewer/2022081516/554bb07cb4c905ae618b588a/html5/thumbnails/12.jpg)
Real World Examples: After
![Page 13: WordCamp Boston 2012 - Creating Content With Shortcodes](https://reader036.vdocuments.net/reader036/viewer/2022081516/554bb07cb4c905ae618b588a/html5/thumbnails/13.jpg)
More Examples ..
Buttons
Content Boxes
![Page 14: WordCamp Boston 2012 - Creating Content With Shortcodes](https://reader036.vdocuments.net/reader036/viewer/2022081516/554bb07cb4c905ae618b588a/html5/thumbnails/14.jpg)
More Examples ..
Icon Lists
Columns
![Page 15: WordCamp Boston 2012 - Creating Content With Shortcodes](https://reader036.vdocuments.net/reader036/viewer/2022081516/554bb07cb4c905ae618b588a/html5/thumbnails/15.jpg)
More Examples ..
Drop Caps
Quotes
![Page 16: WordCamp Boston 2012 - Creating Content With Shortcodes](https://reader036.vdocuments.net/reader036/viewer/2022081516/554bb07cb4c905ae618b588a/html5/thumbnails/16.jpg)
More Examples ..
Pricing Table
Author Info
![Page 17: WordCamp Boston 2012 - Creating Content With Shortcodes](https://reader036.vdocuments.net/reader036/viewer/2022081516/554bb07cb4c905ae618b588a/html5/thumbnails/17.jpg)
More Examples ..
Contact Forms
Tabs
![Page 18: WordCamp Boston 2012 - Creating Content With Shortcodes](https://reader036.vdocuments.net/reader036/viewer/2022081516/554bb07cb4c905ae618b588a/html5/thumbnails/18.jpg)
Favorite Shortcode Plugins
Shortcodes Ultimate - Enables you to easily create buttons, tabs, boxes, sliders, tooltips and many more elements
•http://wordpress.org/extend/plugins/shortcodes-ultimate/
J Shortcodes - Similar to Shortcodes Ultimate with additional style options
•http://wordpress.org/extend/plugins/j-shortcodes/
Shortcodes Pro -Allows for quick and easy creation of WordPress shortcodes from the WordPress admin
•http://wordpress.org/extend/plugins/shortcodes-pro/
Shortcode Reference - Easily reference all available shortcodes
•http://wordpress.org/extend/plugins/shortcode-reference/
![Page 19: WordCamp Boston 2012 - Creating Content With Shortcodes](https://reader036.vdocuments.net/reader036/viewer/2022081516/554bb07cb4c905ae618b588a/html5/thumbnails/19.jpg)
Other Cool Uses
• Advertising
• Social Media Buttons
• Calls to Action
• Posts from RSS
• Hiding Private Content
• Displaying Widgets in Content
![Page 20: WordCamp Boston 2012 - Creating Content With Shortcodes](https://reader036.vdocuments.net/reader036/viewer/2022081516/554bb07cb4c905ae618b588a/html5/thumbnails/20.jpg)
Be Careful!
• Themes vs Plugins
• Nesting
• Usability
![Page 21: WordCamp Boston 2012 - Creating Content With Shortcodes](https://reader036.vdocuments.net/reader036/viewer/2022081516/554bb07cb4c905ae618b588a/html5/thumbnails/21.jpg)
Making Shortcodes Easier
Using a UI to manage and insert shortcodes
![Page 22: WordCamp Boston 2012 - Creating Content With Shortcodes](https://reader036.vdocuments.net/reader036/viewer/2022081516/554bb07cb4c905ae618b588a/html5/thumbnails/22.jpg)
Making Shortcodes Easier ..
![Page 23: WordCamp Boston 2012 - Creating Content With Shortcodes](https://reader036.vdocuments.net/reader036/viewer/2022081516/554bb07cb4c905ae618b588a/html5/thumbnails/23.jpg)
Shortcode Tips & Tricks
The following will execute all shortcodes in a string of text:do_shortcode('Text with a [shortcode] in it');
Run shortcodes in a text widget:add_filter('widget_text', 'do_shortcode');
Run shortcodes in comment text: add_filter('comment_text', 'do_shortcode');
Run shortcodes in excerpt text: add_filter( 'the_excerpt', 'do_shortcode');
![Page 24: WordCamp Boston 2012 - Creating Content With Shortcodes](https://reader036.vdocuments.net/reader036/viewer/2022081516/554bb07cb4c905ae618b588a/html5/thumbnails/24.jpg)
Embeds
Embedding javascript into your posts/pages is hard!
•Javascript embed codes won't work on WordPress.com•Javascript embed codes sometimes work in the self-hosted HTML editor
http://codex.wordpress.org/Embeds
![Page 25: WordCamp Boston 2012 - Creating Content With Shortcodes](https://reader036.vdocuments.net/reader036/viewer/2022081516/554bb07cb4c905ae618b588a/html5/thumbnails/25.jpg)
Using oEmbed
All 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).
Adding Support For An oEmbed-Enabled Sitewp_oembed_add_provider()
Adding Support For A Non-oEmbed Sitewp_embed_register_handler()
http://codex.wordpress.org/Embeds
![Page 26: WordCamp Boston 2012 - Creating Content With Shortcodes](https://reader036.vdocuments.net/reader036/viewer/2022081516/554bb07cb4c905ae618b588a/html5/thumbnails/26.jpg)
Using oEmbed ..
Check the "Auto-embeds" check box in Administration > Settings > Media SubPanel.
Providers
•YouTube
•Vimeo
•DailyMotion
•blip.tv
•Flickr
•Viddler
•Hulu
•Qik
• Revision3
• Scribd
• Photobucket
• PollDaddy
• WordPress.tv
• SmugMug
• FunnyOrDie.com
• Twitterhttp://codex.wordpress.org/Embeds
![Page 27: WordCamp Boston 2012 - Creating Content With Shortcodes](https://reader036.vdocuments.net/reader036/viewer/2022081516/554bb07cb4c905ae618b588a/html5/thumbnails/27.jpg)
Boston WordPress Meetup
We are currently the 2nd largest WordPress meetup in the world with 1390+ members
We are growing every day and our current team can not handle the workload
We are looking for speakers, sponsors and supporters•Please email Kurt ([email protected]) and Jon ([email protected]) if interested
http://bostonwp.org
![Page 28: WordCamp Boston 2012 - Creating Content With Shortcodes](https://reader036.vdocuments.net/reader036/viewer/2022081516/554bb07cb4c905ae618b588a/html5/thumbnails/28.jpg)
Thanks!
Jon Bishop
Web Developer @ AMP Agency
Website / JonBishop.com
Twitter / @JonDBishop