Prepared for WordCamp Boston on July 14th, 2012

http://bit.ly/wcbos_shortcodes

Jon Bishop • Web Developer • 77 N. Washington St., 8th Floor, Boston MA 02114 • 617.837.8158

WordPress [Shortcodes]

About AMP Agency

• Independently-owned, integrated communications agency

• Clients Include: Hasbro, Maybelline New York, Samsonite, Intel, Princess Cruises, NFL Players and Ansell Healthcare

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:

http://codex.wordpress.org/Shortcode

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.

WordPress.com Shortcodes

Misc Shortcodes:

•[archives]

•[contact-form]

•[digg]

•[googlemaps]

•[polldaddy]

•[sourcecode][/sourcecode]

•[gist]

Assortment of Shortcodes for:

•Images

•Videos

•Audio

http://en.support.wordpress.com/shortcodes/

Jetpack:

•[archives]

•[audio]

•[blip.tv]

•[dailymotion]

•[digg]

•[flickr]

•[googlevideo]

•[polldaddy]

•[scribd]

•[slideshare]

•[soundcloud]

•[vimeo ]

•[youtube ]

•[googlemaps]

Using Shortcodes

Enclosed/Self-Enclosed

[shortcode]Some Content[/shortcode]

[shortcode]

Attributes

[shortcode option1="something" option2="more"]

[shortcode option1="more"]Some Content[/shortcode]

http://codex.wordpress.org/Shortcode_API

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.

http://codex.wordpress.org/Shortcode_API

Creating Advanced Shortcodesfunction 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: Before

Real World Examples: After

More Examples ..

Buttons

Content Boxes

More Examples ..

Icon Lists

Columns

More Examples ..

Drop Caps

Quotes

More Examples ..

Pricing Table

Author Info

More Examples ..

Contact Forms

Tabs

Favorite Shortcode Plugins

Shortcodes Ultimate - Enables you to easily create buttons, tabs, boxes, sliders, tooltips and many more elements

•http://wordpress.org/extend/plugins/shortcodes-ultimate/

J Shortcodes - Similar to Shortcodes Ultimate with additional style options

•http://wordpress.org/extend/plugins/j-shortcodes/

Shortcodes Pro -Allows for quick and easy creation of WordPress shortcodes from the WordPress admin

•http://wordpress.org/extend/plugins/shortcodes-pro/

Shortcode Reference - Easily reference all available shortcodes

•http://wordpress.org/extend/plugins/shortcode-reference/

Other Cool Uses

• Advertising

• Social Media Buttons

• Calls to Action

• Posts from RSS

• Hiding Private Content

• Displaying Widgets in Content

Be Careful!

• Themes vs Plugins

• Nesting

• Usability

Making Shortcodes Easier

Using a UI to manage and insert shortcodes

Making Shortcodes Easier ..

Shortcode Tips & Tricks

The following will execute all shortcodes in a string of text:do_shortcode('Text with a [shortcode] in it');

Run shortcodes in a text widget:add_filter('widget_text', 'do_shortcode');

Run shortcodes in comment text: add_filter('comment_text', 'do_shortcode');

Run shortcodes in excerpt text: add_filter( 'the_excerpt', 'do_shortcode');

Embeds

Embedding javascript into your posts/pages is hard!

•Javascript embed codes won't work on WordPress.com•Javascript embed codes sometimes work in the self-hosted HTML editor

http://codex.wordpress.org/Embeds

Using oEmbed

All you need to do to embed something into a post or page is to post the URL to it into your content area. Make sure that the URL is on its own line and not hyperlinked (clickable when viewing the post).

Adding Support For An oEmbed-Enabled Sitewp_oembed_add_provider()

Adding Support For A Non-oEmbed Sitewp_embed_register_handler()

http://codex.wordpress.org/Embeds

Using oEmbed ..

Check the "Auto-embeds" check box in Administration > Settings > Media SubPanel.

Providers

•YouTube

•Vimeo

•DailyMotion

•blip.tv

•Flickr

•Viddler

•Hulu

•Qik

• Revision3

• Scribd

• Photobucket

• PollDaddy

• WordPress.tv

• SmugMug

• FunnyOrDie.com

• Twitterhttp://codex.wordpress.org/Embeds

Boston WordPress Meetup

We are currently the 2nd largest WordPress meetup in the world with 1390+ members

We are growing every day and our current team can not handle the workload

We are looking for speakers, sponsors and supporters•Please email Kurt (keng@bostonwp.org) and Jon (jbishop@bostonwp.org) if interested

http://bostonwp.org

Thanks!

Jon Bishop

Web Developer @ AMP Agency

Website / JonBishop.com

Twitter / @JonDBishop