wordpress and shortcodes
DESCRIPTION
WordPress shortcodes assist in the creation of complex HTML elements and are very easy to use. Most premium themes provide a suite of shortcodes to extend default functionality and empower users to create professional looking content that matches the look and feel of the rest of their site. Learn More: http://www.jonbishop.com/2011/06/wordpress-shortcodes/TRANSCRIPT
WordPress and Shortcodes
Creating Better Content w/ Shortcodes
via J Shortcodes
What Is The Problem?
WordPress users with minimal HTML experience spend too much time trying to format content.
What Are Shortcodes?
Bits of code you use in the WordPress visual editor to generate dynamic content on the front end.
HTML:
Shortcode:
Result:
Why Are Shortcodes Useful?
• Easy to use• Easy to create• Simplify repetitive tasks
Built-In WordPress.com Shortcodes
Misc Shortcodes:• [archives]• [contact-form]• [digg]• [googlemaps]• [polldaddy]• [sourcecode][/sourcecode]
Assortment of Shortcodes for:• Images• Videos• Audio
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.
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 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.
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
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