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.

1. Short Codes
Pain Free Magic
mike susz, developer
squaredesign
squaredesign

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. 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. 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. 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. The Results!
Just another WordPress weblog
let’s solve another practical problem...
squaredesign short codes: pain free magic

7. a design problem
looks quite a bit like Kubrick
possible solutions...
squaredesign short codes: pain free magic

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. 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. 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. 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. 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. Revisions!
we’ll use Short Code Attributes
squaredesign short codes: pain free magic

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. 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. 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. 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. 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. 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. For more information:
squaredesign.com/shortcodes
@squaredesign
Thank You! ☺
squaredesign short codes: pain free magic