Speeding up Site Development with Parent and Child Themes

  • 2,912 views
Uploaded on

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

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/

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,912
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
0
Comments
0
Likes
8

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • Thanks for coming

    Pass along tips I’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’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’t, and three because I want to point out that anybody can do this, you don’t have to know a lot about PHP
  • Themes are the backbone of WordPress, big reason it’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’s theme, either from the WordPress directory or a commercial theme developer,

    Not something I like to do, but for a friend’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’s look at what could be better about developing our own themes.

    If you’re anything like me, this is probably how you’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’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’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’s not the best. Not if you’re looking at being efficient
  • Parent and child themes are defined by a relationship. It’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’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’t be a scary word. It’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’t use position based classes and IDs. Use “primary” “secondary”, 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’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’t be as robust or as strong as others when you start, but that’s okay.

    Benefits: it will grow as you grow, you’ll know it very very well, your decisions about what is added or taken out
  • I’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’re the one using it, after all.
  • Smart HTML, CSS that won’t restrict you to a certain layout

    Not “left”, but “primary” Not “right” but “secondary”, not “link-blue”, but “important” or “highlight”
  • This came about a year or so ago, use it in your theme and you’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’t touch your theme framework. When you change it, don’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’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’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’ll send it your way if you email me.

Transcript

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