ElasticYour theme’s future WYSIWYG editor.<br />Daryl Koopersmith<br />
Who is this guy?<br />Daryl Koopersmith<br />WordPress: Google Summer of Code 2009<br />Junior, Washington University in S...
Thanks<br />Beau Lebens<br />Automattician<br />Amazing mentor<br />
Thanks<br />Jane Wells<br />Automattician<br />GSoC and WCNYC organizer<br />
What makesWordPress great?<br />
You<br />
What else makesWordPress great?<br />
Flexibility<br />Caters to every difficulty level<br />All flexible, except…<br />
Theme Options<br />Rely on theme developers<br />Vary in quality, often bloated<br />Leave a lot to be desired<br />
Introducing Elastic<br />A WYSIWYG theme editor for WordPress.<br />
User Groups<br />Average users<br />Developers<br />
The Editor<br />
Freedom<br />
Infinite Layouts<br />Using modules<br />WYSIWYKOG<br />
Any Style<br />Live editing<br />WYSIWYG<br />The typography panel<br />
“Some people are going to make some ________________________themes with this.”—Beau Lebens<br />FLOWERY ADJECTIVES<br />
“Some people are going to make some crazy-ugly Myspace-style themes with this.”—Beau Lebens<br />
So pretty.<br />
Demo.<br />Get excited.<br />
The Framework<br />The foundation. The nitty-gritty.<br />Hang on to your hats, folks. We’re in for a bumpy ride.<br />
You say tomato,I say tomahhto.<br />
Modular Theming<br />Can be created by an editor<br />Create only what’s necessary<br />DRY<br />
Layout<br />Editor friendly<br />Defined in one file<br />Readable<br />A Basic Layout<br />$layout = new Layout( array(<b...
Built-in Modules<br />
Context in WordPress<br />
Context & Inheritance<br />Levels of context<br />Specific<br />Cascade<br />
Context in WordPress<br />
Contextual Hooks<br />The API<br />A day in the life of…<br />elastic_do_cascade(“hook”);<br />Context-specific hooks<br /...
Views<br />Visual representation of a context<br />
Views in WordPresspage-level<br />
what if you…Make views module-level?<br />
Views in Elasticmodule-level<br />Header View<br />index.php<br />Content View<br />Page View<br />tag-5.php<br />Sidebar<...
module-level views meanFine-grained control<br />
combining concepts:Module Views<br />
Module APIs<br />
Framework Filesystem<br />/library<br />/custom<br />style.css<br />
/custom contains:<br />View folders<br />One for each module type<br />Contain views for that module type<br />functions.p...
Sounds complicated.<br />Where do I come in?<br />
Is it hard to make a Framework theme?<br />Do I have to rewrite my themes from scratch?<br />
NO<br />In fact, it’s mostly<br />copy-and-paste.<br />
WP Theme Conventions<br />Most themes have a consistent layout<br />Most files differ only in the Content section<br />
Most WP theme files look something like this:<br />&lt;?phpget_header(); ?&gt;<br />&lt;div id=“wrapper”&gt;<br />	&lt;div...
Write a layout file<br />One layout file for the entire theme<br />Match modules with &lt;div&gt; elements<br />
Write a layout file<br />
Write a content view<br />Typical WP theme file:<br />&lt;?phpget_header(); ?&gt;<br />&lt;div id=“wrapper”&gt;<br />	&lt;...
A Problem<br />
The editor needs a starting point. <br />
A default theme?<br />Get the user started<br />Preset module views<br />Still limiting!<br />Stuck with the default HTML<...
How can the editor harness the framework’s power?<br />
Base Themes<br />Connecting the framework and the editor.<br />
The Bridge<br />Editor Theme<br />Base Theme<br />Framework Theme<br />Library<br />
What is a base theme?<br />A template<br />A set of modules used in the Editor<br />
Considerations&Implications<br />
Flexibility can bedangerous<br />
Remember…Modular themes.Infinite layouts.Any style.<br />
My CSS is pixel perfect!One small change and—<br />
Not good for the developer,not good for the user.<br />Nobody enjoys a broken theme<br />WYSIWYG can be overwhelming<br />...
Controlled flexibility<br />
Consistency<br />Typography<br />Color palettes<br />Grids<br />
ElasticCSS<br />Extension of CSS language<br />Familiar!<br />Easy to adapt framework themes<br />
Custom Modules<br />Package complex CSS<br />Breadcrumbs, menus, etc.<br />
Combine modules from multiple base themes<br />
Theme Distribution<br />
Where do themes live?<br />
Where do themes live?<br />Editor Themes<br />The database<br />Export as a child theme<br />
Distribution<br />Child themes aren’t on WP Extend<br />
What can I do?<br />
Elastic is a huge project<br />
I am a student<br />(I’m not bald, though.)<br />
If you’re interested…<br />Expand and improve the Editor UI<br />Develop database interaction<br />Create an ElasticCSS in...
Get in touch.<br />Daryl Koopersmith<br />elastictheme.org<br />daryl@elastictheme.org<br />IRC: koopersmith<br />@drylk<b...
Questions? Comments?<br />Daryl Koopersmith<br />elastictheme.org<br />daryl@elastictheme.org<br />IRC: koopersmith<br />@...
Upcoming SlideShare
Loading in...5
×

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

24,556

Published on

Learn more at http://elastictheme.org

Full slides of the Elastic presentation at WordCamp NYC 2009.

Published in: Technology
3 Comments
17 Likes
Statistics
Notes
No Downloads
Views
Total Views
24,556
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
0
Comments
3
Likes
17
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.)
  • Transcript of "Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009"

    1. 1. ElasticYour theme’s future WYSIWYG editor.<br />Daryl Koopersmith<br />
    2. 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. 3. Thanks<br />Beau Lebens<br />Automattician<br />Amazing mentor<br />
    4. 4. Thanks<br />Jane Wells<br />Automattician<br />GSoC and WCNYC organizer<br />
    5. 5. What makesWordPress great?<br />
    6. 6. You<br />
    7. 7. What else makesWordPress great?<br />
    8. 8. Flexibility<br />Caters to every difficulty level<br />All flexible, except…<br />
    9. 9. Theme Options<br />Rely on theme developers<br />Vary in quality, often bloated<br />Leave a lot to be desired<br />
    10. 10. Introducing Elastic<br />A WYSIWYG theme editor for WordPress.<br />
    11. 11. User Groups<br />Average users<br />Developers<br />
    12. 12. The Editor<br />
    13. 13. Freedom<br />
    14. 14. Infinite Layouts<br />Using modules<br />WYSIWYKOG<br />
    15. 15.
    16. 16. Any Style<br />Live editing<br />WYSIWYG<br />The typography panel<br />
    17. 17. “Some people are going to make some ________________________themes with this.”—Beau Lebens<br />FLOWERY ADJECTIVES<br />
    18. 18. “Some people are going to make some crazy-ugly Myspace-style themes with this.”—Beau Lebens<br />
    19. 19. So pretty.<br />
    20. 20. Demo.<br />Get excited.<br />
    21. 21. The Framework<br />The foundation. The nitty-gritty.<br />Hang on to your hats, folks. We’re in for a bumpy ride.<br />
    22. 22. You say tomato,I say tomahhto.<br />
    23. 23. Modular Theming<br />Can be created by an editor<br />Create only what’s necessary<br />DRY<br />
    24. 24.
    25. 25.
    26. 26.
    27. 27. 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 />
    28. 28. Built-in Modules<br />
    29. 29. Context in WordPress<br />
    30. 30. Context & Inheritance<br />Levels of context<br />Specific<br />Cascade<br />
    31. 31. Context in WordPress<br />
    32. 32. 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 />
    33. 33. Views<br />Visual representation of a context<br />
    34. 34. Views in WordPresspage-level<br />
    35. 35. what if you…Make views module-level?<br />
    36. 36. 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 />
    37. 37. module-level views meanFine-grained control<br />
    38. 38. combining concepts:Module Views<br />
    39. 39. Module APIs<br />
    40. 40. Framework Filesystem<br />/library<br />/custom<br />style.css<br />
    41. 41. /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 />
    42. 42. Sounds complicated.<br />Where do I come in?<br />
    43. 43. Is it hard to make a Framework theme?<br />Do I have to rewrite my themes from scratch?<br />
    44. 44. NO<br />In fact, it’s mostly<br />copy-and-paste.<br />
    45. 45. WP Theme Conventions<br />Most themes have a consistent layout<br />Most files differ only in the Content section<br />
    46. 46. 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 />
    47. 47. Write a layout file<br />One layout file for the entire theme<br />Match modules with &lt;div&gt; elements<br />
    48. 48. Write a layout file<br />
    49. 49. 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 />
    50. 50.
    51. 51. A Problem<br />
    52. 52. The editor needs a starting point. <br />
    53. 53. A default theme?<br />Get the user started<br />Preset module views<br />Still limiting!<br />Stuck with the default HTML<br />
    54. 54. How can the editor harness the framework’s power?<br />
    55. 55. Base Themes<br />Connecting the framework and the editor.<br />
    56. 56. The Bridge<br />Editor Theme<br />Base Theme<br />Framework Theme<br />Library<br />
    57. 57. What is a base theme?<br />A template<br />A set of modules used in the Editor<br />
    58. 58. Considerations&Implications<br />
    59. 59. Flexibility can bedangerous<br />
    60. 60. Remember…Modular themes.Infinite layouts.Any style.<br />
    61. 61. My CSS is pixel perfect!One small change and—<br />
    62. 62.
    63. 63. 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 />
    64. 64. Controlled flexibility<br />
    65. 65. Consistency<br />Typography<br />Color palettes<br />Grids<br />
    66. 66. ElasticCSS<br />Extension of CSS language<br />Familiar!<br />Easy to adapt framework themes<br />
    67. 67. Custom Modules<br />Package complex CSS<br />Breadcrumbs, menus, etc.<br />
    68. 68. Combine modules from multiple base themes<br />
    69. 69. Theme Distribution<br />
    70. 70. Where do themes live?<br />
    71. 71. Where do themes live?<br />Editor Themes<br />The database<br />Export as a child theme<br />
    72. 72. Distribution<br />Child themes aren’t on WP Extend<br />
    73. 73. What can I do?<br />
    74. 74. Elastic is a huge project<br />
    75. 75. I am a student<br />(I’m not bald, though.)<br />
    76. 76. 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 />
    77. 77. Get in touch.<br />Daryl Koopersmith<br />elastictheme.org<br />daryl@elastictheme.org<br />IRC: koopersmith<br />@drylk<br />
    78. 78. Questions? Comments?<br />Daryl Koopersmith<br />elastictheme.org<br />daryl@elastictheme.org<br />IRC: koopersmith<br />@drylk<br />

    ×