Your SlideShare is downloading. ×
  • Like
  • Save
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.


Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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


Learn more at …

Learn more at

Full slides of the Elastic presentation at WordCamp NYC 2009.

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    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.)


  • 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
  • 3. Thanks
    Beau Lebens
    Amazing mentor
  • 4. Thanks
    Jane Wells
    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
  • 12. The Editor
  • 13. Freedom
  • 14. Infinite Layouts
    Using modules
  • 15.
  • 16. Any Style
    Live editing
    The typography panel
  • 17. “Some people are going to make some ________________________themes with this.”—Beau Lebens
  • 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
  • 24.
  • 25.
  • 26.
  • 27. Layout
    Editor friendly
    Defined in one file
    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
  • 31. Context in WordPress
  • 32. Contextual Hooks
    The API
    A day in the life of…
    Context-specific hooks
    Cascading hooks
    Formats hooks for you
    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
    Content View
    Page View
  • 37. module-level views meanFine-grained control
  • 38. combining concepts:Module Views
  • 39. Module APIs
  • 40. Framework Filesystem
  • 41. /custom contains:
    View folders
    One for each module type
    Contain views for that module type
  • 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
  • 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 -->
    <?php include (TEMPLATEPATH . '/sidebar.primary.php'); ?>
    <?php include (TEMPLATEPATH . '/sidebar.secondary.php'); ?>
    <?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 -->
    <?php include (TEMPLATEPATH . '/sidebar.primary.php'); ?>
    <?php include (TEMPLATEPATH . '/sidebar.secondary.php'); ?>
    <?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
  • 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
    Color palettes
  • 66. ElasticCSS
    Extension of CSS language
    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
    IRC: koopersmith
  • 78. Questions? Comments?
    Daryl Koopersmith
    IRC: koopersmith