Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Building a Simple Theme Framework


Published on

My talk from WordCamp Philly 2012. I talk about some things you can do to generalize your themes to make a nice framework as a place for you to start!

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Building a Simple Theme Framework

  1. 1. Building a SimpleTheme Frameworkby: Joe Casabona
  2. 2. Who am I?• Native of NYS• Yankee Fan• WordPress Developer• Computer Nerd• Star Wars Nerd• Author ofBuildingWordPressThemes from Scratch
  3. 3. Software Reuse• Some General Principles & Tips
  4. 4. Software Reuse• What is it? Creating code that can be usedacross several projects. Using existing softwareto create new software.• Why is it Important?• It saves time• It’s easier to test• It allows you to focus on more advancedparts of a project.
  5. 5. Principles of Reuse• DesignYour Code• Layout functions, classes, page templates beforehand!• Generalize Where Possible• Recognize when you’re reusing code snippets• Document & Test Thoroughly!• Testing will ensure your code works beforeimplementing it 5, 10, or 20 times
  6. 6. DefineYour Needs• We all have different needs!• I’ll talk about mine. Keep yours in mind.• EvaluateYour Process• ReviewYour Code• What do you do over and over?• Look for the same code across recentprojects!
  7. 7. DefineYour Needs (my needs)• Plugable CSS• Constants for Theme & Image URLS• Common WordPress functionality (menus,sidebars, CPTs, etc.)• Most Common theme templates (header, footer,page, index)• Common Folders• Lightweight
  8. 8. Now What?• You know what you needs. Now what?• Before you code, see what’s out there!• Can a plugin or other theme fulfill yourneeds?• Is there already some theme you use as astarting point?
  9. 9. What’s Out There (themes)• Thematic• Thesis• Carrington• Genesis• Atahualpa
  10. 10. What’s Out There (Plugins)• OptionTree• Custom Post Type UI• Royal Slider• Contact Form 7
  11. 11. Building the Framework• What to do, what to do...
  12. 12. DesigningYour Code• I noticed I was doing a couple of things over and over• Copy K2• Rip out stuff I didnt use• Replace it with my standard template• Modify• Eventually, I would just copy the last theme I created• I took my common components and created myframework
  13. 13. Ex: Post Attachments) { setup_postdata($post);the_attachment_link($post->ID, false, false,true); }}}if ($attachments) {foreach ( $attachments as $post) { setup_postdata($post);the_attachment_link($post->ID, false, false,true); }}}if ($attachments) {foreach ( $attachments as $post) { setup_postdata($post);the_attachment_link($post->ID, false, false,true); }}}if ($attachments) {foreach ( $attachments as$post ) { setup_postdata($post);the_attachment_link($post->ID, false, false,true); }}}if ($attachments) {foreach ( $attachments as $post) { setup_postdata($post);the_attachment_link($post->ID, false, false,true); }}}if ($attachments) {foreach ( $attachments as $post
  14. 14. Necessary Files• Style.css• Functions.php• Index.php• That’s it! WordPress will fill in the blankswith only these.
  15. 15. Recommended Files• All Necessary files• header.php & footer.php• page.php• single.php• A Custom Post Type generator/template• A theme options generator/template• search.php• archive.php• sidebar.php
  16. 16. My CSS• Single Sheet• Compressed normalize.css• Some base styles• Standard HTML5 Elements• Basic Navigation CSS• Mobile first approach• Basic Media Queries• Any common classes and IE Fixes
  17. 17. My Functions• Constants to use throughout the whole theme:define( TEMPPATH, get_bloginfo(stylesheet_directory));define( IMAGES, TEMPPATH. "/images");• Calls to include:• Nav Menus• Sidebars (2)• Custom functions I use across multiple themes(like attachments function from earlier)
  18. 18. Using the Framework• How and When
  19. 19. • As a Child Theme:• Cleaner• Easier to update• Can overwrite any page• As a Boilerplate:• One off jobs you don’t plan on updating• Largely customized jobs where you want toreuse only parts of the framework.2 Ways to Use Framework
  20. 20. As a Child Theme• Allows you to create themes that will automatically getupdated when you update your framework• Bug Fixes• Additional Functionality• General Theme Updates• Overwrites• No need to hack together/delete. Import and overwrite!
  21. 21. As a Boilerplate• Did this for a while!• This project started to serve as a simpleboilerplate for me• Use for one-off projects• Projects you wont have control over after initiallaunch• Projects that will be deeply different structurally
  22. 22. Which Should I Use?• Cliche Answer: It Depends!• As with most things in our field, there is no be-all-end-all answer.• Consider the project at hand and make the callthere.• Practically speaking, a child theme of yourframework will likely work most of the time.
  23. 23. Some Tips• Test it thoroughly• You will use this a lot, so make sure things workas expected across multiple browsers• Improve and update it• As you grow as a developer, your needs willchange. Make sure your framework changes withyou.
  24. 24. Some Tips (cont)• Dont get complacent• Do let your growth stagnate because youre usinga framework.• Stay up on new features, best practices, etc.• Let others try it out• See how other people use it and get feedback.
  25. 25. if there is time...<? Show some code! ?>
  26. 26. Thank You!Any Questions?Site: casabona.orgSlides: @jcasabona
  27. 27. Resources• WordPress Codex• Handcrafted CSS• Simplebits (Dan C’s site)• ThemeForest• WPTuts+