• Like

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.

WordCamp MSP 2010

  • 2,612 views
Uploaded on

Rapid Theme Development using a Theme Framework

Rapid Theme Development using a Theme Framework

More in: Technology
  • 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
2,612
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
35
Comments
0
Likes
2

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
  • Brief Intro
    Greet everyone, thanks for having me here, etc.
    My name
    What WP Framework is
    Tell them the agenda
    Introduction
    Current state of WordPress Themes
    Why WP Framework was built (primary, and only goal) and how it attempts to solve the issues of WordPress themes today
    What is a Theme Framework
    WP Framework’s Principles
    WP Framework’s feature set
    Mention a few WordPress themes in the works for WP Framework
    The future of WP Framework
    Credits and shout outs
    Q&A
  • Introduction
    My personal background
    My career background
    Design by Craftsmen
    How I got into WordPress
  • The state of the Theme
    …
    …
    …
  • The state of the Theme
    …
    …
    …
  • The state of the Theme
    …
    …
    …
  • The state of the Theme
    …
    …
    …
  • The state of the Theme
    …
    …
    …
  • The state of the Theme
    …
    …
    …
  • The state of the Theme
    …
    …
    …
  • The state of the Theme
    …
    …
    …
  • The state of the Theme
    …
    …
    …
  • The state of the Theme
    …
    …
    …
  • The state of the Theme
    …
    …
    …
  • The state of the Theme
    …
    …
    …
  • The state of the Theme
    …
    …
    …
  • The state of the Theme
    …
    …
    …
  • The state of the Theme
    …
    …
    …
  • The state of the Theme
    …
    …
    …
  • The state of the Theme
    …
    …
    …
  • The state of the Theme
    …
    …
    …
  • The state of the Theme
    …
    …
    …
  • The state of the Theme
    …
    …
    …
  • The state of the Theme
    …
    …
    …
  • The state of the Theme
    …
    …
    …
  • The state of the Theme
    …
    …
    …
  • The state of the Theme
    …
    …
    …
  • The state of the Theme
    …
    …
    …
  • The state of the Theme
    …
    …
    …
  • The state of the Theme
    …
    …
    …
  • The state of the Theme
    …
    …
    …
  • The state of the Theme
    …
    …
    …
  • The state of the Theme
    …
    …
    …
  • The state of the Theme
    …
    …
    …
  • The state of the Theme
    …
    …
    …
  • The state of the Theme
    …
    …
    …
  • The state of the Theme
    …
    …
    …
  • The state of the Theme
    …
    …
    …
  • The state of the Theme
    …
    …
    …
  • The state of the Theme
    …
    …
    …
  • The state of the Theme
    …
    …
    …
  • The state of the Theme
    …
    …
    …
  • The state of the Theme
    …
    …
    …
  • The state of the Theme
    …
    …
    …
  • The state of the Theme
    …
    …
    …
  • The state of the Theme
    …
    …
    …
  • The state of the Theme
    …
    …
    …
  • The state of the Theme
    …
    …
    …
  • The state of the Theme
    …
    …
    …
  • The state of the Theme
    …
    …
    …
  • The state of the Theme
    …
    …
    …




  • The state of the Theme
    …
    …
    …

Transcript

  • 1. 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
  • 2. 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
  • 3. 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
  • 4. What is a Theme Framework? “Souped up parent theme.” Rapid Theme Development using a Theme Framework WordCamp MSP
  • 5. 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
  • 6. 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
  • 7. 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
  • 8. 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
  • 9. 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
  • 10. Thesis by DIYThemes Rapid Theme Development using a Theme Framework WordCamp MSP
  • 11. Headway by Headway Themes Rapid Theme Development using a Theme Framework WordCamp MSP
  • 12. Builder by iThemes Rapid Theme Development using a Theme Framework WordCamp MSP
  • 13. Genesis by StudioPress Rapid Theme Development using a Theme Framework WordCamp MSP
  • 14. Sandbox theme by Scott Wallick Rapid Theme Development using a Theme Framework WordCamp MSP
  • 15. Starkers by Elliot Jay Stocks Rapid Theme Development using a Theme Framework WordCamp MSP
  • 16. Whiteboard by Bold Perspecive Labs Rapid Theme Development using a Theme Framework WordCamp MSP
  • 17. WP Framework by Ptah Dunbar Rapid Theme Development using a Theme Framework WordCamp MSP
  • 18. WP Framework Features Rapid Theme Development using a Theme Framework WordCamp MSP
  • 19. WP Framework has Organization Rapid Theme Development using a Theme Framework WordCamp MSP
  • 20. 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
  • 21. WP Framework does Rapid Development Rapid Theme Development using a Theme Framework WordCamp MSP
  • 22. 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
  • 23. WP Framework has HTML5/CSS3 Rapid Theme Development using a Theme Framework WordCamp MSP
  • 24. WP Framework has modernizr Rapid Theme Development using a Theme Framework WordCamp MSP
  • 25. WP Framework has Device Dection Rapid Theme Development using a Theme Framework WordCamp MSP
  • 26. WP Framework has a CSS Framework Rapid Theme Development using a Theme Framework WordCamp MSP
  • 27. 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
  • 28. WPF: CSS Framework Rapid Theme Development using a Theme Framework WordCamp MSP
  • 29. WP Framework has Theme Options Rapid Theme Development using a Theme Framework WordCamp MSP
  • 30. add_theme_support( ‘theme-options’ ); Rapid Theme Development using a Theme Framework WordCamp MSP
  • 31. add_theme_support( ‘theme-options’ ); Rapid Theme Development using a Theme Framework WordCamp MSP
  • 32. 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
  • 33. Rapid Theme Development using a Theme Framework WordCamp MSP
  • 34. 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
  • 35. Rapid Theme Development using a Theme Framework WordCamp MSP
  • 36. WP Framework has Theme Options API Rapid Theme Development using a Theme Framework WordCamp MSP
  • 37. 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
  • 38. 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
  • 39. WP Framework does Future Proof Theming Rapid Theme Development using a Theme Framework WordCamp MSP
  • 40. Bad index.php file: <?php plugin_function_in_template(); ?> Rapid Theme Development using a Theme Framework WordCamp MSP
  • 41. 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
  • 42. WP Framework is Pluggable Rapid Theme Development using a Theme Framework WordCamp MSP
  • 43. 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
  • 44. 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
  • 45. 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
  • 46. 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
  • 47. 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
  • 48. WP Framework will have Automatic Updates Rapid Theme Development using a Theme Framework WordCamp MSP
  • 49. WP Framework will include BuddyPress Support Rapid Theme Development using a Theme Framework WordCamp MSP
  • 50. WP Framework is being used right now Rapid Theme Development using a Theme Framework WordCamp MSP
  • 51. golfwebdesign.com 51 Rapid Theme Development using a Theme Framework WordCamp MSP
  • 52. lemnonjuice.com 52 Rapid Theme Development using a Theme Framework WordCamp MSP
  • 53. soundlessroom.org 53 Rapid Theme Development using a Theme Framework WordCamp MSP
  • 54. thelordsacre.org 54 Rapid Theme Development using a Theme Framework WordCamp MSP
  • 55. 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