SPEEDING UP SITE DEVELOPMENT WITH
PARENT AND CHILD THEMES
WordCamp Atlanta | January 8-9, 2010
Who am I?
Themes
Using other themes
Building original themes
HTML
HTML
 CSS
HTML
   CSS
Javascript
HTML
     CSS
  Javascript
PHP Templates
HTML
       CSS
    Javascript
  PHP Templates
Content and testing
HTML            HTML
       CSS
    Javascript
  PHP Templates
Content and testing
HTML            HTML
       CSS             CSS
    Javascript
  PHP Templates
Content and testing
HTML              HTML
       CSS               CSS
    Javascript        Javascript
  PHP Templates
Content and testing
HTML                HTML
       CSS                 CSS
    Javascript          Javascript
  PHP Templates       PHP Templ...
HTML                  HTML
       CSS                   CSS
    Javascript            Javascript
  PHP Templates         P...
HTML                  HTML
       CSS                   CSS
    Javascript            Javascript
  PHP Templates         P...
HTML                  HTML                  HTML
       CSS                   CSS                   CSS
    Javascript    ...
HTML                  HTML                  HTML                  HTML
       CSS                   CSS                   ...
Are we being efficient?
The old way


      HTML                  HTML                  HTML                  HTML
       CSS                   CS...
Parent and child themes
HTML
       CSS
    Javascript
  PHP Templates
Theme options panel
HTML                     CSS
       CSS            Two or three PHP files
    Javascript
  PHP Templates
Theme options pane...
HTML                     CSS
       CSS            Two or three PHP files
    Javascript
  PHP Templates
Theme options panel
How?
/*
Theme Name: Theme Title
Theme URI: http://www.aspiringindie.com/
Description: Basic demo theme.
Version: 0.1
Author: Ry...
/*
Theme Name: Theme Title
Theme URI: http://www.aspiringindie.com/
Description: Basic demo theme.
Version: 0.1
Author: Ry...
Child theme hierarchy
HTML                     CSS
       CSS            Two or three PHP files
    Javascript
  PHP Templates
Theme options pane...
CSS            CSS
Two or three PHP files




Grandchildren themes
CSS            CSS
                1 PHP template




Great grandchildren themes
What’s next?
Theme frameworks
Theme frameworks
or, basically strong parent themes
What makes a parent theme
a theme framework?
Clean, semantic markup
Useful classes and IDs
Space for widgets
the more, the better
Thematic
themeshaper.com
Theme Hybrid
themehybrid.com
Sandbox
plaintxt.org
Gravy
darrenhoyt.com
These guys are smart
and they want you to use their stuff
But...
it’s also beneficial to do it yourself
Tips
for building your own theme
framework
Focus on making your life easier
Make it flexible
<?php body_class(); ?>
“home”, “page-xx”, “single”, etc.
Add lots of
widget areas
Prepare standard
page templates
Think of your theme framework
as you think of WordPress Core
Convert one of your old themes
into a child theme
WPMU Considerations
Resources
People to watch

Ian Stewart, themeshaper.com
Justin Tadlock, themehybrid.com
Nathan Rice, nathanrice.com
WP Eng...
Any Questions?
ryan@aspiringindie.com
@ryanimel
www.aspiringindie.com
Speeding up Site Development with Parent and Child Themes
Speeding up Site Development with Parent and Child Themes
Speeding up Site Development with Parent and Child Themes
Speeding up Site Development with Parent and Child Themes
Speeding up Site Development with Parent and Child Themes
Upcoming SlideShare
Loading in...5
×

Speeding up Site Development with Parent and Child Themes

2,988

Published on

Developing WordPress themes is how many of us make a living. But are we doing it as efficiently as possible?

This presentation is an introduction to parent and child theme relationships, how to use them to speed up development time, and how to develop a strong parent theme as a framework for future development.

Video of the presentation and other notes can be found on my site: http://aspiringindie.com/2010/01/10/wordcamp-atlanta-presentation/

Published in: Technology, Design
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

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

No notes for slide
  • Thanks for coming

    Pass along tips I&amp;#x2019;ve come across

    Everything will be added online
  • Why should you care what I have to say?

    Name, full time web and WordPress developer, self employed, some 5 years, built a few hundred themes

    Blogged about WordPress at Theme Playground and WPCandy
  • How I&amp;#x2019;d rate myself

    For three reasons: one because I like when developers rate themselves, two because i want to be open about what I know and don&amp;#x2019;t, and three because I want to point out that anybody can do this, you don&amp;#x2019;t have to know a lot about PHP
  • Themes are the backbone of WordPress, big reason it&amp;#x2019;s as popular as it is

    Allows us to use the same content, same CMS, but create wildly different designs
  • How you use themes, up until now
  • Using someone else&amp;#x2019;s theme, either from the WordPress directory or a commercial theme developer,

    Not something I like to do, but for a friend&amp;#x2019;s site
  • Add widgets, remove top area

    Only way is to jump into the code...
  • Change their theme at the code level.

    Creates a problem: for any upgrades it will break. Upgrades for security reasons, for new versions of WordPress, or for new features
  • Now, let&amp;#x2019;s look at what could be better about developing our own themes.

    If you&amp;#x2019;re anything like me, this is probably how you&amp;#x2019;ve build themes. At least this is how I have
  • Then, come next week you have to go through the same process again.
  • And again the week after.
  • And again and again. Now, there&amp;#x2019;s nothing wrong with that necessarily. You could continue developing this way probably be just fine. But, you have to ask at some point...
  • What could we be doing better? At the very least, we&amp;#x2019;re repeating a lot of steps. It would be nice to be able to improve that
  • Think of it as the old way of developing. You can do it, but it&amp;#x2019;s not the best. Not if you&amp;#x2019;re looking at being efficient
  • Parent and child themes are defined by a relationship. It&amp;#x2019;s a one-way relationship, the children rely on the parent themes
  • This is a parent theme, because we choose for it to be. That&amp;#x2019;s about all it takes. Actually, what makes a theme a parent theme is having a child.
  • Child themes will take all parent theme files, unless you choose to override them. You can add unique files to child themes and use them, but you can also move copies of files by the same name and they will be given priority
  • In a really cool way, you can continue adding them.

    Child themes can have child themes.
  • Framework shouldn&amp;#x2019;t be a scary word. It&amp;#x2019;s basically
  • Basically strong parent themes.

    Built to be flexible and act as a frame for multiple sites.
  • Since just about anything can be a framework, the question is what makes a good one
  • Don&amp;#x2019;t use position based classes and IDs. Use &amp;#x201C;primary&amp;#x201D; &amp;#x201C;secondary&amp;#x201D;, etc.
  • You want to be able to flexibly control your site without touching the templates.
  • Widgets are great because they give your end user, and yourself, flexible space to add in different kinds of content
  • By Ian Stewart
  • By Justin Tadlock
  • By Sandbox
  • By Darren Hoyt

    Kind of unique, includes a PSD as well

    There are many others out there, these are just a few ones I&amp;#x2019;ve played with
  • These frameworks are really solid, definitely out there to use them.

    Why not benefit from their genius and their hard work
  • I would encourage you to build your own.

    Odds are yours won&amp;#x2019;t be as robust or as strong as others when you start, but that&amp;#x2019;s okay.

    Benefits: it will grow as you grow, you&amp;#x2019;ll know it very very well, your decisions about what is added or taken out
  • I&amp;#x2019;ve been using my own for some time, some tips I would recommend
  • Focus on solving your own development hangups, do it the way that will help you. You&amp;#x2019;re the one using it, after all.
  • Smart HTML, CSS that won&amp;#x2019;t restrict you to a certain layout

    Not &amp;#x201C;left&amp;#x201D;, but &amp;#x201C;primary&amp;#x201D; Not &amp;#x201C;right&amp;#x201D; but &amp;#x201C;secondary&amp;#x201D;, not &amp;#x201C;link-blue&amp;#x201D;, but &amp;#x201C;important&amp;#x201D; or &amp;#x201C;highlight&amp;#x201D;
  • This came about a year or so ago, use it in your theme and you&amp;#x2019;ll automatically have lots of CSS control over certain pages
  • Widgets are useful. And your users, your clients, will love them.

    Also will make it so that you can have a framework that is very flexible.
  • Like three column, wide page, etc.
  • Don&amp;#x2019;t touch your theme framework. When you change it, don&amp;#x2019;t change for niche uses. Leave those to your child themes.
  • The best way to test how useful your framework is, is to port over one of your previous themes into a child theme.

    Time yourself. When I implemented this into my workflow, I cut down on my development time by 50%. This is because I didn&amp;#x2019;t have to repeat steps -- HTML, PHP Templates, basic CSS, theme options, function files -- all are there for each theme I make, and I don&amp;#x2019;t have to repeat.
  • This is a lot to go into right now, but keep in mind that f you manage a lot of sites using WPMU, working from one base parent theme, a framework theme, you can share a lot of resources and keep your theme folder much cleaner, possibly speed up sites, etc.
  • Subscribe to these sites, these people on Twitter. They are all over this stuff.
  • At this point, easier to take direct questions

    If you want a look at the framework I use, I&amp;#x2019;ll send it your way if you email me.
  • Transcript of "Speeding up Site Development with Parent and Child Themes"

    1. 1. SPEEDING UP SITE DEVELOPMENT WITH PARENT AND CHILD THEMES WordCamp Atlanta | January 8-9, 2010
    2. 2. Who am I?
    3. 3. Themes
    4. 4. Using other themes
    5. 5. Building original themes
    6. 6. HTML
    7. 7. HTML CSS
    8. 8. HTML CSS Javascript
    9. 9. HTML CSS Javascript PHP Templates
    10. 10. HTML CSS Javascript PHP Templates Content and testing
    11. 11. HTML HTML CSS Javascript PHP Templates Content and testing
    12. 12. HTML HTML CSS CSS Javascript PHP Templates Content and testing
    13. 13. HTML HTML CSS CSS Javascript Javascript PHP Templates Content and testing
    14. 14. HTML HTML CSS CSS Javascript Javascript PHP Templates PHP Templates Content and testing
    15. 15. HTML HTML CSS CSS Javascript Javascript PHP Templates PHP Templates Content and testing Content and testing
    16. 16. HTML HTML CSS CSS Javascript Javascript PHP Templates PHP Templates Content and testing Content and testing
    17. 17. HTML HTML HTML CSS CSS CSS Javascript Javascript Javascript PHP Templates PHP Templates PHP Templates Content and testing Content and testing Content and testing
    18. 18. HTML HTML HTML HTML CSS CSS CSS CSS Javascript Javascript Javascript Javascript PHP Templates PHP Templates PHP Templates PHP Templates Content and testing Content and testing Content and testing Content and testing
    19. 19. Are we being efficient?
    20. 20. The old way HTML HTML HTML HTML CSS CSS CSS CSS Javascript Javascript Javascript Javascript PHP Templates PHP Templates PHP Templates PHP Templates Content and testing Content and testing Content and testing Content and testing
    21. 21. Parent and child themes
    22. 22. HTML CSS Javascript PHP Templates Theme options panel
    23. 23. HTML CSS CSS Two or three PHP files Javascript PHP Templates Theme options panel Child themes
    24. 24. HTML CSS CSS Two or three PHP files Javascript PHP Templates Theme options panel
    25. 25. How?
    26. 26. /* Theme Name: Theme Title Theme URI: http://www.aspiringindie.com/ Description: Basic demo theme. Version: 0.1 Author: Ryan Imel Author URI: http://www.aspiringindie.com/ */
    27. 27. /* Theme Name: Theme Title Theme URI: http://www.aspiringindie.com/ Description: Basic demo theme. Version: 0.1 Author: Ryan Imel Author URI: http://www.aspiringindie.com/ Template: parent-theme */
    28. 28. Child theme hierarchy
    29. 29. HTML CSS CSS Two or three PHP files Javascript PHP Templates Theme options panel Child themes
    30. 30. CSS CSS Two or three PHP files Grandchildren themes
    31. 31. CSS CSS 1 PHP template Great grandchildren themes
    32. 32. What’s next?
    33. 33. Theme frameworks
    34. 34. Theme frameworks or, basically strong parent themes
    35. 35. What makes a parent theme a theme framework?
    36. 36. Clean, semantic markup
    37. 37. Useful classes and IDs
    38. 38. Space for widgets the more, the better
    39. 39. Thematic themeshaper.com
    40. 40. Theme Hybrid themehybrid.com
    41. 41. Sandbox plaintxt.org
    42. 42. Gravy darrenhoyt.com
    43. 43. These guys are smart and they want you to use their stuff
    44. 44. But... it’s also beneficial to do it yourself
    45. 45. Tips for building your own theme framework
    46. 46. Focus on making your life easier
    47. 47. Make it flexible
    48. 48. <?php body_class(); ?> “home”, “page-xx”, “single”, etc.
    49. 49. Add lots of widget areas
    50. 50. Prepare standard page templates
    51. 51. Think of your theme framework as you think of WordPress Core
    52. 52. Convert one of your old themes into a child theme
    53. 53. WPMU Considerations
    54. 54. Resources People to watch Ian Stewart, themeshaper.com Justin Tadlock, themehybrid.com Nathan Rice, nathanrice.com WP Engineer, wpengineer.com WPCandy, wpcandy.com
    55. 55. Any Questions? ryan@aspiringindie.com @ryanimel www.aspiringindie.com

    ×