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!

1. Building a Simple
Theme Framework
by: Joe Casabona

2. Who am I?
• Native of NYS
• Yankee Fan
• WordPress Developer
• Computer Nerd
• Star Wars Nerd
• Author of
BuildingWordPressThemes from Scratch

3. Software Reuse
• Some General Principles & Tips

4. Software Reuse
• What is it? Creating code that can be used
across several projects. Using existing software
to create new software.
• Why is it Important?
• It saves time
• It’s easier to test
• It allows you to focus on more advanced
parts of a project.

5. Principles of Reuse
• DesignYour Code
• Layout functions, classes, page templates before
hand!
• Generalize Where Possible
• Recognize when you’re reusing code snippets
• Document & Test Thoroughly!
• Testing will ensure your code works before
implementing it 5, 10, or 20 times

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 recent
projects!

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. Now What?
• You know what you needs. Now what?
• Before you code, see what’s out there!
• Can a plugin or other theme fulfill your
needs?
• Is there already some theme you use as a
starting point?

9. What’s Out There (themes)
• Thematic
• Thesis
• Carrington
• Genesis
• Atahualpa

10. What’s Out There (Plugins)
• OptionTree
• Custom Post Type UI
• Royal Slider
• Contact Form 7

11. Building the Framework
• What to do, what to do...

12. DesigningYour Code
• I noticed I was doing a couple of things over and over
• Copy K2
• Rip out stuff I didn't 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 my
framework

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. Necessary Files
• Style.css
• Functions.php
• Index.php
• That’s it! WordPress will fill in the blanks
with only these.

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. 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. 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. Using the Framework
• How and When

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 to
reuse only parts of the framework.
2 Ways to Use Framework

20. As a Child Theme
• Allows you to create themes that will automatically get
updated when you update your framework
• Bug Fixes
• Additional Functionality
• General Theme Updates
• Overwrites
• No need to hack together/delete. Import and overwrite!

21. As a Boilerplate
• Did this for a while!
• This project started to serve as a simple
boilerplate for me
• Use for one-off projects
• Projects you won't have control over after initial
launch
• Projects that will be deeply different structurally

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 call
there.
• Practically speaking, a child theme of your
framework will likely work most of the time.

23. Some Tips
• Test it thoroughly
• You will use this a lot, so make sure things work
as expected across multiple browsers
• Improve and update it
• As you grow as a developer, your needs will
change. Make sure your framework changes with
you.

24. Some Tips (cont)
• Don't get complacent
• Do let your growth stagnate because you're using
a framework.
• Stay up on new features, best practices, etc.
• Let others try it out
• See how other people use it and get feedback.

25. if there is time...
<? Show some code! ?>

26. Thank You!
Any Questions?
Site: casabona.org
Slides: casabona.org/wcphilly/
Twitter: @jcasabona

27. Resources
• WordPress Codex
• Handcrafted CSS
• Simplebits (Dan C’s site)
• ThemeForest
• WPTuts+