@wcmtl

WordCamp
Montreal 2011

Custom Themes from Scratch using a
Theme Framework

@ptahdunbar - #wcmtl

Custom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl

Ptah Dunbar
• WordPress Core Contributor
– Over 30+ commit props
– Worked heavily on the nav menus in 3.0
– First patch was just over 9 months ago

• WordPress Consulting in Miami Beach
– Creative WordPress Solutions
– Office + Two partners + an intern

• I love to Travel
– Aspiring World Traveler
– First time in Canada!
– Previously visited Atlanta, Luxembourg, Thailand, San

• Languages
– Currently learning spanish as well as improving french & german fluency.

Creating a modern WordPress theme is detail work.

For a full reference, visit:
➡ http://codex.wordpress.org/Theme_Development
➡ http://codex.wordpress.org/Theme_Review

Why Theme Frameworks?

• Empowering users

• To make theme development more fun

• Because it’s what the cools kids do.


What makes a Theme Framework?

• Functions.php
Loaded on every page before the page is displayed

• WordPress Plugin API
Allows developers to “hook” into the WordPress code and execute
functionality without editing the WordPress core files.

• Child Theme Template Inheritance
Child themes template files override template files from the
parent theme.


Two Types of
Theme Frameworks

‣ User-based Theme Frameworks
– Provides you with various types of options to control
aspects of your theme without editing template files

‣ Designer/Developer-based Theme Frameworks
– Code-oriented, tradition template system, starter-based


Theme Framework Continuum

User-Based DD-based Theme
Theme Frameworks Frameworks



Sandbox


Thematic

Hybrid



WP Framework Sandbox


Thematic

Hybrid


Thesis by DIYThemes


Headway by Headway Themes


Genesis by StudioPress


Sandbox theme by Scott Wallick


Starkers by Elliot Jay Stocks


Whiteboard by Bold Perspecive Labs


Top 10
WP Framework
Features


WP Framework
has
Organization


Organization

‣ THEME_CSS
‣ THEME_JS
‣ THEME_IMG

‣ CHILD_THEME_CSS
‣ CHILD_THEME_JS
‣ CHILD_THEME_IMG

‣ Add your own:
‣ wpf_templating_constants


WP Framework
does
Rapid Development


Rapid Theming with WP Framework

‣ Stylesheets
– reset.css
– typography.css
– master.css

‣ Javascripting
– scripts.js with jQuery loaded

‣ Custom Functions
– custom-functions.php


WP Framework
has
HTML5/CSS3


WP Framework
has
Device Detection


WP Framework
has a
CSS Framework


RYO.GS
Roll Your Own Grid System

<link rel="stylesheet" type="text/css" media="all"
href="<?php echo ryogs( '18', '28', '28', '28' ); ?>" />

1. Number of Columns (in pixels)
2. Width of Columns (in pixels)
3. Width of Gutters (in pixels)
4. Base-line height (in pixels)


CSS Grids in WP Framework


WP Framework
has
Theme Options


add_theme_support( ‘theme-options’ );


wpf_register_metabox( $page_slug, $id, $title, $column, $priority );

function theme_options() {

wpf_add_metabox( 'options', 'aioseo', 'All in one SEO', 1 );
wpf_add_metabox( 'options', 'scripts', 'Theme Scripts', 2 );
wpf_add_metabox( 'options', 'robots', 'General Settings', 3 );
wpf_add_metabox( 'options', 'info', 'Theme Information', 4 );

}


Theme Options API
Example Usage


wpf_add_setting( $metabox_id, $option_id, $args, $data );

wpf_add_metabox( 'options', 'general', __( 'General Settings', t() ) );
wpf_add_setting( 'general', 'textbox', array( 'type' => 'textbox', 'label' => __( 'This is a sample textbox', t() ) ) );
wpf_add_setting( 'scripts', 'textarea', array( 'type' => 'textarea', 'label' => __( 'This is a sample textarea', t() ) ) );
wpf_add_setting( 'scripts', 'checkbox', array( 'type' => 'checkbox', 'label' => __( 'This is a sample checkbox', t() ) ) );
wpf_add_setting( 'scripts', 'multi-checkbox', array( 'type' => 'checkbox', 'label' => __( 'Choose your Taste:', t() ) ),
array( 'Vanilla', 'Strawberry', 'Chocolate' ) );
wpf_add_setting( 'general', 'custom', array( 'type' => 'custom' ), __( 'This is custom! Here's an hr tag:', t() ) );
wpf_add_setting( 'aioseo', 'multi-radio', array( 'type' => 'radio', 'label' => __( 'Which Color?', t() ) ), array( 'Blue', 'Green',
'Yellow' ) );
wpf_add_setting( 'aioseo', 'select', array( 'type' => 'select', 'label' => 'Choose an option:' ), array( 'Option #1', 'Option
#2', 'Option #3' ) );
wpf_add_setting( 'general', 'multi-select', array( 'type' => 'select', 'label' => 'Choose multiple options:', 'multiple' =>
true ), array( 'Option #1', 'Option #2', 'Option #3' ) );
wpf_add_setting( 'scripts', 'upload', array( 'type' => 'upload', 'label' => 'Upload a Logo:' ) );
wpf_add_setting( 'scripts', 'color', array( 'type' => 'color', 'label' => 'Choose your Color:' ) );
wpf_add_setting( 'info', 'callback', array( 'type' => 'callback' ), 'foobar' );


WP Framework
has
Theme Options
API

Theme Options API
Store global theme metadata

• add_theme_option();
• get_theme_option();
• update_theme_option();
• delete_theme_option();


Backend
wpf_add_setting( 'aioseo', 'seo-title', 'checkbox',
array( 'label' => 'Append site name to page titles' ) );

Front End
<?php get_theme_option(‘seo-title’); ?>


WP Framework
does
Future Proof Theming


Bad

index.php file:

<?php plugin_function_in_template(); ?>


GOOD
index.php file:

<?php do_action( ‘before_content’ ); ?>

plugin file:

add_action(‘before_content’,‘plugin_function_in_template’);


WP Framework
is
Pluggable


wpf_register_class( $handle, $class );

file: custom-functions.php
add_action( ‘wpf_init’, ‘register_theme_classes’ );

function register_theme_classes() {
wpf_register_class( ‘theme’, ‘Custom_Theme’ );
}

class Custom_Theme extends WPF {
function Custom_Theme() {
$this->WPF( array(
‘content_width’ => 500,
‘text_domain’ => ‘custom-theme’,
) );
}
}


wpf_register_class( ‘theme’, ‘WPF’ );

file: class-wpf-template-tags.php

class WPF extends WPF_Template_Tags {

...

function site_title() {
$args = $this->parse_attrs( $args );
$tag = ( is_home() || is_front_page() ) ? 'h1' : 'div';
printf( '<%s><span><a href="%s" title="%s" rel="home">%3$s</a></span></
%1$s>', $tag, site_url('/'), esc_attr( get_bloginfo('name') ) );
}
}




}

class Custom_Theme extends WPF {
function Custom_Theme() {
$this->WPF( array(
‘content_width’ => 500,
‘text_domain’ => ‘custom-theme’,
) );
}

function site_title() {
echo ‘<h1>’. get_bloginfo('name') .’<h1>’;
}
}


wpf_register_contextual_class( $handle, $class );

wpf_register_contextual_class( ‘assets’, ‘Theme_Assets’ );
}

class Theme_Assets {
function Theme_Assets() {
// runs on every page
}

function front_page() {
// runs only on the front page
}
}


wpf_register_contextual_class( $handle, $class );

wpf_load_contextual_classes(); wpf_template_hierarchy();

is_front_page()
is_home()
is_singular()
is_archive()
is_tax()
is_category()
is_tag()
is_author()
is_date()
is_year()
is_month()
get_query_var( 'w' )
is_day()
is_search()
is_404()


WP Framework
supports
BuddyPress


Demo


That’s all folks.
Questions?


@wcmtl

More Related Content

What's hot

Viewers also liked

Similar to @wcmtl

Recently uploaded

@wcmtl

Editor's Notes