WordPress and Shortcodes
Download as PPT, PDF2 likes2,723 views
The document discusses the use of shortcodes in WordPress, highlighting their ease of use for users with minimal HTML experience to format content efficiently. It explains different types of shortcodes, such as built-in options for images and galleries, and provides examples of how to create both simple and advanced shortcodes. Additionally, the document addresses potential pitfalls and tips for managing shortcodes effectively through user interfaces.
![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/wordpressandshortcodes-110627214435-phpapp02/85/WordPress-and-Shortcodes-5-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/wordpressandshortcodes-110627214435-phpapp02/85/WordPress-and-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/wordpressandshortcodes-110627214435-phpapp02/85/WordPress-and-Shortcodes-7-320.jpg)
![Creating Simple Shortcodes function wpb_shortcode() { return 'Hi WPBoston Meetup!'; } 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/wordpressandshortcodes-110627214435-phpapp02/85/WordPress-and-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/wordpressandshortcodes-110627214435-phpapp02/85/WordPress-and-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/wordpressandshortcodes-110627214435-phpapp02/85/WordPress-and-Shortcodes-20-320.jpg)
WordPress and Shortcodes
- 1. WordPress and Shortcodes Creating Better Content w/ Shortcodes via J Shortcodes
- 2. What Is The Problem? WordPress users with minimal HTML experience spend too much time trying to format content.
- 3. What Are Shortcodes? Bits of code you use in the WordPress visual editor to generate dynamic content on the front end. HTML: Shortcode: Result:
- 4. Why Are Shortcodes Useful? Easy to use Easy to create Simplify repetitive tasks
- 5. Built-In WordPress.com Shortcodes Misc Shortcodes: [archives] [contact-form] [digg] [googlemaps] [polldaddy] [sourcecode][/sourcecode] Assortment of Shortcodes for: Images Videos Audio
- 6. 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.
- 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 WPBoston Meetup!'; } 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
- 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: Shortcodes were added in WordPress 2.5 as an easy way to create macros for use in your content.
- #5: 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
- #6: 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