@wcmtl
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • 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
1,439
On Slideshare
1,417
From Embeds
22
Number of Embeds
2

Actions

Shares
Downloads
15
Comments
0
Likes
1

Embeds 22

http://www.techgig.com 20
http://www.linkedin.com 2

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