WordCamp MSP 2010

Rapid Theme Development using a Theme Framework Ptah Dunbar WordPress Core Contributor m@ptahdunbar.com @ptahdunbar Rapid Theme Development using a Theme Framework WordCamp MSP

About Me • 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 & DevPress – Professional WordPress Solutions – Justin Tadlock, Tung Do, Patrick Daly, & myself == WordPress awesomeness. – Working on a few business models • I love to Travel – Aspiring World Traveler – Previously lived in Luxembourg, Atlanta & Thailand • Languages – Learn spanish & arabic as well as improving french & german fluency. Rapid Theme Development using a Theme Framework WordCamp MSP

What is Rapid Theme Development? “The ability to try out a new idea with very little commitment.” Rapid Theme Development using a Theme Framework WordCamp MSP

What is a Theme Framework? “Souped up parent theme.” Rapid Theme Development using a Theme Framework WordCamp MSP

What makes a Theme Framework? ‣ Functions.php – Loaded on every page before the page is displayed ‣ WordPress Plugin System – 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 their parent theme. Rapid Theme Development using a Theme Framework WordCamp MSP

WordPress Plugin System ‣ Action Hooks – Events that take place within WordPress ‣ Filter Hooks – Modify data before an action takes place. Rapid Theme Development using a Theme Framework WordCamp MSP

WordPress Plugin System Action Hooks ‣ init – Fires when all of WordPress is loaded right before the display ‣ publish_post – Event that fires when a post is published ‣ wp_head – Event that fires within the theme’s <head> tag Rapid Theme Development using a Theme Framework WordCamp MSP

WordPress Plugin System Filter Hooks ‣ wp_title – Filters the <title> tag ‣ the_title – Filters the title of a post ‣ the_content – Filters the content of a post Rapid Theme Development using a Theme Framework WordCamp MSP

Two types of Theme Frameworks ‣ Options based Theme Frameworks – Provides you with various types of options to control aspects of your theme without editing tempate files ‣ Starter Theme Frameworks – Provide you with the bare minimum theme requirements Rapid Theme Development using a Theme Framework WordCamp MSP

Thesis by DIYThemes Rapid Theme Development using a Theme Framework WordCamp MSP

Headway by Headway Themes Rapid Theme Development using a Theme Framework WordCamp MSP

Builder by iThemes Rapid Theme Development using a Theme Framework WordCamp MSP

Genesis by StudioPress Rapid Theme Development using a Theme Framework WordCamp MSP

Sandbox theme by Scott Wallick Rapid Theme Development using a Theme Framework WordCamp MSP

Starkers by Elliot Jay Stocks Rapid Theme Development using a Theme Framework WordCamp MSP

Whiteboard by Bold Perspecive Labs Rapid Theme Development using a Theme Framework WordCamp MSP

WP Framework by Ptah Dunbar Rapid Theme Development using a Theme Framework WordCamp MSP

WP Framework Features Rapid Theme Development using a Theme Framework WordCamp MSP

WP Framework has Organization Rapid Theme Development using a Theme Framework WordCamp MSP

Organization ‣ THEME_CSS_URL ‣ THEME_JS_URL ‣ THEME_IMG_URL ‣ CHILD_THEME_CSS_URL ‣ CHILD_THEME_JS_URL ‣ CHILD_THEME_IMG_URL ‣ Add your own: ‣ wpf_templating_constants Rapid Theme Development using a Theme Framework WordCamp MSP

WP Framework does Rapid Development Rapid Theme Development using a Theme Framework WordCamp MSP

Rapid Theming with WP Framework ‣ Stylesheets – reset.css – typography.css – master.css ‣ Javascripting – script.js with jQuery loaded ‣ Custom Functions – custom-functions.php Rapid Theme Development using a Theme Framework WordCamp MSP

WP Framework has HTML5/CSS3 Rapid Theme Development using a Theme Framework WordCamp MSP

WP Framework has modernizr Rapid Theme Development using a Theme Framework WordCamp MSP

WP Framework has Device Dection Rapid Theme Development using a Theme Framework WordCamp MSP

WP Framework has a CSS Framework Rapid Theme Development using a Theme Framework WordCamp MSP

WPF: CSS Framework wp_enqueue_style( 'grid', WPF_EXT_URI . '/grid.php', null, '12-54-30-22' ); ‣ How many columns: 12 ‣ Width of columns: 54 (px) ‣ Width of gutters: 30 (px) ‣ Base line-height: 22 (px) Rapid Theme Development using a Theme Framework WordCamp MSP

WPF: CSS Framework Rapid Theme Development using a Theme Framework WordCamp MSP

WP Framework has Theme Options Rapid Theme Development using a Theme Framework WordCamp MSP

add_theme_support( ‘theme-options’ ); Rapid Theme Development using a Theme Framework WordCamp MSP

wpf_register_metabox( $page_slug, $id, $title, $column, $priority ); function theme_options() { wpf_register_metabox( 'options', 'aioseo', 'All in one SEO', 1 ); wpf_register_metabox( 'options', 'scripts', 'Theme Scripts', 2 ); wpf_register_metabox( 'options', 'robots', 'General Settings', 3 ); wpf_register_metabox( 'options', 'info', 'Theme Information', 4 ); } Rapid Theme Development using a Theme Framework WordCamp MSP

Rapid Theme Development using a Theme Framework WordCamp MSP

wpf_register_option( $box_id, $option_id, $field_type, $args, $data ); wpf_register_option( 'aioseo', 'title', 'checkbox', array( 'label' => 'Append site name to page titles' ) ); wpf_register_option( 'aioseo', 'robots', 'checkbox', array( 'label' => 'Choose which title to use' ), $options ); wpf_register_option( 'general', 'general-stuff', 'select', array( 'label' => 'Display post types:' ), array( 'Post', 'Page', 'Attachment' ) ); wpf_register_option( 'general', 'pf', 'checkbox', array( 'label' => 'Enable Post Formats' ) ); wpf_register_option( 'general', 'wnm', 'checkbox', array( 'label' => 'Use <code>wp_nav_menu</code>' ) ); wpf_register_option( 'scripts', 'wpf-scripts', 'textarea', array( 'label' => 'Insert <code>wp_head</code> scripts here:', 'attr' => array( 'rows' => 5 ) ) ); wpf_register_option( 'scripts', 'wpf-scripts2', 'textarea', array( 'label' => 'Insert <code>wp_footer</code> scripts here:', 'attr' => array( 'rows' => 5 ) ) ); wpf_register_option( 'info', 'wpf-info', 'custom', $info ); Rapid Theme Development using a Theme Framework WordCamp MSP

Rapid Theme Development using a Theme Framework WordCamp MSP

WP Framework has Theme Options API Rapid Theme Development using a Theme Framework WordCamp MSP

Theme Options API THEME_ID ‣ add_theme_option(); ‣ get_theme_option(); ‣ update_theme_option(); ‣ delete_theme_option(); Rapid Theme Development using a Theme Framework WordCamp MSP

Backend wpf_register_option( 'aioseo', 'seo-title', 'checkbox', array( 'label' => 'Append site name to page titles' ) ); Front End <?php get_theme_option(‘seo-title’); ?> Rapid Theme Development using a Theme Framework WordCamp MSP

WP Framework does Future Proof Theming Rapid Theme Development using a Theme Framework WordCamp MSP

Bad index.php file: <?php plugin_function_in_template(); ?> Rapid Theme Development using a Theme Framework WordCamp MSP

GOOD index.php file: <?php do_action( ‘before_content’ ); ?> plugin file: add_action(‘before_content’,‘plugin_function_in_template’); Rapid Theme Development using a Theme Framework WordCamp MSP

WP Framework is Pluggable Rapid Theme Development using a Theme Framework WordCamp MSP

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’, ) ); } } Rapid Theme Development using a Theme Framework WordCamp MSP

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') ) ); } } Rapid Theme Development using a Theme Framework WordCamp MSP

wpf_register_class( ‘theme’, ‘Custom_Theme’ ); 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’, ) ); } function site_title() { echo ‘<h1>’. get_bloginfo('name') .’<h1>’; } } Rapid Theme Development using a Theme Framework WordCamp MSP

wpf_register_contextual_class( $handle, $class ); file: custom-functions.php add_action( ‘wpf_init’, ‘register_theme_classes’ ); function register_theme_classes() { 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 } } Rapid Theme Development using a Theme Framework WordCamp MSP

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() Rapid Theme Development using a Theme Framework WordCamp MSP

WP Framework will have Automatic Updates Rapid Theme Development using a Theme Framework WordCamp MSP

WP Framework will include BuddyPress Support Rapid Theme Development using a Theme Framework WordCamp MSP

WP Framework is being used right now Rapid Theme Development using a Theme Framework WordCamp MSP

golfwebdesign.com 51 Rapid Theme Development using a Theme Framework WordCamp MSP

lemnonjuice.com 52 Rapid Theme Development using a Theme Framework WordCamp MSP

soundlessroom.org 53 Rapid Theme Development using a Theme Framework WordCamp MSP

thelordsacre.org 54 Rapid Theme Development using a Theme Framework WordCamp MSP

That’s all folks. ‣ Download WP Framework – http://ptahdunbar.com/downloads/wp-framework-0.3-beta.zip ‣ Email – m@ptahdunbar.com ‣ Twitter – @ptahdunbar Rapid Theme Development using a Theme Framework WordCamp MSP

WordCamp MSP 2010

by ptahdunbar

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 2

Statistics

WordCamp MSP 2010 Presentation Transcript