The presentation I made at WordCampUK 2010 in Manchester - launching the new theme framework Wonderflux! http://wonderflux.com

2. WORDPRESS
TEMPLATE DESIGN &
THEME FRAMEWORKS
Jonny Allbut Freelance Crea1ve
www.jonnya.net
www.twi7er.com/jonnyauk

3. WORDPRESS -­‐ THE ULTIMATE CMS
๏ WordPress as a CMS
• Over 10 years working with web
• Nearly 6 years as primary CMS
๏ Ease of customisa1on
• Theme system
• Plugin architecture
๏ Content management facili1es
• Custom post types
• Taxonomy
• User management
• Admin area

4. WORDPRESS V.3
EVOLUTION TO TRUE
CMS AND DESIGN
PLATFORM

5. WORDPRESS 3.0 CHANGES
EVERYTHING!
๏ get_template_part
๏ Custom post types
๏ New template files
๏ Custom menu builder
๏ Custom header and background API’s
๏ comment_form()

6. THE POWER OF TEMPLATE PARTS
<?php
get_template_part( 'loop', 'index' );
?>

7. THE POWER OF TEMPLATE PARTS
<?php
get_template_part( 'loop', 'index' );
?>
๏ loop.php

8. THE POWER OF TEMPLATE PARTS
<?php
get_template_part( 'loop', 'index' );
?>
๏ loop-­‐index.php

9. THEME BASICS

10. WHICH TEMPLATE FILE GETS USED?
๏ h7p://codex.wordpress.org/Template_Hierarchy
• Understand the ‘cascade’ -­‐ eg category display
1. category-­‐x.php
2. category.php
3. archive.php
4. index.php
๏ Custom page templates
<?php
/* Template Name: My special page */
?>

11. LOCATION TESTS
๏ h7p://codex.wordpress.org/Condi1onal_Tags
• is_category()
• is_page(‘about-­‐us’)
• is_single(array(17,'my-­‐news-­‐ar1cle','My News Ar1cle'))
<?php
if (is_page(‘about-us’)){
echo ‘<h2 class=”highlight”>’. get_the_title . ‘</h2>’;
} else {
echo ‘<h2> . get_the_title . ‘</h2>’;
}
?>
• if (is_single() || is_page()) { }

12. THE ROLE OF FUNCTIONS.PHP
๏ func1ons.php
๏ Code that always executes
๏ Simple/advanced
๏ Portability of theme

13. THEME DEVELOPMENT
PRIOR TO FRAMEWORK
WORKFLOW

14. NON-­‐FRAMEWORK WORKFLOW
๏ Grid system
๏ Boilerplate theme
๏ Code toolbox
๏ Includes
๏ LOTS of condi1onal statements
๏ Lots of page templates/complex code

15. NON-­‐FRAMEWORK WORKFLOW
LONG-­‐TERM ISSUES
๏ Development dejavu?
๏ Aggghhh, Updates!

16. PARENT/CHILD THEMES

17. PARENT AND CHILD THEMES
๏ Child theme inherits parent theme func1onality
๏ Child theme overrides parent theme elements if have
same filename

18. PARENT/CHILD THEME EXAMPLE
PARENT THEME CHILD THEME
๏ header.php ๏ header.php
๏ index.php ๏ style.css
๏ sidebar.php
๏ footer.php
๏ comments.php
๏ style.css

19. PARENT/CHILD THEME EXAMPLE
PARENT THEME CHILD THEME
๏ header.php ๏ header.php
๏ index.php ๏ style.css
๏ sidebar.php
๏ footer.php
๏ comments.php
๏ style.css

20. STOP HACKING THEMES
DANG IT!

21. CHILD THEME STYLE.CSS
<?php
/*
Theme Name: My Super Child Theme
Theme URI: http://jonnya.net/
Description: My child theme
Author: Jonnya Freelance Creative
Author URI: http: //jonnya.net
Template: wonderflux
Version: 0.1
*/
?>

22. CHILD THEME STYLE.CSS
<?php
/*
Theme Name: My Super Child Theme
Theme URI: http://jonnya.net/
Description: My child theme
Author: Jonnya Freelance Creative
Author URI: http: //jonnya.net
Template: wonderflux
Version: 0.1
*/
?>

23. INTRODUCING THE
THEME FRAMEWORK PRIVATE BETA
OPEN EXCLUSIVELY TO WORDCAMPUK
DELEGATES THIS WEEKEND!

24. WHY CONSIDER WONDERFLUX?
๏ Wri7en exclusively for WordPress 3.0
๏ Unique layout system
๏ LOTS of filters and hooks
๏ Powerful use of get_template_part
๏ GPL v2 -­‐ like WordPress

25. WHY PARTICIPATE IN THE
WONDERFLUX BETA?
๏ Wri7en with the community in mind
๏ Encouraging best coding prac1ce
๏ We love your feedback!
๏ We love WP!!

26. APPLY FOR THE PRIVATE BETA