Creating Content With Shortcodes

[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