Your SlideShare is downloading. ×
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,346
views

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