• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
@wcmtl
 

@wcmtl

on

  • 1,244 views

 

Statistics

Views

Total Views
1,244
Views on SlideShare
1,222
Embed Views
22

Actions

Likes
1
Downloads
14
Comments
0

2 Embeds 22

http://www.techgig.com 20
http://www.linkedin.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
  • \n
  • How to pronounce my name :)\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • The state of the Theme\n…\n…\n…\n
  • The state of the Theme\n…\n…\n…\n
  • The state of the Theme\n…\n…\n…\n
  • The state of the Theme\n…\n…\n…\n
  • The state of the Theme\n…\n…\n…\n
  • The state of the Theme\n…\n…\n…\n
  • The state of the Theme\n…\n…\n…\n
  • The state of the Theme\n…\n…\n…\n
  • The state of the Theme\n…\n…\n…\n
  • required files, then talk about all the other optional templates\n
  • The state of the Theme\n…\n…\n…\n
  • The state of the Theme\n…\n…\n…\n
  • The state of the Theme\n…\n…\n…\n
  • The state of the Theme\n…\n…\n…\n
  • The state of the Theme\n…\n…\n…\n
  • The state of the Theme\n…\n…\n…\n
  • The state of the Theme\n…\n…\n…\n
  • \n
  • The state of the Theme\n…\n…\n…\n
  • The state of the Theme\n…\n…\n…\n
  • The state of the Theme\n…\n…\n…\n
  • The state of the Theme\n…\n…\n…\n
  • The state of the Theme\n…\n…\n…\n
  • The state of the Theme\n…\n…\n…\n
  • The state of the Theme\n…\n…\n…\n
  • The state of the Theme\n…\n…\n…\n
  • The state of the Theme\n…\n…\n…\n
  • \n
  • The state of the Theme\n…\n…\n…\n
  • The state of the Theme\n…\n…\n…\n
  • The state of the Theme\n…\n…\n…\n
  • The state of the Theme\n…\n…\n…\n
  • The state of the Theme\n…\n…\n…\n
  • The state of the Theme\n…\n…\n…\n
  • The state of the Theme\n…\n…\n…\n
  • The state of the Theme\n…\n…\n…\n
  • The state of the Theme\n…\n…\n…\n
  • The state of the Theme\n…\n…\n…\n
  • The state of the Theme\n…\n…\n…\n
  • The state of the Theme\n…\n…\n…\n
  • The state of the Theme\n…\n…\n…\n
  • The state of the Theme\n…\n…\n…\n
  • \n

@wcmtl @wcmtl Presentation Transcript

  • WordCamp Montreal 2011Custom 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.Custom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • Creating a modern WordPress theme is detail work. For a full reference, visit: ➡ http://codex.wordpress.org/Theme_Development ➡ http://codex.wordpress.org/Theme_ReviewCustom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • Why Theme Frameworks? • Empowering users • To make theme development more fun • Because it’s what the cools kids do.Custom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • 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.Custom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • 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-basedCustom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • Theme Framework Continuum User-Based DD-based ThemeTheme Frameworks FrameworksCustom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • Theme Framework Continuum Sandbox User-Based DD-based ThemeTheme Frameworks Frameworks Thematic HybridCustom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • Theme Framework Continuum WP Framework Sandbox User-Based DD-based ThemeTheme Frameworks Frameworks Thematic HybridCustom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • Thesis by DIYThemesCustom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • Headway by Headway ThemesCustom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • Genesis by StudioPressCustom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • Sandbox theme by Scott WallickCustom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • Starkers by Elliot Jay StocksCustom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • Whiteboard by Bold Perspecive LabsCustom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • Top 10 WP Framework FeaturesCustom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • WP Framework has OrganizationCustom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • Organization ‣ THEME_CSS ‣ THEME_JS ‣ THEME_IMG ‣ CHILD_THEME_CSS ‣ CHILD_THEME_JS ‣ CHILD_THEME_IMG ‣ Add your own: ‣ wpf_templating_constantsCustom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • WP Framework does Rapid DevelopmentCustom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • Rapid Theming with WP Framework‣ Stylesheets – reset.css – typography.css – master.css‣ Javascripting – scripts.js with jQuery loaded‣ Custom Functions – custom-functions.phpCustom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • WP Framework has HTML5/CSS3Custom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • WP Framework has Device DetectionCustom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • WP Framework has a CSS FrameworkCustom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • 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)Custom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • CSS Grids in WP FrameworkCustom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • WP Framework has Theme OptionsCustom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • add_theme_support( ‘theme-options’ );Custom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • add_theme_support( ‘theme-options’ );Custom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • 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 ); }Custom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • Theme Options API Example UsageCustom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • 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! Heres 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 ); Custom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • Theme Options API Example UsageCustom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • WP Framework has Theme Options APICustom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • Theme Options API Store global theme metadata • add_theme_option(); • get_theme_option(); • update_theme_option(); • delete_theme_option();Custom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • Backend wpf_add_setting( aioseo, seo-title, checkbox, array( label => Append site name to page titles ) ); Front End <?php get_theme_option(‘seo-title’); ?>Custom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • WP Framework does Future Proof ThemingCustom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • Bad index.php file: <?php plugin_function_in_template(); ?>Custom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • GOOD index.php file: <?php do_action( ‘before_content’ ); ?> plugin file: add_action(‘before_content’,‘plugin_function_in_template’);Custom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • Custom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • WP Framework is PluggableCustom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • 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’, ) ); } }Custom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • 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) ) ); } }Custom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • 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>’; } }Custom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • 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 } }Custom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • 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()Custom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • WP Framework supports BuddyPressCustom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • Custom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • DemoCustom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • That’s all folks. Questions?Custom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl