WORDPRESS  
TEMPLATE  DESIGN  &  
THEME  FRAMEWORKS
Jonny  Allbut  Freelance  Crea1ve
www.jonnya.net
www.twi7er.com/jonnya...
WORDPRESS  -­‐  THE  ULTIMATE  CMS  

๏ WordPress  as  a  CMS
  • Over  10  years  working  with  web
  • Nearly  6  years...
WORDPRESS  V.3
EVOLUTION  TO  TRUE  
 CMS  AND  DESIGN  
    PLATFORM
WORDPRESS  3.0  CHANGES  
EVERYTHING!

๏ get_template_part
๏ Custom  post  types
๏ New  template  files
๏ Custom  menu  bui...
THE  POWER  OF  TEMPLATE  PARTS




<?php

get_template_part( 'loop', 'index' );

?>
THE  POWER  OF  TEMPLATE  PARTS




<?php

get_template_part( 'loop', 'index' );

?>
๏ loop.php
THE  POWER  OF  TEMPLATE  PARTS




<?php

get_template_part( 'loop', 'index' );

?>
๏ loop-­‐index.php
THEME  BASICS
WHICH  TEMPLATE  FILE  GETS  USED?


๏ h7p://codex.wordpress.org/Template_Hierarchy
  • Understand  the  ‘cascade’  -­‐  e...
LOCATION  TESTS


๏ h7p://codex.wordpress.org/Condi1onal_Tags
  • is_category()
  • is_page(‘about-­‐us’)
  • is_single(ar...
THE  ROLE  OF  FUNCTIONS.PHP



๏ func1ons.php
๏ Code  that  always  executes
๏ Simple/advanced
๏ Portability  of  theme
THEME  DEVELOPMENT  
PRIOR  TO  FRAMEWORK
     WORKFLOW
NON-­‐FRAMEWORK  WORKFLOW

๏ Grid  system
๏ Boilerplate  theme
๏ Code  toolbox
๏ Includes
๏ LOTS  of  condi1onal  statemen...
NON-­‐FRAMEWORK  WORKFLOW  
LONG-­‐TERM  ISSUES




๏ Development  dejavu?
๏ Aggghhh,  Updates!
PARENT/CHILD  THEMES
PARENT  AND  CHILD  THEMES




๏ Child  theme  inherits  parent  theme  func1onality
๏ Child  theme  overrides  parent  th...
PARENT/CHILD  THEME  EXAMPLE



       PARENT  THEME          CHILD  THEME

๏ header.php           ๏ header.php
๏ index.ph...
PARENT/CHILD  THEME  EXAMPLE



       PARENT  THEME          CHILD  THEME

๏ header.php           ๏ header.php
๏ index.ph...
STOP  HACKING  THEMES  
       DANG  IT!
CHILD  THEME  STYLE.CSS


<?php
/*
Theme Name:     My Super Child Theme
Theme URI:      http://jonnya.net/
Description:   ...
CHILD  THEME  STYLE.CSS


<?php
/*
Theme Name:     My Super Child Theme
Theme URI:      http://jonnya.net/
Description:   ...
INTRODUCING  THE




 THEME  FRAMEWORK  PRIVATE  BETA
OPEN  EXCLUSIVELY  TO  WORDCAMPUK  
    DELEGATES  THIS  WEEKEND!
WHY  CONSIDER  WONDERFLUX?


๏ Wri7en  exclusively  for  WordPress  3.0
๏ Unique  layout  system
๏ LOTS  of  filters  and  ...
WHY  PARTICIPATE  IN  THE  
WONDERFLUX  BETA?



๏ Wri7en  with  the  community  in  mind
๏ Encouraging  best  coding  pra...
APPLY  FOR  THE  PRIVATE  BETA
Wordcamp 2010 presentation
Upcoming SlideShare
Loading in...5
×

Wordcamp 2010 presentation

3,027

Published on

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

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,027
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Wordcamp 2010 presentation

  1. 1. WORDPRESS   TEMPLATE  DESIGN  &   THEME  FRAMEWORKS Jonny  Allbut  Freelance  Crea1ve www.jonnya.net www.twi7er.com/jonnyauk
  2. 2. 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
  3. 3. WORDPRESS  V.3 EVOLUTION  TO  TRUE   CMS  AND  DESIGN   PLATFORM
  4. 4. 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()
  5. 5. THE  POWER  OF  TEMPLATE  PARTS <?php get_template_part( 'loop', 'index' ); ?>
  6. 6. THE  POWER  OF  TEMPLATE  PARTS <?php get_template_part( 'loop', 'index' ); ?> ๏ loop.php
  7. 7. THE  POWER  OF  TEMPLATE  PARTS <?php get_template_part( 'loop', 'index' ); ?> ๏ loop-­‐index.php
  8. 8. THEME  BASICS
  9. 9. 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 */ ?>
  10. 10. 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())  {  }
  11. 11. THE  ROLE  OF  FUNCTIONS.PHP ๏ func1ons.php ๏ Code  that  always  executes ๏ Simple/advanced ๏ Portability  of  theme
  12. 12. THEME  DEVELOPMENT   PRIOR  TO  FRAMEWORK WORKFLOW
  13. 13. NON-­‐FRAMEWORK  WORKFLOW ๏ Grid  system ๏ Boilerplate  theme ๏ Code  toolbox ๏ Includes ๏ LOTS  of  condi1onal  statements ๏ Lots  of  page  templates/complex  code
  14. 14. NON-­‐FRAMEWORK  WORKFLOW   LONG-­‐TERM  ISSUES ๏ Development  dejavu? ๏ Aggghhh,  Updates!
  15. 15. PARENT/CHILD  THEMES
  16. 16. PARENT  AND  CHILD  THEMES ๏ Child  theme  inherits  parent  theme  func1onality ๏ Child  theme  overrides  parent  theme  elements  if  have   same  filename
  17. 17. PARENT/CHILD  THEME  EXAMPLE PARENT  THEME CHILD  THEME ๏ header.php ๏ header.php ๏ index.php ๏ style.css ๏ sidebar.php ๏ footer.php ๏ comments.php ๏ style.css
  18. 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. 19. STOP  HACKING  THEMES   DANG  IT!
  20. 20. 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 */ ?>
  21. 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. 22. INTRODUCING  THE THEME  FRAMEWORK  PRIVATE  BETA OPEN  EXCLUSIVELY  TO  WORDCAMPUK   DELEGATES  THIS  WEEKEND!
  23. 23. 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
  24. 24. WHY  PARTICIPATE  IN  THE   WONDERFLUX  BETA? ๏ Wri7en  with  the  community  in  mind ๏ Encouraging  best  coding  prac1ce ๏ We  love  your  feedback! ๏ We  love  WP!!
  25. 25. APPLY  FOR  THE  PRIVATE  BETA

×