creating content with shortcodes
DESCRIPTION
How to create better looking content on your WordPress site. For more information and relevant links check out http://www.jonbishop.com/2011/06/wordpress-shortcodes/TRANSCRIPT
![Page 1: Creating Content With Shortcodes](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b5ea9c4a79591a7f8b4768/html5/thumbnails/1.jpg)
[WordPress Shortcodes]
Creating Better Content w/ Shortcodes
Boston WordCamp 2011
![Page 2: Creating Content With Shortcodes](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b5ea9c4a79591a7f8b4768/html5/thumbnails/2.jpg)
What Is The Problem?
WordPress users with minimal HTML experience spend too much time trying to create and format content.
![Page 3: Creating Content With Shortcodes](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b5ea9c4a79591a7f8b4768/html5/thumbnails/3.jpg)
Why Are Shortcodes Useful?
• Easy to manage• Easier access to dynamic content• Simplify repetitive tasks• Make things look pretty
![Page 4: Creating Content With Shortcodes](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b5ea9c4a79591a7f8b4768/html5/thumbnails/4.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:
![Page 5: Creating Content With Shortcodes](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b5ea9c4a79591a7f8b4768/html5/thumbnails/5.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.
![Page 6: Creating Content With Shortcodes](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b5ea9c4a79591a7f8b4768/html5/thumbnails/6.jpg)
Built-In WordPress.com Shortcodes
Misc Shortcodes:• [archives]• [contact-form]• [digg]• [googlemaps]• [polldaddy]• [sourcecode][/sourcecode]
Assortment of Shortcodes for:• Images• Videos• Audio
![Page 7: Creating Content With Shortcodes](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b5ea9c4a79591a7f8b4768/html5/thumbnails/7.jpg)
Using Shortcodes
Enclosed/Self-Enclosed
[shortcode]Some Content[/shortcode]
[shortcode]
Attributes
[shortcode option1="something" option2="more"]
[shortcode option1="more"]Some Content[/shortcode]
![Page 8: Creating Content With Shortcodes](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b5ea9c4a79591a7f8b4768/html5/thumbnails/8.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.
![Page 9: Creating Content With Shortcodes](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b5ea9c4a79591a7f8b4768/html5/thumbnails/9.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
![Page 10: Creating Content With Shortcodes](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b5ea9c4a79591a7f8b4768/html5/thumbnails/10.jpg)
Real World Examples
Turn This
Into This
via Striking Theme
![Page 11: Creating Content With Shortcodes](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b5ea9c4a79591a7f8b4768/html5/thumbnails/11.jpg)
Examples cont.
Buttons
via ElegantThemes
Content Boxes
via J Shortcodes
![Page 12: Creating Content With Shortcodes](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b5ea9c4a79591a7f8b4768/html5/thumbnails/12.jpg)
Examples cont.
Icon Lists
via Showtime Theme
Columns
via Awake Theme
![Page 13: Creating Content With Shortcodes](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b5ea9c4a79591a7f8b4768/html5/thumbnails/13.jpg)
Examples cont.
Drop Caps
via Striking Theme
Quotes
via Avisio Theme
![Page 14: Creating Content With Shortcodes](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b5ea9c4a79591a7f8b4768/html5/thumbnails/14.jpg)
Examples cont.
Pricing Table
via ElegantThemes
Author Info
via HubSpot for WordPress Plugin
![Page 15: Creating Content With Shortcodes](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b5ea9c4a79591a7f8b4768/html5/thumbnails/15.jpg)
Examples cont.
Contact Forms
via inFocus Theme
Tabs
via DynamiX Theme
![Page 16: Creating Content With Shortcodes](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b5ea9c4a79591a7f8b4768/html5/thumbnails/16.jpg)
Other Cool Uses
• Advertising• Social Media Buttons• Calls to Action• Posts from RSS• Hiding Private Content• Displaying Widgets in Content
![Page 17: Creating Content With Shortcodes](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b5ea9c4a79591a7f8b4768/html5/thumbnails/17.jpg)
Potential Pitfalls w/ Shortcodes
• Themes vs Plugins• Nesting• Usability
![Page 18: Creating Content With Shortcodes](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b5ea9c4a79591a7f8b4768/html5/thumbnails/18.jpg)
Making Shortcodes Even Easier
Using a UI to manage and insert shortcodes
via ElegantThemes
![Page 19: Creating Content With Shortcodes](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b5ea9c4a79591a7f8b4768/html5/thumbnails/19.jpg)
Making Shortcodes Even Easier cont.
via Striking Theme
via HubSpot for WordPress Plugin
![Page 20: Creating Content With Shortcodes](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b5ea9c4a79591a7f8b4768/html5/thumbnails/20.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]');
![Page 21: Creating Content With Shortcodes](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b5ea9c4a79591a7f8b4768/html5/thumbnails/21.jpg)
Thanks!
Jon BishopWeb Developer in Boston Area
WordPress Plugins:• Socialize• HubSpot for WordPress
Website / JonBishop.comNewsletter / WPBusiness.info
Twitter / @JonDBishop