Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Short Codes: Pain Free Magic

3,511 views

Published on

Many people i meet are unaware that they can mix output from php functions into editable content in WordPress; from simple things like displaying the current date, to retrieving & formatting data and flowing it into a page. my talk will introduce people to short codes, explain how powerful they are, and how they can be customized with attributes.

Published in: Technology, Health & Medicine

Short Codes: Pain Free Magic

  1. 1. Short Codes Pain Free Magic mike susz, developer squaredesign squaredesign
  2. 2. What is a Short Code? • WordPress ShortCode API (since v2.5) • we CAN do clever things inside Post Content • three parts to make a Short Code let’s start with an example! squaredesign short codes: pain free magic
  3. 3. Part #1: the [shortcode] Upload/Insert Hi everyone! i hope you’re having a super [year]! © [year] squaredesign, all rights reserved next up: the PHP function... squaredesign short codes: pain free magic
  4. 4. Part #2: the PHP function Theme Functions (functions.php) <?php function getTheYear() { return date(‘Y’); } ?> hook them together... squaredesign short codes: pain free magic
  5. 5. Part #3: the hookup Theme Functions (functions.php) <?php function getTheYear() { return date(‘Y’); } add_shortcode(‘year’,‘getTheYear’); ?> and the results... squaredesign short codes: pain free magic
  6. 6. The Results! Just another WordPress weblog let’s solve another practical problem... squaredesign short codes: pain free magic
  7. 7. a design problem looks quite a bit like Kubrick possible solutions... squaredesign short codes: pain free magic
  8. 8. Possible Solutions: • Make it an image (yuck) • style a <blockquote> • teach the client HTML • give up let’s use a Short Code - [pullquote] squaredesign short codes: pain free magic
  9. 9. An opening/closing Short Code Upload/Insert Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. [pullquote]velit esse cillum dolore eu fugiat nulla sint non culpa[/pullquote] Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud... and the PHP to make it happen... squaredesign short codes: pain free magic
  10. 10. PHP for opening/closing Short Code Theme Functions (functions.php) <?php add_shortcode('pullquote','makePullQuote'); function makePullQuote($attributes, $contents) { return '<div class="pullquote">' . $contents . "</div>"; } ?> add content to the output... squaredesign short codes: pain free magic
  11. 11. PHP for opening/closing Short Code Theme Functions (functions.php) <?php add_shortcode('pullquote','makePullQuote'); function makePullQuote($attributes, $contents) { return "<div class=" pullquote ">" . $contents . "</div>"; } ?> the result... squaredesign short codes: pain free magic
  12. 12. The Results! looks quite a bit like Kubrick <div class="pullquote"> velit esse cillum dolore eu fugiat nulla sint non culpa </div> squaredesign short codes: pain free magic
  13. 13. Revisions! we’ll use Short Code Attributes squaredesign short codes: pain free magic
  14. 14. Short Code with Attributes Upload/Insert [pullquote side='left']sunt in culpa qui officia deserunt[/pullquote]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua... [pullquote side='right']velit esse cillum dolore eu fugiat nulla sint non culpa[/pullquote]Lorem ipsum dolor sit amet.Ut enim ad minim veniam... our PHP code gets the Attributes... squaredesign short codes: pain free magic
  15. 15. the PHP function, using Attributes Theme Functions (functions.php) <?php add_shortcode('pullquote','makePullQuote'); function makePullQuote($attributes, $contents) { $align = $attributes[‘side’]; return “<div class=" pullquote $align ">” . $contents . "</div>"; } ?> let’s do something with the Attributes... squaredesign short codes: pain free magic
  16. 16. the PHP function, using Attributes Theme Functions (functions.php) <?php add_shortcode('pullquote','makePullQuote'); function makePullQuote($attributes, $contents) { $align = $attributes[‘side’]; return “<div class=" pullquote $align ">” . $contents . "</div>"; } ?> now one left, one right... squaredesign short codes: pain free magic
  17. 17. The Results! <div class="pullquote left"> sunt in culpa qui officia deserunt looks quite a bit like Kubrick </div> <div class="pullquote right"> velit esse cillum dolore eu fugiat nulla sint non culpa </div> squaredesign short codes: pain free magic
  18. 18. With Short Codes we can: inject [stuff] into Post Content manipulate [parts] of Post Content [/parts] solve real problems empower users! are there Plugins available? squaredesign short codes: pain free magic
  19. 19. WordPress Plugin Directory • Embed RSS feed • Amazon WishList • Paypal Donations • Easy Contact Form • tag cloud • sitemap • delicious • weather • etc. can i stop talking so quickly, now? squaredesign short codes: pain free magic
  20. 20. For more information: squaredesign.com/shortcodes @squaredesign Thank You! ☺ squaredesign short codes: pain free magic

×