• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
WordCamp Boston 2012 - Creating Content With Shortcodes
 

WordCamp Boston 2012 - Creating Content With Shortcodes

on

  • 1,100 views

A fresh look at shortcdodes in WordPress and how to use them to create better looking content on your website. We also take a look at an easier way to embed videos and rich media into your site.

A fresh look at shortcdodes in WordPress and how to use them to create better looking content on your website. We also take a look at an easier way to embed videos and rich media into your site.

Statistics

Views

Total Views
1,100
Views on SlideShare
1,099
Embed Views
1

Actions

Likes
1
Downloads
11
Comments
0

1 Embed 1

https://si0.twimg.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Customize title / name

WordCamp Boston 2012 - Creating Content With Shortcodes WordCamp Boston 2012 - Creating Content With Shortcodes Presentation Transcript

  • WordPress [Shortcodes] Prepared for WordCamp Boston on July 14th, 2012 http://bit.ly/wcbos_shortcodesJon Bishop • Web Developer • 77 N. Washington St., 8th Floor, Boston MA 02114 • 617.837.8158
  • 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 withminimal HTML experiencespend too much time tryingto create and formatcontent.
  • 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 togenerate 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 galleryof images attached to that post.
  • WordPress.com Shortcodes Jetpack:isc Shortcodes: •[archives]archives] •[audio] •[blip.tv]contact-form] •[dailymotion]digg] •[digg] •[flickr]googlemaps] •[googlevideo]polldaddy] •[polldaddy]http://en.support.wordpress.com/shortcodes/ •[scribd]sourcecode][/sourcecode]
  • Using ShortcodesEnclosed/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 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: 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 Pluginshortcodes Ultimate - Enables you to easily create buttons, tabs, boxes,sliders, tooltips and many more elementsttp://wordpress.org/extend/plugins/shortcodes-ultimate/Shortcodes - Similar to Shortcodes Ultimate with additional style optionsttp://wordpress.org/extend/plugins/j-shortcodes/hortcodes Pro -Allows for quick and easy creation of WordPress shortcodesfrom the WordPress adminttp://wordpress.org/extend/plugins/shortcodes-pro/
  • 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 Easiersing a UI to manage and insert shortcodes
  • Making Shortcodes Easier ..
  • Shortcode Tips & Trickshe following will execute all shortcodes in a string of text:o_shortcode(Text with a [shortcode] in it);un shortcodes in a text widget:dd_filter(widget_text, do_shortcode);un shortcodes in comment text:
  • Embedsmbedding javascript into your posts/pages is hard!avascript embed codes wont work on WordPress.comavascript embed codes sometimes work in the self-hostedHTML editorhttp://codex.wordpress.org/Embeds
  • Using oEmbedll you need to do to embed something into a post or page isto post the URL to it into your content area. Make sure thatthe URL is on its own line and not hyperlinked (clickablewhen viewing the post).dding Support For An oEmbed-Enabled Sitep_oembed_add_provider()http://codex.wordpress.org/Embedsdding Support For A Non-oEmbed Site
  • Using oEmbed ..heck the "Auto-embeds" check box in Administration> Settings > Media SubPanel.roviders • Revision3 • Scribd • Photobucket • PollDaddyouTube • WordPress.tvimeo • SmugMug • FunnyOrDie.comailyMotion • Twitterhttp://codex.wordpress.org/Embedslip.tv
  • Boston WordPress Meetupe are currently the 2nd largest WordPress meetup in theworld with 1390+ memberse are growing every day and our current team can nothandle the workloade are looking for speakers, sponsors and supporterslease email Kurt (keng@bostonwp.org) and Jonhttp://bostonwp.org(jbishop@bostonwp.org) if interested
  • Thanks!Jon BishopWeb Developer @ AMP AgencyWebsite / JonBishop.comTwitter / @JonDBishop