Your SlideShare is downloading. ×
0
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

24,532

Published on

Learn more at http://elastictheme.org …

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,532
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
0
Comments
3
Likes
17
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
  • 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

    • 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.
    • 16. Any Style<br />Live editing<br />WYSIWYG<br />The typography panel<br />
    • 17. “Some people are going to make some ________________________themes with this.”—Beau Lebens<br />FLOWERY ADJECTIVES<br />
    • 18. “Some people are going to make some crazy-ugly Myspace-style themes with this.”—Beau Lebens<br />
    • 19. So pretty.<br />
    • 20. Demo.<br />Get excited.<br />
    • 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. You say tomato,I say tomahhto.<br />
    • 23. Modular Theming<br />Can be created by an editor<br />Create only what’s necessary<br />DRY<br />
    • 24.
    • 25.
    • 26.
    • 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. Built-in Modules<br />
    • 29. Context in WordPress<br />
    • 30. Context & Inheritance<br />Levels of context<br />Specific<br />Cascade<br />
    • 31. Context in WordPress<br />
    • 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. Views<br />Visual representation of a context<br />
    • 34. Views in WordPresspage-level<br />
    • 35. what if you…Make views module-level?<br />
    • 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. module-level views meanFine-grained control<br />
    • 38. combining concepts:Module Views<br />
    • 39. Module APIs<br />
    • 40. Framework Filesystem<br />/library<br />/custom<br />style.css<br />
    • 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. Sounds complicated.<br />Where do I come in?<br />
    • 43. Is it hard to make a Framework theme?<br />Do I have to rewrite my themes from scratch?<br />
    • 44. NO<br />In fact, it’s mostly<br />copy-and-paste.<br />
    • 45. WP Theme Conventions<br />Most themes have a consistent layout<br />Most files differ only in the Content section<br />
    • 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. Write a layout file<br />One layout file for the entire theme<br />Match modules with &lt;div&gt; elements<br />
    • 48. Write a layout file<br />
    • 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.
    • 51. A Problem<br />
    • 52. The editor needs a starting point. <br />
    • 53. A default theme?<br />Get the user started<br />Preset module views<br />Still limiting!<br />Stuck with the default HTML<br />
    • 54. How can the editor harness the framework’s power?<br />
    • 55. Base Themes<br />Connecting the framework and the editor.<br />
    • 56. The Bridge<br />Editor Theme<br />Base Theme<br />Framework Theme<br />Library<br />
    • 57. What is a base theme?<br />A template<br />A set of modules used in the Editor<br />
    • 58. Considerations&Implications<br />
    • 59. Flexibility can bedangerous<br />
    • 60. Remember…Modular themes.Infinite layouts.Any style.<br />
    • 61. My CSS is pixel perfect!One small change and—<br />
    • 62.
    • 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. Controlled flexibility<br />
    • 65. Consistency<br />Typography<br />Color palettes<br />Grids<br />
    • 66. ElasticCSS<br />Extension of CSS language<br />Familiar!<br />Easy to adapt framework themes<br />
    • 67. Custom Modules<br />Package complex CSS<br />Breadcrumbs, menus, etc.<br />
    • 68. Combine modules from multiple base themes<br />
    • 69. Theme Distribution<br />
    • 70. Where do themes live?<br />
    • 71. Where do themes live?<br />Editor Themes<br />The database<br />Export as a child theme<br />
    • 72. Distribution<br />Child themes aren’t on WP Extend<br />
    • 73. What can I do?<br />
    • 74. Elastic is a huge project<br />
    • 75. I am a student<br />(I’m not bald, though.)<br />
    • 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. Get in touch.<br />Daryl Koopersmith<br />elastictheme.org<br />daryl@elastictheme.org<br />IRC: koopersmith<br />@drylk<br />
    • 78. Questions? Comments?<br />Daryl Koopersmith<br />elastictheme.org<br />daryl@elastictheme.org<br />IRC: koopersmith<br />@drylk<br />

    ×