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