• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
 

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

on

  • 26,354 views

Learn more at http://elastictheme.org

Learn more at http://elastictheme.org

Full slides of the Elastic presentation at WordCamp NYC 2009.

Statistics

Views

Total Views
26,354
Views on SlideShare
10,181
Embed Views
16,173

Actions

Likes
17
Downloads
0
Comments
3

18 Embeds 16,173

http://wordpressinside.ru 8496
http://profweb.org 3606
http://elastictheme.org 3602
http://achmatim.net 198
http://wpfan.com.ua 147
http://desirade.posterous.com 46
http://www.slideshare.net 32
http://translate.googleusercontent.com 15
http://nl.com.com 7
http://webcache.googleusercontent.com 5
http://hghltd.yandex.net 4
http://xss.yandex.net 4
http://www.funkeemunkeeland.com 3
http://translate.baiducontent.com 2
http://jarluk.hostenko.com 2
http://www.wordpressinside.ru 2
http://localhost:8888 1
http://posterous.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

13 of 3 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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.)

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

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