Upload
michael-susz
View
3.183
Download
0
Tags:
Embed Size (px)
DESCRIPTION
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.
Citation preview
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:
☺