Take Control of Your Templates with WordPress Conditionals


Published on

Ever wonder how to put a giant porcupine photo at the top of your homepage - but a happy hippo in the header everywhere else? Want to know how to display a list of favourite sites on your blog - but on static pages have a sidebar with Twitter and Facebook links instead? Need to put that brownie recipe at the bottom of every page except the FAQ? Using WordPress conditional tags you can easily do all that and tons more. Whether you’re just starting to learn how themes work or you already know the basics and are ready to take your themes to the next level, this session is for you. Understanding conditionals is a key building block in crafting WordPress sites – a powerful skill that will let you do all kinds of nifty things with your templates. Once you see how handy WordPress conditional tags are, you’ll wonder how you ever managed without them!

Published in: Technology, Business
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Professional web designer, building sites since 1998, fell in love with WordPress 10 years later in 2008. Not a hard-core programmer, communications background. I’m a moderator in WP support forums, love helping people with questions that are solved by conditionals – people are always delighted when they see what’s possible, and I hope you will be too.
  • WordPress conditionals are an easy-to-use tool to help make your site more dynamic and efficient
  • WordPress generates multiple web pages from a small set of theme files, and the same code. For example, page.php generates all the static pages in your site, the header.php file includes the same code at the top of every page, same for footer.php and so on. But what if you want the footers to be different on some pages? Or different code to be included in your header.php on specific pages? You can create multiple theme files, but that can get “high maintenance” – more files to keep track of Conditionals to the rescue!
  • On one of my client’s site for an author and her book, on the homepage we have an image of the book cover in the sidebar
  • ...but on other pages, we have a banner linking to her blog...
  • ...and on the About the Author page, we have the banner PLUS a headshot of the writer. This is accomplished through one sidebar file... and WordPress conditional tags.
  • For this site, I wanted to incorporate my favourite form script, called Form-to-Email Pro. But I like to code forms in a certain way, and I couldn’t just paste it directly into the WordPress editor, as some of my tags would be stripped out. So instead, I put the form into a separate theme file, and edited the page.php file to use a conditional tag which includes the form code ONLY on the contact page.
  • Conditional tags let you make exceptions to the rules set out in your theme files, by instructing your theme files to do specific things under certain conditions.
  • PHP is a powerful scripting language, and conditional tags are special bits of code provided by WordPress that let you test for certain conditions. When combined in your theme files, they make magic.
  • I’m going to teach you a bit of basic right now – you won’t need to know much to be able to use WordPress conditionals.
  • Well, remember all those fake functions? Well we don't have to fake it anymore! This page is chock-full of goodness. The Codex is the official WordPress documentation and this page is invaluable. Not only does it list all the functions, it also gives practical examples.
  • There are conditional tags to check whether a page or post meets a zillion different conditions.
  • Here, we are checking three times to see whether two conditions are met – whether it’s a particular holiday and whether the front page of the blog is being displayed. If we wanted the photo to go in the sidebar, this code would go in the sidebar.php file
  • Conditionals that take arrays are in the Codex
  • Take Control of Your Templates with WordPress Conditionals

    1. 1. Take Control of your Templates with WordPress Conditionals with Kathryn Presner WordCamp Montreal #wcmtl July 2011
    2. 2. Kathryn Presner of Zoonini Web Services www.zoonini.com @zoonini on Twitter about.me/kpresner
    3. 3. What’s coming up: <ul><li>why conditional tags are powerful and useful </li></ul><ul><li>if/else statements – working some PHP magic (if you’re new to PHP, don’t be scared - we’ll start off slowly!) </li></ul><ul><li>WordPress conditional tags – an intro </li></ul><ul><li>let’s get our hands dirty – live examples </li></ul><ul><li>questions </li></ul>
    4. 4. 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:
    5. 5. Why are conditionals useful... different sidebars elements on different pages
    6. 6. Why are conditionals useful... different sidebars elements on different pages
    7. 7. Why are conditionals useful... different sidebars elements on different pages
    8. 8. Why are conditionals useful... include an external file on a certain page
    9. 9. <ul><li>display a hippopotamus photo above all posts in the “Hippopotamus” category </li></ul><ul><li>show a strawberry shortcake recipe in the sidebar of all posts tagged with “strawberry” </li></ul><ul><li>display links to your Flickr and Twitter accounts in the footer of three specific pages </li></ul>More reasons conditionals are useful...
    10. 10. <ul><li>PHP if/else statements + WordPress conditional tags </li></ul><ul><li>= template awesomeness </li></ul>OK, I’m convinced. So how does it work?
    11. 11. <ul><li>DON’T PANIC! </li></ul><ul><li>A little bit of PHP goes a long way. </li></ul><ul><li>Let’s learn some right now... </li></ul>Uh, did you just say PHP?
    12. 12. <ul><li>If you are thirsty, </li></ul><ul><li>drink some water. </li></ul>Pseudo-code first (baby steps!)
    13. 13. <ul><li><?php if ( is_thirsty() ): ?> </li></ul><ul><li><p>Drink some water.</p> </li></ul><ul><li><?php endif; ?> </li></ul>Now let’s PHP-ify it
    14. 14. <ul><li><?php open the PHP code block </li></ul><ul><li>?> close the PHP code block </li></ul><ul><li>Opening and closing PHP tags go before and after your PHP code. </li></ul>What do these lines mean?
    15. 15. <ul><li>if ( ): </li></ul><ul><li>STUFF HERE </li></ul><ul><li>endif; </li></ul><ul><li>The if line checks whether a certain condition is TRUE or FALSE. The condition must be (in brackets) </li></ul><ul><li>The stuff that goes between the if and endif bits is ONLY executed/displayed if the condition we are checking for is TRUE. </li></ul>What do these lines mean?
    16. 16. <ul><li>is_thirsty() </li></ul><ul><li>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. </li></ul><ul><li><p>Drink some water.</p> </li></ul><ul><li>Regular HTML paragraph. </li></ul>What do these lines mean?
    17. 17. <ul><li><?php if ( is_thirsty() ): ?> </li></ul><ul><li><p>Drink some water.</p> </li></ul><ul><li><?php endif; ?> </li></ul><ul><li>This code says: if you are thirsty, drink some water. </li></ul><ul><li>You will only drink some water if the condition is_thirsty() is TRUE. </li></ul>Back to our code...
    18. 18. <ul><li>Pseudo code: If you like strawberries OR if you are thirsty, drink a strawberry smoothie. </li></ul><ul><li>PHP: </li></ul><ul><li><?php if ( is_thirsty() || is_strawberryfan() ): ?> </li></ul><ul><li><img src=&quot;http://www.mysite.com/smoothie.gif&quot; height=&quot;50&quot; width=&quot;30&quot; /> </li></ul><ul><li><?php endif; ?> </li></ul>How about something a tad more complicated?
    19. 19. <ul><li>is_thirsty() </li></ul><ul><li>is_strawberryfan() ....are made-up functions </li></ul><ul><li>|| ...is the OR operator that checks to see if the first condition OR the second condition is true </li></ul><ul><li><img src=&quot;http://www.mysite.com/smoothie.gif&quot; height=&quot;50&quot; width:&quot;30&quot; /> ...is a picture of a giant smoothie. </li></ul>What does this mean?
    20. 20. <ul><li><?php if ( is_thirsty() || is_strawberryfan() ): ?> </li></ul><ul><li><img src=&quot;http://www.mysite.com/smoothie.gif&quot; height=&quot;50&quot; width=&quot;30&quot; /> </li></ul><ul><li><?php endif; ?> </li></ul><ul><li>This code says: if the person is thirsty OR the person is a strawberry fan, it’s smoothie time! </li></ul><ul><li>NOTE: If you want AND instead or OR, use && </li></ul>Back to our code...
    21. 21. <ul><li>BEHOLD: </li></ul><ul><li>  </li></ul><ul><li>The Codex list of WordPress Conditional Tags - bookmark it, baby! </li></ul><ul><li>  </li></ul><ul><li>http://codex.wordpress.org/Conditional_Tags </li></ul>Where do I find the real functions?
    22. 22. <ul><li>Is it the homepage? </li></ul><ul><li>is_front_page() </li></ul><ul><li>Is it a single post? </li></ul><ul><li>is_single() </li></ul><ul><li>Is it a single post with the ID 234, 453 or 524? </li></ul><ul><li>is_single(array (234,453,524)) </li></ul><ul><li>Is it a sticky post? </li></ul><ul><li>is_sticky() </li></ul><ul><li>  </li></ul>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 &quot;chocolate”? has_tag('chocolate') 
    23. 23. <ul><li>In your your blog’s header, on category archive pages for the: </li></ul><ul><li>Halloween category, show a pumpkin </li></ul><ul><li>Valentine’s Day category, show a cupid </li></ul><ul><li>St. Patrick’s Day category, show a four-leaf clover </li></ul><ul><li>In any other category archive, show a photo of your cat. </li></ul>Let’s try another example:
    24. 24. <ul><li>In header.php where you want the image to appear, put: </li></ul><ul><li><?php if ( is_category('halloween') ): ?> </li></ul><ul><li><img src=&quot;http://www.mysite.com/pumpkin.gif&quot; height=&quot;50&quot; width=&quot;50&quot; /> </li></ul><ul><li><?php elseif ( is_category('valentines') ): ?> </li></ul><ul><li><img src=&quot;http://www.mysite.com/cupid.gif&quot; height=&quot;50&quot; width=&quot;50&quot; /> </li></ul><ul><li><?php elseif ( is_category('stpatricks') ): ?> </li></ul><ul><li><img src=&quot;http://www.mysite.com/clover.gif&quot; height=&quot;50&quot; width=&quot;50&quot; /> </li></ul><ul><li><?php else: ?> </li></ul><ul><li><img src=”http://www.mysite.com/cat.gif&quot; height=&quot;50&quot; width=”50&quot; /> </li></ul><ul><li><?php endif; ?> </li></ul><ul><li>  </li></ul><ul><li>elseif is checking whether another condition is TRUE </li></ul><ul><li>else is the default condition, which will be met if none of the above is TRUE </li></ul>
    25. 25. <ul><li>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 ?> </li></ul><ul><li>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. </li></ul><ul><li>Conditionals can save us from having to create and manage extra theme files, making your site more efficient and requiring less maintenance. </li></ul>Things to Remember:
    26. 26. A Note About Not <ul><li>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. </li></ul><ul><li><?php if ( ! is_front_page() ): ?> </li></ul><ul><ul><li><img src=&quot;http://www.mysite.com/happy-hippo.gif&quot; height=&quot;50&quot; width=&quot;50&quot; /> </li></ul></ul><ul><li><?php endif; ?> </li></ul>
    27. 27. A Note About Arrays <ul><li>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. </li></ul><ul><li><?php if ( is_page ( array(’bio’,'about’, 'contact' ) )   ): ?> </li></ul><ul><li><img src=&quot;http://www.mysite.com/happy-hippo.gif&quot; height=&quot;50&quot; width=&quot;50&quot; /> <?php endif; ?> </li></ul>
    28. 28. A Note About if/else Syntax <ul><li>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: </li></ul><ul><li><?php if ( is_front_page() ) { ?> </li></ul><ul><li><img src=&quot;images/logo.gif&quot; height=&quot;50&quot; width=&quot;50&quot; /> </li></ul><ul><li><?php } else { ?> </li></ul><ul><li><img src=&quot;images/cat.gif&quot; height=&quot;50&quot; width=&quot;50&quot; /> </li></ul><ul><li><?php } ?> </li></ul>
    29. 29. Resources <ul><li>Codex entry on Conditional Tags http://codex.wordpress.org/Conditional_Tags </li></ul><ul><li>Widget Logic plug-in http://wordpress.org/extend/plugins/widget-logic/ </li></ul><ul><li>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 </li></ul>
    30. 30. LET’S GO! Time for the live demo