Presentation for Wordcamp Denver 2015, comparing the _S starter theme and the Genesis framework.

1. #wcdenver
@contentjones
_s v. genesis

2. #wcdenver
@contentjones
_s or genesis

3. #wcdenver
@contentjones

4. #wcdenver
@contentjones
things I must confess
1. a bit of a relativist – no Right Way
2. custom theming is hard
3. recently broke up with grunt and
bower

5. #wcdenver
@contentjones
i know this feeling well

6. #wcdenver
@contentjones
my dev environment circa 2012
coda/codekit/mamp

7. #wcdenver
@contentjones
my dev environment

8. #wcdenver
@contentjones
my dev environment
video of live reload

9. #wcdenver
@contentjones
blank themes or theme frameworks*
_s
roots
bones
starkers
check out starters with built in
css frameworks like wpforge,
heisenberg, or sage (roots +
bootstrap)
genesis*
thesis
woo/canvas
*i’ve only used genesis

10. #wcdenver
@contentjones
blank themes or theme frameworks*
total control
(total responsibility)
easier and faster
(once you get to know it)

11. #wcdenver
@contentjones
the design v2

12. #wcdenver
@contentjones
step 1: build static html site

13. #wcdenver
@contentjones
_s
genesis
step 2: choose your theme base
//underscores.me
1. download theme
- sass/oocss
2. install theme
3. add styles
//studiopress.com
1. purchase/download
– $59.95, GPL
2. install theme
3. create child theme
4. add styles

14. #wcdenver
@contentjones
step 3: add styles and scripts
SASS can be handled several ways
1. @import main.scss into style.scss, output to styles.css.
2. Load 2 stylesheets. One such as app.css that is all the
compiled files. And then the required style.css. (This
could be nice for manual edits.)
*style.css is required in theme folder

15. #wcdenver
@contentjones
_S stylesheets

16. #wcdenver
@contentjones
genesis stylesheets

17. #wcdenver
@contentjones
_s
genesis
step 4: enqueue css and scripts in functions.php
style.css is handled by genesis

18. #wcdenver
@contentjones
step 5: add the rest of your header.php markup
_s
genesis

19. #wcdenver
@contentjones
step 5: add off canvas divs
_s – code in header.php
genesis – code in functions.php

20. #wcdenver
@contentjones
using a function to insert stuff
add_action( 'genesis_before', 'theme_offcanvas_begin', 10 );
function theme_offcanvas_begin() {
//do stuff
}
command
hook
function to add
priority
}
}
}
}

21. #wcdenver
@contentjones
genesis visual hook guide plugin

22. #wcdenver
@contentjones
step 6: close off canvas divs
_s – code in footer.php
genesis – code in functions.php

23. #wcdenver
@contentjones
step 7: add in site-title and menu
_s – code in header.php
_genesis – header right widget area

24. #wcdenver
@contentjones
step 8: finish off with the footer creds, ©, etc.
_s – code in footer.php
_genesis – simple edits plugin is good for this

25. #wcdenver
@contentjones
starting to look like a website

26. #wcdenver
@contentjones
content templates
header.php
template hierarchy: the homepage
depends on settings > reading
if we choose a static page
1. front-page.php
2. page template route
3. home.php
4. index.php
if latest posts in settings > reading
1. home.php
2. index.php
footer.php

27. #wcdenver
@contentjones
front-page.php

28. #wcdenver
@contentjones
a simplified page template with default loop

29. #wcdenver
@contentjones
page template with custom query

30. #wcdenver
@contentjones
first section of front-page.php

31. #wcdenver
@contentjones
second section of front-page.php

32. #wcdenver
@contentjones
genesis front-page.php

33. #wcdenver
@contentjones
voila

34. #wcdenver
@contentjones
source code for each version

35. #wcdenver
@contentjones
resources for theming with blank starters

36. #wcdenver
@contentjones
resources for theming with blank starters

37. #wcdenver
@contentjones
resources for theming with blank starters

38. #wcdenver
@contentjones
resources for theming with genesis

39. #wcdenver
@contentjones
resources for theming with genesis

40. #wcdenver
@contentjones
resources for theming with genesis

41. #wcdenver
@contentjones
Thank you!