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_Review
Custom 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-based
Custom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
8. Theme Framework Continuum
User-Based DD-based Theme
Theme Frameworks Frameworks
Custom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
9. Theme Framework Continuum
Sandbox
User-Based DD-based Theme
Theme Frameworks Frameworks
Thematic
Hybrid
Custom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
10. Theme Framework Continuum
WP Framework Sandbox
User-Based DD-based Theme
Theme Frameworks Frameworks
Thematic
Hybrid
Custom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
14. Sandbox theme by Scott Wallick
Custom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
15. Starkers by Elliot Jay Stocks
Custom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
16. Whiteboard by Bold Perspecive Labs
Custom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
17. Top 10
WP Framework
Features
Custom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
18. WP Framework
has
Organization
Custom 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_constants
Custom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
20. WP Framework
does
Rapid Development
Custom 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.php
Custom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
22. WP Framework
has
HTML5/CSS3
Custom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
23. WP Framework
has
Device Detection
Custom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
24. WP Framework
has a
CSS Framework
Custom 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 Framework
Custom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
27. WP Framework
has
Theme Options
Custom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
33. Theme Options API
Example Usage
Custom Themes from Scratch using a Theme Framework — @ptahdunbar #wcmtl
34. WP Framework
has
Theme Options
API
Custom 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 Theming
Custom 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
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