Short Codes: Pain Free Magic
-
Upload
michael-susz -
Category
Technology
-
view
3.183 -
download
0
description
Transcript of Short Codes: Pain Free Magic
![Page 1: Short Codes: Pain Free Magic](https://reader035.fdocuments.in/reader035/viewer/2022062405/556a26abd8b42a2f3f8b4e01/html5/thumbnails/1.jpg)
squaredesign
mike susz, developersquaredesign
Pain Free Magic
Short Codes
![Page 2: Short Codes: Pain Free Magic](https://reader035.fdocuments.in/reader035/viewer/2022062405/556a26abd8b42a2f3f8b4e01/html5/thumbnails/2.jpg)
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!
![Page 3: Short Codes: Pain Free Magic](https://reader035.fdocuments.in/reader035/viewer/2022062405/556a26abd8b42a2f3f8b4e01/html5/thumbnails/3.jpg)
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
![Page 4: Short Codes: Pain Free Magic](https://reader035.fdocuments.in/reader035/viewer/2022062405/556a26abd8b42a2f3f8b4e01/html5/thumbnails/4.jpg)
squaredesign short codes: pain free magic
Theme Functions (functions.php)<?php
?>hook them together...
Part #2: the PHP function
function getTheYear() {return date(‘Y’);
}
![Page 5: Short Codes: Pain Free Magic](https://reader035.fdocuments.in/reader035/viewer/2022062405/556a26abd8b42a2f3f8b4e01/html5/thumbnails/5.jpg)
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’);
![Page 6: Short Codes: Pain Free Magic](https://reader035.fdocuments.in/reader035/viewer/2022062405/556a26abd8b42a2f3f8b4e01/html5/thumbnails/6.jpg)
squaredesign short codes: pain free magic
let’s solve another practical problem...
The Results!
Just another WordPress weblog
![Page 7: Short Codes: Pain Free Magic](https://reader035.fdocuments.in/reader035/viewer/2022062405/556a26abd8b42a2f3f8b4e01/html5/thumbnails/7.jpg)
squaredesign short codes: pain free magic
possible solutions...
a design problem
looks quite a bit like Kubrick
![Page 8: Short Codes: Pain Free Magic](https://reader035.fdocuments.in/reader035/viewer/2022062405/556a26abd8b42a2f3f8b4e01/html5/thumbnails/8.jpg)
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]
![Page 9: Short Codes: Pain Free Magic](https://reader035.fdocuments.in/reader035/viewer/2022062405/556a26abd8b42a2f3f8b4e01/html5/thumbnails/9.jpg)
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...
![Page 10: Short Codes: Pain Free Magic](https://reader035.fdocuments.in/reader035/viewer/2022062405/556a26abd8b42a2f3f8b4e01/html5/thumbnails/10.jpg)
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>";}
![Page 11: Short Codes: Pain Free Magic](https://reader035.fdocuments.in/reader035/viewer/2022062405/556a26abd8b42a2f3f8b4e01/html5/thumbnails/11.jpg)
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>";}
![Page 12: Short Codes: Pain Free Magic](https://reader035.fdocuments.in/reader035/viewer/2022062405/556a26abd8b42a2f3f8b4e01/html5/thumbnails/12.jpg)
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>
![Page 13: Short Codes: Pain Free Magic](https://reader035.fdocuments.in/reader035/viewer/2022062405/556a26abd8b42a2f3f8b4e01/html5/thumbnails/13.jpg)
squaredesign short codes: pain free magic
we’ll use Short Code Attributes
Revisions!
![Page 14: Short Codes: Pain Free Magic](https://reader035.fdocuments.in/reader035/viewer/2022062405/556a26abd8b42a2f3f8b4e01/html5/thumbnails/14.jpg)
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...
![Page 15: Short Codes: Pain Free Magic](https://reader035.fdocuments.in/reader035/viewer/2022062405/556a26abd8b42a2f3f8b4e01/html5/thumbnails/15.jpg)
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>";}
![Page 16: Short Codes: Pain Free Magic](https://reader035.fdocuments.in/reader035/viewer/2022062405/556a26abd8b42a2f3f8b4e01/html5/thumbnails/16.jpg)
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>";}
![Page 17: Short Codes: Pain Free Magic](https://reader035.fdocuments.in/reader035/viewer/2022062405/556a26abd8b42a2f3f8b4e01/html5/thumbnails/17.jpg)
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>
![Page 18: Short Codes: Pain Free Magic](https://reader035.fdocuments.in/reader035/viewer/2022062405/556a26abd8b42a2f3f8b4e01/html5/thumbnails/18.jpg)
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:
![Page 19: Short Codes: Pain Free Magic](https://reader035.fdocuments.in/reader035/viewer/2022062405/556a26abd8b42a2f3f8b4e01/html5/thumbnails/19.jpg)
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
![Page 20: Short Codes: Pain Free Magic](https://reader035.fdocuments.in/reader035/viewer/2022062405/556a26abd8b42a2f3f8b4e01/html5/thumbnails/20.jpg)
squaredesign short codes: pain free magic
Thank You!
squaredesign.com/shortcodes@squaredesign
For more information:
☺