Creating Content With Shortcodes
Download as PPT, PDF1 like1,738 views
The document discusses the use of WordPress shortcodes, which help users with minimal HTML experience easily create and format content. It explains what shortcodes are, provides examples of built-in and custom shortcodes, and offers practical tips for their implementation. The document also addresses potential pitfalls and suggests ways to enhance shortcode usability through user interfaces.
![[WordPress Shortcodes] Creating Better Content w/ Shortcodes Boston WordCamp 2011](https://image.slidesharecdn.com/wordcampwordpressandshortcodes-110724140237-phpapp02/85/Creating-Content-With-Shortcodes-1-320.jpg)
![Built-In 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/wordcampwordpressandshortcodes-110724140237-phpapp02/85/Creating-Content-With-Shortcodes-5-320.jpg)
![Built-In WordPress.com Shortcodes Misc Shortcodes: [archives] [contact-form] [digg] [googlemaps] [polldaddy] [sourcecode][/sourcecode] Assortment of Shortcodes for: Images Videos Audio](https://image.slidesharecdn.com/wordcampwordpressandshortcodes-110724140237-phpapp02/85/Creating-Content-With-Shortcodes-6-320.jpg)
![Using Shortcodes Enclosed/Self-Enclosed [shortcode]Some Content[/shortcode] [shortcode] Attributes [shortcode option1="something" option2="more"] [shortcode option1="more"]Some Content[/shortcode]](https://image.slidesharecdn.com/wordcampwordpressandshortcodes-110724140237-phpapp02/85/Creating-Content-With-Shortcodes-7-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.](https://image.slidesharecdn.com/wordcampwordpressandshortcodes-110724140237-phpapp02/85/Creating-Content-With-Shortcodes-8-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/wordcampwordpressandshortcodes-110724140237-phpapp02/85/Creating-Content-With-Shortcodes-9-320.jpg)
![Shortcode Tips & Tricks The following will execute all shortcodes in a string of text: do_shortcode('Text with a [shortcode] in it'); Use this to run shortcodes in a text widget: add_filter('widget_text', 'do_shortcode'); Execute a shortcode anywhere in your template files: do_shortcode('[shortcode]');](https://image.slidesharecdn.com/wordcampwordpressandshortcodes-110724140237-phpapp02/85/Creating-Content-With-Shortcodes-20-320.jpg)
Creating Content With Shortcodes
- 1. [WordPress Shortcodes] Creating Better Content w/ Shortcodes Boston WordCamp 2011
- 2. What Is The Problem? WordPress users with minimal HTML experience spend too much time trying to create and format content.
- 3. Why Are Shortcodes Useful? Easy to manage Easier access to dynamic content Simplify repetitive tasks Make things look pretty
- 4. What Are Shortcodes? Bits of code you use in the WordPress visual editor to generate dynamic content on the front end. HTML: Shortcode: Result:
- 5. Built-In 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.
- 6. Built-In WordPress.com Shortcodes Misc Shortcodes: [archives] [contact-form] [digg] [googlemaps] [polldaddy] [sourcecode][/sourcecode] Assortment of Shortcodes for: Images Videos Audio
- 7. Using Shortcodes Enclosed/Self-Enclosed [shortcode]Some Content[/shortcode] [shortcode] Attributes [shortcode option1="something" option2="more"] [shortcode option1="more"]Some Content[/shortcode]
- 8. 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.
- 9. 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
- 10. Real World Examples Turn This Into This via Striking Theme
- 11. Examples cont. Buttons via ElegantThemes Content Boxes via J Shortcodes
- 12. Examples cont. Icon Lists via Showtime Theme Columns via Awake Theme
- 13. Examples cont. Drop Caps via Striking Theme Quotes via Avisio Theme
- 14. Examples cont. Pricing Table via ElegantThemes Author Info via HubSpot for WordPress Plugin
- 15. Examples cont. Contact Forms via inFocus Theme Tabs via DynamiX Theme
- 16. Other Cool Uses Advertising Social Media Buttons Calls to Action Posts from RSS Hiding Private Content Displaying Widgets in Content
- 17. Potential Pitfalls w/ Shortcodes Themes vs Plugins Nesting Usability
- 18. Making Shortcodes Even Easier Using a UI to manage and insert shortcodes via ElegantThemes
- 19. Making Shortcodes Even Easier cont. via Striking Theme via HubSpot for WordPress Plugin
- 20. Shortcode Tips & Tricks The following will execute all shortcodes in a string of text: do_shortcode('Text with a [shortcode] in it'); Use this to run shortcodes in a text widget: add_filter('widget_text', 'do_shortcode'); Execute a shortcode anywhere in your template files: do_shortcode('[shortcode]');
- 21. Thanks! Jon Bishop Web Developer in Boston Area WordPress Plugins: Socialize HubSpot for WordPress Website / JonBishop.com Newsletter / WPBusiness.info Twitter / @JonDBishop
Editor's Notes
- #2: 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.
- #4: 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
- #5: Shortcodes were added in WordPress 2.5 as an easy way to create macros for use in your content.
- #7: Jetpack Plugin
- #9: You associate your shortcode with a handler using add_shortcode.
- #18: 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