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
[WordPress Shortcodes]
Creating Better Content w/ Shortcodes
Boston WordCamp 2011
What Is The Problem?
WordPress users with minimal HTML experience spend too much time trying to create and format content.
Why Are Shortcodes Useful?
• Easy to manage• Easier access to dynamic content• Simplify repetitive tasks• Make things look pretty
What Are Shortcodes?
Bits of code you use in the WordPress visual editor to generate dynamic content on the front end.
HTML:
Shortcode:
Result:
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.
Built-In WordPress.com Shortcodes
Misc Shortcodes:• [archives]• [contact-form]• [digg]• [googlemaps]• [polldaddy]• [sourcecode][/sourcecode]
Assortment of Shortcodes for:• Images• Videos• Audio
Using Shortcodes
Enclosed/Self-Enclosed
[shortcode]Some Content[/shortcode]
[shortcode]
Attributes
[shortcode option1="something" option2="more"]
[shortcode option1="more"]Some Content[/shortcode]
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.
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
Real World Examples
Turn This
Into This
via Striking Theme
Examples cont.
Buttons
via ElegantThemes
Content Boxes
via J Shortcodes
Examples cont.
Icon Lists
via Showtime Theme
Columns
via Awake Theme
Examples cont.
Drop Caps
via Striking Theme
Quotes
via Avisio Theme
Examples cont.
Pricing Table
via ElegantThemes
Author Info
via HubSpot for WordPress Plugin
Examples cont.
Contact Forms
via inFocus Theme
Tabs
via DynamiX Theme
Other Cool Uses
• Advertising• Social Media Buttons• Calls to Action• Posts from RSS• Hiding Private Content• Displaying Widgets in Content
Potential Pitfalls w/ Shortcodes
• Themes vs Plugins• Nesting• Usability
Making Shortcodes Even Easier
Using a UI to manage and insert shortcodes
via ElegantThemes
Making Shortcodes Even Easier cont.
via Striking Theme
via HubSpot for WordPress Plugin
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]');
Thanks!
Jon BishopWeb Developer in Boston Area
WordPress Plugins:• Socialize• HubSpot for WordPress
Website / JonBishop.comNewsletter / WPBusiness.info
Twitter / @JonDBishop