Learn more at http://elastictheme.org Full slides of the Elastic presentation at WordCamp NYC 2009.

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

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

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

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—

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