• Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
985
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
15
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • \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

Transcript

  • 1. WordCamp Montreal 2011Custom Themes from Scratch using a Theme Framework @ptahdunbar - #wcmtl
  • 2. Custom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • 3. 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
  • 4. 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
  • 5. 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
  • 6. 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
  • 7. 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
  • 8. Theme Framework Continuum User-Based DD-based ThemeTheme Frameworks FrameworksCustom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • 9. Theme Framework Continuum Sandbox User-Based DD-based ThemeTheme Frameworks Frameworks Thematic HybridCustom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • 10. Theme Framework Continuum WP Framework Sandbox User-Based DD-based ThemeTheme Frameworks Frameworks Thematic HybridCustom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • 11. Thesis by DIYThemesCustom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • 12. Headway by Headway ThemesCustom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • 13. Genesis by StudioPressCustom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • 14. Sandbox theme by Scott WallickCustom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • 15. Starkers by Elliot Jay StocksCustom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • 16. Whiteboard by Bold Perspecive LabsCustom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • 17. Top 10 WP Framework FeaturesCustom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • 18. WP Framework has OrganizationCustom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • 19. 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
  • 20. WP Framework does Rapid DevelopmentCustom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • 21. 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
  • 22. WP Framework has HTML5/CSS3Custom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • 23. WP Framework has Device DetectionCustom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • 24. WP Framework has a CSS FrameworkCustom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • 25. 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
  • 26. CSS Grids in WP FrameworkCustom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • 27. WP Framework has Theme OptionsCustom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • 28. add_theme_support( ‘theme-options’ );Custom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • 29. add_theme_support( ‘theme-options’ );Custom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • 30. 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
  • 31. Theme Options API Example UsageCustom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • 32. 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
  • 33. Theme Options API Example UsageCustom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • 34. WP Framework has Theme Options APICustom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • 35. 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
  • 36. 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
  • 37. WP Framework does Future Proof ThemingCustom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • 38. Bad index.php file: <?php plugin_function_in_template(); ?>Custom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • 39. 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
  • 40. Custom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • 41. WP Framework is PluggableCustom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • 42. 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
  • 43. 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
  • 44. 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
  • 45. 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
  • 46. 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
  • 47. WP Framework supports BuddyPressCustom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • 48. Custom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • 49. DemoCustom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
  • 50. That’s all folks. Questions?Custom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl