Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

WordCamp MSP 2010

on

  • 3,297 views

Rapid Theme Development using a Theme Framework

Rapid Theme Development using a Theme Framework

Statistics

Views

Total Views
3,297
Views on SlideShare
3,295
Embed Views
2

Actions

Likes
2
Downloads
35
Comments
0

1 Embed 2

http://alurawebdesign.com 2

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Brief Intro <br /> Greet everyone, thanks for having me here, etc. <br /> My name <br /> What WP Framework is <br /> Tell them the agenda <br /> Introduction <br /> Current state of WordPress Themes <br /> Why WP Framework was built (primary, and only goal) and how it attempts to solve the issues of WordPress themes today <br /> What is a Theme Framework <br /> WP Framework&#x2019;s Principles <br /> WP Framework&#x2019;s feature set <br /> Mention a few WordPress themes in the works for WP Framework <br /> The future of WP Framework <br /> Credits and shout outs <br /> Q&A <br />
  • Introduction <br /> My personal background <br /> My career background <br /> Design by Craftsmen <br /> How I got into WordPress <br />
  • The state of the Theme <br /> &#x2026; <br /> &#x2026; <br /> &#x2026; <br />
  • The state of the Theme <br /> &#x2026; <br /> &#x2026; <br /> &#x2026; <br />
  • The state of the Theme <br /> &#x2026; <br /> &#x2026; <br /> &#x2026; <br />
  • The state of the Theme <br /> &#x2026; <br /> &#x2026; <br /> &#x2026; <br />
  • The state of the Theme <br /> &#x2026; <br /> &#x2026; <br /> &#x2026; <br />
  • The state of the Theme <br /> &#x2026; <br /> &#x2026; <br /> &#x2026; <br />
  • The state of the Theme <br /> &#x2026; <br /> &#x2026; <br /> &#x2026; <br />
  • The state of the Theme <br /> &#x2026; <br /> &#x2026; <br /> &#x2026; <br />
  • The state of the Theme <br /> &#x2026; <br /> &#x2026; <br /> &#x2026; <br />
  • The state of the Theme <br /> &#x2026; <br /> &#x2026; <br /> &#x2026; <br />
  • The state of the Theme <br /> &#x2026; <br /> &#x2026; <br /> &#x2026; <br />
  • The state of the Theme <br /> &#x2026; <br /> &#x2026; <br /> &#x2026; <br />
  • The state of the Theme <br /> &#x2026; <br /> &#x2026; <br /> &#x2026; <br />
  • The state of the Theme <br /> &#x2026; <br /> &#x2026; <br /> &#x2026; <br />
  • The state of the Theme <br /> &#x2026; <br /> &#x2026; <br /> &#x2026; <br />
  • The state of the Theme <br /> &#x2026; <br /> &#x2026; <br /> &#x2026; <br />
  • The state of the Theme <br /> &#x2026; <br /> &#x2026; <br /> &#x2026; <br />
  • The state of the Theme <br /> &#x2026; <br /> &#x2026; <br /> &#x2026; <br />
  • The state of the Theme <br /> &#x2026; <br /> &#x2026; <br /> &#x2026; <br />
  • The state of the Theme <br /> &#x2026; <br /> &#x2026; <br /> &#x2026; <br />
  • The state of the Theme <br /> &#x2026; <br /> &#x2026; <br /> &#x2026; <br />
  • The state of the Theme <br /> &#x2026; <br /> &#x2026; <br /> &#x2026; <br />
  • The state of the Theme <br /> &#x2026; <br /> &#x2026; <br /> &#x2026; <br />
  • The state of the Theme <br /> &#x2026; <br /> &#x2026; <br /> &#x2026; <br />
  • The state of the Theme <br /> &#x2026; <br /> &#x2026; <br /> &#x2026; <br />
  • The state of the Theme <br /> &#x2026; <br /> &#x2026; <br /> &#x2026; <br />
  • The state of the Theme <br /> &#x2026; <br /> &#x2026; <br /> &#x2026; <br />
  • The state of the Theme <br /> &#x2026; <br /> &#x2026; <br /> &#x2026; <br />
  • The state of the Theme <br /> &#x2026; <br /> &#x2026; <br /> &#x2026; <br />
  • The state of the Theme <br /> &#x2026; <br /> &#x2026; <br /> &#x2026; <br />
  • The state of the Theme <br /> &#x2026; <br /> &#x2026; <br /> &#x2026; <br />
  • The state of the Theme <br /> &#x2026; <br /> &#x2026; <br /> &#x2026; <br />
  • The state of the Theme <br /> &#x2026; <br /> &#x2026; <br /> &#x2026; <br />
  • The state of the Theme <br /> &#x2026; <br /> &#x2026; <br /> &#x2026; <br />
  • The state of the Theme <br /> &#x2026; <br /> &#x2026; <br /> &#x2026; <br />
  • The state of the Theme <br /> &#x2026; <br /> &#x2026; <br /> &#x2026; <br />
  • The state of the Theme <br /> &#x2026; <br /> &#x2026; <br /> &#x2026; <br />
  • The state of the Theme <br /> &#x2026; <br /> &#x2026; <br /> &#x2026; <br />
  • The state of the Theme <br /> &#x2026; <br /> &#x2026; <br /> &#x2026; <br />
  • The state of the Theme <br /> &#x2026; <br /> &#x2026; <br /> &#x2026; <br />
  • The state of the Theme <br /> &#x2026; <br /> &#x2026; <br /> &#x2026; <br />
  • The state of the Theme <br /> &#x2026; <br /> &#x2026; <br /> &#x2026; <br />
  • The state of the Theme <br /> &#x2026; <br /> &#x2026; <br /> &#x2026; <br />
  • The state of the Theme <br /> &#x2026; <br /> &#x2026; <br /> &#x2026; <br />
  • The state of the Theme <br /> &#x2026; <br /> &#x2026; <br /> &#x2026; <br />
  • The state of the Theme <br /> &#x2026; <br /> &#x2026; <br /> &#x2026; <br />
  • The state of the Theme <br /> &#x2026; <br /> &#x2026; <br /> &#x2026; <br />
  • The state of the Theme <br /> &#x2026; <br /> &#x2026; <br /> &#x2026; <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • The state of the Theme <br /> &#x2026; <br /> &#x2026; <br /> &#x2026; <br />

WordCamp MSP 2010 WordCamp MSP 2010 Presentation Transcript

  • 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
  • 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