Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

_s v. genesis

437 views

Published on

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

Published in: Technology
  • Be the first to comment

_s v. genesis

  1. 1. #wcdenver @contentjones _s v. genesis
  2. 2. #wcdenver @contentjones _s or genesis
  3. 3. #wcdenver @contentjones
  4. 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. 5. #wcdenver @contentjones i know this feeling well
  6. 6. #wcdenver @contentjones my dev environment circa 2012 coda/codekit/mamp
  7. 7. #wcdenver @contentjones my dev environment
  8. 8. #wcdenver @contentjones my dev environment video of live reload
  9. 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. 10. #wcdenver @contentjones blank themes or theme frameworks* total control (total responsibility) easier and faster (once you get to know it)
  11. 11. #wcdenver @contentjones the design v2
  12. 12. #wcdenver @contentjones step 1: build static html site
  13. 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. 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. 15. #wcdenver @contentjones _S stylesheets
  16. 16. #wcdenver @contentjones genesis stylesheets
  17. 17. #wcdenver @contentjones _s genesis step 4: enqueue css and scripts in functions.php style.css is handled by genesis
  18. 18. #wcdenver @contentjones step 5: add the rest of your header.php markup _s genesis
  19. 19. #wcdenver @contentjones step 5: add off canvas divs _s – code in header.php genesis – code in functions.php
  20. 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. 21. #wcdenver @contentjones genesis visual hook guide plugin
  22. 22. #wcdenver @contentjones step 6: close off canvas divs _s – code in footer.php genesis – code in functions.php
  23. 23. #wcdenver @contentjones step 7: add in site-title and menu _s – code in header.php _genesis – header right widget area
  24. 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. 25. #wcdenver @contentjones starting to look like a website
  26. 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. 27. #wcdenver @contentjones front-page.php
  28. 28. #wcdenver @contentjones a simplified page template with default loop
  29. 29. #wcdenver @contentjones page template with custom query
  30. 30. #wcdenver @contentjones first section of front-page.php
  31. 31. #wcdenver @contentjones second section of front-page.php
  32. 32. #wcdenver @contentjones genesis front-page.php
  33. 33. #wcdenver @contentjones voila
  34. 34. #wcdenver @contentjones source code for each version
  35. 35. #wcdenver @contentjones resources for theming with blank starters
  36. 36. #wcdenver @contentjones resources for theming with blank starters
  37. 37. #wcdenver @contentjones resources for theming with blank starters
  38. 38. #wcdenver @contentjones resources for theming with genesis
  39. 39. #wcdenver @contentjones resources for theming with genesis
  40. 40. #wcdenver @contentjones resources for theming with genesis
  41. 41. #wcdenver @contentjones Thank you!

×