More Related Content Similar to Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009 (20) Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 20092. Who is this guy? Daryl Koopersmith WordPress: Google Summer of Code 2009 Junior, Washington University in St. Louis daryl@elastictheme.org @drylk 9. Theme Options Rely on theme developers Vary in quality, often bloated Leave a lot to be desired 17. “Some people are going to make some ________________________themes with this.”—Beau Lebens FLOWERY ADJECTIVES 18. “Some people are going to make some crazy-ugly Myspace-style themes with this.”—Beau Lebens 21. The Framework The foundation. The nitty-gritty. Hang on to your hats, folks. We’re in for a bumpy ride. 27. Layout Editor friendly Defined in one file Readable A Basic Layout $layout = new Layout( array( new Header(), new Group(‘container’, array( new Content(), new Sidebar(‘primary’), new Sidebar(‘secondary’) )) )); 32. Contextual Hooks The API A day in the life of… elastic_do_cascade(“hook”); Context-specific hooks elastic_do_specific(); elastic_apply_specific(); Cascading hooks elastic_do_cascade(); elastic_apply_cascade(); Formats hooks for you elastic_format_hook(); 41. /custom contains: View folders One for each module type Contain views for that module type functions.php style.css 43. Is it hard to make a Framework theme? Do I have to rewrite my themes from scratch? 45. WP Theme Conventions Most themes have a consistent layout Most files differ only in the Content section 46. Most WP theme files look something like this: <?phpget_header(); ?> <div id=“wrapper”> <div id=“content”> <!-- Content goes here --> </div> <?php include (TEMPLATEPATH . '/sidebar.primary.php'); ?> <?php include (TEMPLATEPATH . '/sidebar.secondary.php'); ?> </div> <?phpget_footer(); ?> Adapting Your Theme 47. Write a layout file One layout file for the entire theme Match modules with <div> elements 49. Write a content view Typical WP theme file: <?phpget_header(); ?> <div id=“wrapper”> <div id=“content”> <!-- Content goes here --> </div> <?php include (TEMPLATEPATH . '/sidebar.primary.php'); ?> <?php include (TEMPLATEPATH . '/sidebar.secondary.php'); ?> </div> <?phpget_footer(); ?> Step 1: COPY <!-- Content goes here --> Content view file: Step 2: PASTE <!-- Content goes here --> 53. A default theme? Get the user started Preset module views Still limiting! Stuck with the default HTML 57. What is a base theme? A template A set of modules used in the Editor 61. My CSS is pixel perfect!One small change and— 63. Not good for the developer,not good for the user. Nobody enjoys a broken theme WYSIWYG can be overwhelming Hundreds of HTML elements 71. Where do themes live? Editor Themes The database Export as a child theme 75. I am a student (I’m not bald, though.) 76. If you’re interested… Expand and improve the Editor UI Develop database interaction Create an ElasticCSS interpreter Improve the Framework Write documentation Testing, testing, testing! 77. Get in touch. Daryl Koopersmith elastictheme.org daryl@elastictheme.org IRC: koopersmith @drylk Editor's Notes For elastic,framework != parent theme Not just a collection of hooks and functions Changes how WP themes work All WordPress pages have a contextBest match vs contextWP themes don’t inheritCascading:Context with inheritance The way something appears in the browser. Page-level, but really only differ with content One module at a time as opposed to one page at a time Why stop at module level?Comparisons to CarringtonAdds another (unnecessary) level of abstractionCrucial to a central layout, prevents repetition Change the header on the home pageHide a “contact” sidebar on the contact page Best of both worldsRun the most context-specific viewPass the result into a cascading filter style.cssThe only file outside of /custom you editOnly states the theme informationStyles defined in /custom/style.css Give examples for view folders This is why we don’t break modules down further—compatibility WP themes have different HTML structures Blessing and a curse.The user controls the layout of the theme. Can the user edit every HTML element?How does the editor know what the user can change? What can the user change? Fix the height of a headerParsed by PHP: create color palettes, linked styles Module settings. Standalone modules. The database:MU compatible!Avoids filesystem issues.Export as child theme:Includes any base theme files. (Grandchild themes don’t exist.)