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