The document introduces Elastic, a WYSIWYG theme editor for WordPress aimed at average users and developers, allowing for infinite layouts and live editing capabilities. It discusses the modular theming framework and how users can create themes by adapting existing ones, emphasizing a flexible yet structured approach to theme development. The author, Daryl Koopersmith, invites interested individuals to contribute to the project and offers contact information for further inquiries.

1. ElasticYour theme’s future WYSIWYG editor.Daryl Koopersmith

2. Who is this guy?Daryl KoopersmithWordPress: Google Summer of Code 2009Junior, Washington University in St. Louisdaryl@elastictheme.org@drylk

3. ThanksBeau LebensAutomatticianAmazing mentor

4. ThanksJane WellsAutomatticianGSoC and WCNYC organizer

5. What makesWordPress great?

6. You

7. What else makesWordPress great?

8. FlexibilityCaters to every difficulty levelAll flexible, except…

9. Theme OptionsRely on theme developersVary in quality, often bloatedLeave a lot to be desired

10. Introducing ElasticA WYSIWYG theme editor for WordPress.

11. User GroupsAverage usersDevelopers

12. The Editor

13. Freedom

14. Infinite LayoutsUsing modulesWYSIWYKOG

16. Any StyleLive editingWYSIWYGThe typography panel

17. “Some people are going to make some ________________________themes with this.”—Beau LebensFLOWERY 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 FrameworkThe 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 ThemingCan be created by an editorCreate only what’s necessaryDRY

27. LayoutEditor friendlyDefined in one fileReadableA 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 & InheritanceLevels of contextSpecificCascade

31. Context in WordPress

32. Contextual HooksThe APIA day in the life of…elastic_do_cascade(“hook”);Context-specific hookselastic_do_specific();elastic_apply_specific();Cascading hookselastic_do_cascade();elastic_apply_cascade();Formats hooks for youelastic_format_hook();

33. ViewsVisual representation of a context

34. Views in WordPresspage-level

35. what if you…Make views module-level?

36. Views in Elasticmodule-levelHeader Viewindex.phpContent ViewPage Viewtag-5.phpSidebarViewarchive.php

37. module-level views meanFine-grained control

38. combining concepts:Module Views

39. Module APIs

40. Framework Filesystem/library/customstyle.css

41. /custom contains:View foldersOne for each module typeContain views for that module typefunctions.phpstyle.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. NOIn fact, it’s mostlycopy-and-paste.

45. WP Theme ConventionsMost themes have a consistent layoutMost 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 fileOne layout file for the entire themeMatch modules with <div> elements

48. Write a layout file

49. Write a content viewTypical 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 startedPreset module viewsStill limiting!Stuck with the default HTML

54. How can the editor harness the framework’s power?

55. Base ThemesConnecting the framework and the editor.

56. The BridgeEditor ThemeBase ThemeFramework ThemeLibrary

57. What is a base theme?A templateA 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 themeWYSIWYG can be overwhelmingHundreds of HTML elements

64. Controlled flexibility

65. ConsistencyTypographyColor palettesGrids

66. ElasticCSSExtension of CSS languageFamiliar!Easy to adapt framework themes

67. Custom ModulesPackage complex CSSBreadcrumbs, menus, etc.

68. Combine modules from multiple base themes

69. Theme Distribution

70. Where do themes live?

71. Where do themes live?Editor ThemesThe databaseExport as a child theme

72. DistributionChild 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 UIDevelop database interactionCreate an ElasticCSS interpreterImprove the FrameworkWrite documentationTesting, testing, testing!

77. Get in touch.Daryl Koopersmithelastictheme.orgdaryl@elastictheme.orgIRC: koopersmith@drylk

78. Questions? Comments?Daryl Koopersmithelastictheme.orgdaryl@elastictheme.orgIRC: koopersmith@drylk