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

  • 24,023 views
Published

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
24,023
On SlideShare
0
From Embeds
0
Number of Embeds
5

Actions

Shares
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