Take Control of Your Templates with WordPress Conditionals

Take Control of your Templates with WordPress Conditionals with Kathryn Presner WordCamp Montreal #wcmtl July 2011

Kathryn Presner of Zoonini Web Services www.zoonini.com @zoonini on Twitter about.me/kpresner

What’s coming up:
why conditional tags are powerful and useful
if/else statements – working some PHP magic (if you’re new to PHP, don’t be scared - we’ll start off slowly!)
WordPress conditional tags – an intro
let’s get our hands dirty – live examples
questions

The challenge... few theme files generating many pages & posts index.php comments.php footer.php functions.php header.php page.php sidebar.php single.php style.css mysite.com mysite.com/about/ mysite.com/contact/ mysite.com/services/ mysite.com/services/web-design/ mysite.com/services/web-design/wordpress/ mysite.com/services/programming/ mysite.com/services/graphic-design/ mysite.com/blog/ mysite.com/blog/2011/ mysite.com/blog/2011/july/ mysite.com/blog/2011/july/day1-wordcamp/ mysite.com/blog/2011/july/day2-wordcamp/ mysite.com/blog/category/wordpress/ mysite.com/blog/category/php-stuff/ mysite.com/blog/tag/orange/ mysite.com/blog/tag/red/ mysite.com/blog/tag/green/ mysite.com/blog/tag/yellow/ For example:

Why are conditionals useful... different sidebars elements on different pages

Why are conditionals useful... include an external file on a certain page

display a hippopotamus photo above all posts in the “Hippopotamus” category
show a strawberry shortcake recipe in the sidebar of all posts tagged with “strawberry”
display links to your Flickr and Twitter accounts in the footer of three specific pages
More reasons conditionals are useful...

PHP if/else statements + WordPress conditional tags
= template awesomeness
OK, I’m convinced. So how does it work?

DON’T PANIC!
A little bit of PHP goes a long way.
Let’s learn some right now...
Uh, did you just say PHP?

If you are thirsty,
drink some water.
Pseudo-code first (baby steps!)

<?php if ( is_thirsty() ): ?>
<p>Drink some water.</p>
<?php endif; ?>
Now let’s PHP-ify it

<?php open the PHP code block
?> close the PHP code block
Opening and closing PHP tags go before and after your PHP code.
What do these lines mean?

if ( ):
STUFF HERE
endif;
The if line checks whether a certain condition is TRUE or FALSE. The condition must be (in brackets)
The stuff that goes between the if and endif bits is ONLY executed/displayed if the condition we are checking for is TRUE.

is_thirsty()
Made-up function that checks whether you are thirsty. A function is shortcut name for a chunk of code you can reuse in different places. It’s defined elsewhere.
Regular HTML paragraph.

<?php if ( is_thirsty() ): ?>
<?php endif; ?>
This code says: if you are thirsty, drink some water.
You will only drink some water if the condition is_thirsty() is TRUE.
Back to our code...

Pseudo code: If you like strawberries OR if you are thirsty, drink a strawberry smoothie.
PHP:
<?php if ( is_thirsty() || is_strawberryfan() ): ?>
<img src="http://www.mysite.com/smoothie.gif" height="50" width="30" />
<?php endif; ?>
How about something a tad more complicated?

is_thirsty()
is_strawberryfan() ....are made-up functions
|| ...is the OR operator that checks to see if the first condition OR the second condition is true
<img src="http://www.mysite.com/smoothie.gif" height="50" width:"30" /> ...is a picture of a giant smoothie.
What does this mean?

<?php if ( is_thirsty() || is_strawberryfan() ): ?>
<img src="http://www.mysite.com/smoothie.gif" height="50" width="30" />
<?php endif; ?>
This code says: if the person is thirsty OR the person is a strawberry fan, it’s smoothie time!
NOTE: If you want AND instead or OR, use &&
Back to our code...

BEHOLD:

The Codex list of WordPress Conditional Tags - bookmark it, baby!

http://codex.wordpress.org/Conditional_Tags
Where do I find the real functions?

Is it the homepage?
is_front_page()
Is it a single post?
is_single()
Is it a single post with the ID 234, 453 or 524?
is_single(array (234,453,524))
Is it a sticky post?
is_sticky()

A few examples: WordPress conditionals are pre-defined functions that check whether a certain condition is TRUE. Is it a page with the slug “brownies“? is_page('brownies') How about a post in the recipes category, which has the ID 12? in_category('12') Is it the recipe category archives page? is_category('recipes') Or a post that is tagged with "chocolate”? has_tag('chocolate')

In your your blog’s header, on category archive pages for the:
Halloween category, show a pumpkin
Valentine’s Day category, show a cupid
St. Patrick’s Day category, show a four-leaf clover
In any other category archive, show a photo of your cat.
Let’s try another example:

In header.php where you want the image to appear, put:
<?php if ( is_category('halloween') ): ?>
<img src="http://www.mysite.com/pumpkin.gif" height="50" width="50" />
<?php elseif ( is_category('valentines') ): ?>
<img src="http://www.mysite.com/cupid.gif" height="50" width="50" />
<?php elseif ( is_category('stpatricks') ): ?>
<img src="http://www.mysite.com/clover.gif" height="50" width="50" />
<?php else: ?>
<img src=”http://www.mysite.com/cat.gif" height="50" width=”50" />
<?php endif; ?>

elseif is checking whether another condition is TRUE
else is the default condition, which will be met if none of the above is TRUE

PHP can be interspersed with (X)HTML – just remember to put all the PHP bits in between opening and closing PHP tags. <?php your PHP code here ?>
Where do these PHP statements go? Your theme files. Could be footer.php, header.php, page.php.... depending where you want the end result to go.
Conditionals can save us from having to create and manage extra theme files, making your site more efficient and requiring less maintenance.
Things to Remember:

A Note About Not
You can test a condition for its opposite by putting ! in front of it. For example, this conditional displays the image of the happy hippo only when the page is NOT the front page.
<?php if ( ! is_front_page() ): ?>
<img src="http://www.mysite.com/happy-hippo.gif" height="50" width="50" />
<?php endif; ?>

A Note About Arrays
To test for multiple instances of the same condition with certain conditionals, use an array. In this example, if the page’s slug is bio, about, or contact, the happy hippo image will be displayed.
<?php if ( is_page ( array(’bio’,'about’, 'contact' ) ) ): ?>
<img src="http://www.mysite.com/happy-hippo.gif" height="50" width="50" /> <?php endif; ?>

A Note About if/else Syntax
The PHP if/else syntax used in this demo is an alternative form which can be easier to read when mixed with HTML, as in WordPress templates. “Classic” PHP if/else syntax uses curly brackets (aka “braces”). Example:
<?php if ( is_front_page() ) { ?>
<img src="images/logo.gif" height="50" width="50" />
<?php } else { ?>
<img src="images/cat.gif" height="50" width="50" />
<?php } ?>

Resources
Codex entry on Conditional Tags http://codex.wordpress.org/Conditional_Tags
Widget Logic plug-in http://wordpress.org/extend/plugins/widget-logic/
PHP if/else syntax http://php.net/manual/en/control-structures.alternative-syntax.php http://php.net/manual/en/control-structures.if.php http://php.net/manual/en/control-structures.elseif.php http://www.w3schools.com/php/php_if_else.asp

LET’S GO! Time for the live demo

http://paper.li	12
http://lanyrd.com	4
https://twitter.com	1
http://www.slideshare.net	1

Take Control of Your Templates with WordPress Conditionals

by Kathryn Presner

Accessibility

Categories

Upload Details

Usage Rights

4 Embeds 18

Statistics

Take Control of Your Templates with WordPress Conditionals Presentation Transcript