Short Codes: Pain Free Magic

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:

☺