Building a Simple Theme Framework

by: Joe Casabona

Saturday, October 20, 12

Who am I?

• Native of NYS

• Yankee Fan

• WordPress Developer

• Computer Nerd

• Star Wars Nerd

• Author of Building WordPress Themes from Scratch

Saturday, October 20, 12

Software Reuse• Some General Principles & Tips

Saturday, October 20, 12

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.

Saturday, October 20, 12

Principles of Reuse• Design Your 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

Saturday, October 20, 12

Define Your Needs

• We all have different needs!

• I’ll talk about mine. Keep yours in mind.

• Evaluate Your Process

• Review Your Code

• What do you do over and over?

• Look for the same code across recent projects!

Saturday, October 20, 12

Define Your 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

Saturday, October 20, 12

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?

Saturday, October 20, 12

What’s Out There (themes)

• Thematic

• Thesis

• Carrington

• Genesis

• Atahualpa

Saturday, October 20, 12

What’s Out There (Plugins)

• OptionTree

• Custom Post Type UI

• Royal Slider

• Contact Form 7

Saturday, October 20, 12

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

Saturday, October 20, 12

Designing Your 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

Saturday, October 20, 12

Ex: Post Attachmentsfunction jlc_prnt_attachements($pid){$args = array( 'post_type' => 'attachment', 'numberposts' => -1, 'post_status' => null, 'post_parent' => $pid );

$attachments = get_posts( $args );

if ($attachments) {foreach ( $attachments as $post ) {

setup_postdata($post); the_attachment_link($post->ID, false, false, true); }}

}

Saturday, October 20, 12

Necessary Files

• Style.css

• Functions.php

• Index.php

• That’s it! WordPress will fill in the blanks with only these.

Saturday, October 20, 12

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

Saturday, October 20, 12

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

Saturday, October 20, 12

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)

Saturday, October 20, 12

Using the Framework• How and When

Saturday, October 20, 12

• 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

Saturday, October 20, 12

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!

Saturday, October 20, 12

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

Saturday, October 20, 12

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.

Saturday, October 20, 12

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.

Saturday, October 20, 12

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.

Saturday, October 20, 12

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

Saturday, October 20, 12

Thank You!Any Questions?

Site: casabona.orgSlides: casabona.org/wcphilly/Twitter: @jcasabona

Saturday, October 20, 12

Resources

• WordPress Codex

• Handcrafted CSS

• Simplebits (Dan C’s site)

• ThemeForest

• WPTuts+

Saturday, October 20, 12