WordCamp Boston 2012 - Creating Content With Shortcodes
Download as PPT, PDF1 like847 views
The document discusses the benefits and functionalities of using shortcodes in WordPress, highlighting their ease of use for users with minimal HTML experience. It explains how to create simple and advanced shortcodes and provides examples of their applications in real-world scenarios. Additionally, it mentions popular shortcode plugins and offers tips for effective shortcode usage.
![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](https://image.slidesharecdn.com/wordcampboston2012-shortcodes-120716143457-phpapp01/85/WordCamp-Boston-2012-Creating-Content-With-Shortcodes-1-320.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.](https://image.slidesharecdn.com/wordcampboston2012-shortcodes-120716143457-phpapp01/85/WordCamp-Boston-2012-Creating-Content-With-Shortcodes-6-320.jpg)
![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]](https://image.slidesharecdn.com/wordcampboston2012-shortcodes-120716143457-phpapp01/85/WordCamp-Boston-2012-Creating-Content-With-Shortcodes-7-320.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](https://image.slidesharecdn.com/wordcampboston2012-shortcodes-120716143457-phpapp01/85/WordCamp-Boston-2012-Creating-Content-With-Shortcodes-8-320.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](https://image.slidesharecdn.com/wordcampboston2012-shortcodes-120716143457-phpapp01/85/WordCamp-Boston-2012-Creating-Content-With-Shortcodes-9-320.jpg)
![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](https://image.slidesharecdn.com/wordcampboston2012-shortcodes-120716143457-phpapp01/85/WordCamp-Boston-2012-Creating-Content-With-Shortcodes-10-320.jpg)
![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:](https://image.slidesharecdn.com/wordcampboston2012-shortcodes-120716143457-phpapp01/85/WordCamp-Boston-2012-Creating-Content-With-Shortcodes-23-320.jpg)
WordCamp Boston 2012 - Creating Content With Shortcodes
- 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
Editor's Notes
- #2: Customize title / name