Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009


Published on

Learn more at http://elastictheme.org

Full slides of the Elastic presentation at WordCamp NYC 2009.

Published in: Technology
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • 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.)
  • Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009

    1. ElasticYour theme’s future WYSIWYG editor.<br />Daryl Koopersmith<br />
    2. Who is this guy?<br />Daryl Koopersmith<br />WordPress: Google Summer of Code 2009<br />Junior, Washington University in St. Louis<br />daryl@elastictheme.org<br />@drylk<br />
    3. Thanks<br />Beau Lebens<br />Automattician<br />Amazing mentor<br />
    4. Thanks<br />Jane Wells<br />Automattician<br />GSoC and WCNYC organizer<br />
    5. What makesWordPress great?<br />
    6. You<br />
    7. What else makesWordPress great?<br />
    8. Flexibility<br />Caters to every difficulty level<br />All flexible, except…<br />
    9. Theme Options<br />Rely on theme developers<br />Vary in quality, often bloated<br />Leave a lot to be desired<br />
    10. Introducing Elastic<br />A WYSIWYG theme editor for WordPress.<br />
    11. User Groups<br />Average users<br />Developers<br />
    12. The Editor<br />
    13. Freedom<br />
    14. Infinite Layouts<br />Using modules<br />WYSIWYKOG<br />
    15. Any Style<br />Live editing<br />WYSIWYG<br />The typography panel<br />
    16. “Some people are going to make some ________________________themes with this.”—Beau Lebens<br />FLOWERY ADJECTIVES<br />
    17. “Some people are going to make some crazy-ugly Myspace-style themes with this.”—Beau Lebens<br />
    18. So pretty.<br />
    19. Demo.<br />Get excited.<br />
    20. The Framework<br />The foundation. The nitty-gritty.<br />Hang on to your hats, folks. We’re in for a bumpy ride.<br />
    21. You say tomato,I say tomahhto.<br />
    22. Modular Theming<br />Can be created by an editor<br />Create only what’s necessary<br />DRY<br />
    23. Layout<br />Editor friendly<br />Defined in one file<br />Readable<br />A Basic Layout<br />$layout = new Layout( array(<br />new Header(),<br />new Group(‘container’, array(<br />new Content(),<br />new Sidebar(‘primary’),<br />new Sidebar(‘secondary’)<br />))<br />));<br />
    24. Built-in Modules<br />
    25. Context in WordPress<br />
    26. Context & Inheritance<br />Levels of context<br />Specific<br />Cascade<br />
    27. Context in WordPress<br />
    28. Contextual Hooks<br />The API<br />A day in the life of…<br />elastic_do_cascade(“hook”);<br />Context-specific hooks<br />elastic_do_specific();<br />elastic_apply_specific();<br />Cascading hooks<br />elastic_do_cascade();<br />elastic_apply_cascade();<br />Formats hooks for you<br />elastic_format_hook();<br />
    29. Views<br />Visual representation of a context<br />
    30. Views in WordPresspage-level<br />
    31. what if you…Make views module-level?<br />
    32. Views in Elasticmodule-level<br />Header View<br />index.php<br />Content View<br />Page View<br />tag-5.php<br />Sidebar<br />View<br />archive.php<br />
    33. module-level views meanFine-grained control<br />
    34. combining concepts:Module Views<br />
    35. Module APIs<br />
    36. Framework Filesystem<br />/library<br />/custom<br />style.css<br />
    37. /custom contains:<br />View folders<br />One for each module type<br />Contain views for that module type<br />functions.php<br />style.css<br />
    38. Sounds complicated.<br />Where do I come in?<br />
    39. Is it hard to make a Framework theme?<br />Do I have to rewrite my themes from scratch?<br />
    40. NO<br />In fact, it’s mostly<br />copy-and-paste.<br />
    41. WP Theme Conventions<br />Most themes have a consistent layout<br />Most files differ only in the Content section<br />
    42. Most WP theme files look something like this:<br />&lt;?phpget_header(); ?&gt;<br />&lt;div id=“wrapper”&gt;<br /> &lt;div id=“content”&gt;<br />&lt;!-- Content goes here --&gt;<br /> &lt;/div&gt;<br /> &lt;?php include (TEMPLATEPATH . &apos;/sidebar.primary.php&apos;); ?&gt;<br /> &lt;?php include (TEMPLATEPATH . &apos;/sidebar.secondary.php&apos;); ?&gt;<br />&lt;/div&gt;<br />&lt;?phpget_footer(); ?&gt;<br />Adapting Your Theme<br />
    43. Write a layout file<br />One layout file for the entire theme<br />Match modules with &lt;div&gt; elements<br />
    44. Write a layout file<br />
    45. Write a content view<br />Typical WP theme file:<br />&lt;?phpget_header(); ?&gt;<br />&lt;div id=“wrapper”&gt;<br /> &lt;div id=“content”&gt;<br />&lt;!-- Content goes here --&gt;<br /> &lt;/div&gt;<br /> &lt;?php include (TEMPLATEPATH . &apos;/sidebar.primary.php&apos;); ?&gt;<br /> &lt;?php include (TEMPLATEPATH . &apos;/sidebar.secondary.php&apos;); ?&gt;<br />&lt;/div&gt;<br />&lt;?phpget_footer(); ?&gt;<br />Step 1: COPY<br />&lt;!-- Content goes here --&gt;<br />Content view file:<br />Step 2: PASTE<br />&lt;!-- Content goes here --&gt;<br />
    46. A Problem<br />
    47. The editor needs a starting point. <br />
    48. A default theme?<br />Get the user started<br />Preset module views<br />Still limiting!<br />Stuck with the default HTML<br />
    49. How can the editor harness the framework’s power?<br />
    50. Base Themes<br />Connecting the framework and the editor.<br />
    51. The Bridge<br />Editor Theme<br />Base Theme<br />Framework Theme<br />Library<br />
    52. What is a base theme?<br />A template<br />A set of modules used in the Editor<br />
    53. Considerations&Implications<br />
    54. Flexibility can bedangerous<br />
    55. Remember…Modular themes.Infinite layouts.Any style.<br />
    56. My CSS is pixel perfect!One small change and—<br />
    57. Not good for the developer,not good for the user.<br />Nobody enjoys a broken theme<br />WYSIWYG can be overwhelming<br />Hundreds of HTML elements<br />
    58. Controlled flexibility<br />
    59. Consistency<br />Typography<br />Color palettes<br />Grids<br />
    60. ElasticCSS<br />Extension of CSS language<br />Familiar!<br />Easy to adapt framework themes<br />
    61. Custom Modules<br />Package complex CSS<br />Breadcrumbs, menus, etc.<br />
    62. Combine modules from multiple base themes<br />
    63. Theme Distribution<br />
    64. Where do themes live?<br />
    65. Where do themes live?<br />Editor Themes<br />The database<br />Export as a child theme<br />
    66. Distribution<br />Child themes aren’t on WP Extend<br />
    67. What can I do?<br />
    68. Elastic is a huge project<br />
    69. I am a student<br />(I’m not bald, though.)<br />
    70. If you’re interested…<br />Expand and improve the Editor UI<br />Develop database interaction<br />Create an ElasticCSS interpreter<br />Improve the Framework<br />Write documentation<br />Testing, testing, testing!<br />
    71. Get in touch.<br />Daryl Koopersmith<br />elastictheme.org<br />daryl@elastictheme.org<br />IRC: koopersmith<br />@drylk<br />
    72. Questions? Comments?<br />Daryl Koopersmith<br />elastictheme.org<br />daryl@elastictheme.org<br />IRC: koopersmith<br />@drylk<br />