Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
#wcdenver 
@contentjones
_s v. genesis
#wcdenver 
@contentjones
_s or genesis
#wcdenver 
@contentjones
#wcdenver 
@contentjones
things I must confess
1.  a bit of a relativist – no Right Way
2.  custom theming is hard
3.  rec...
#wcdenver 
@contentjones
i know this feeling well
#wcdenver 
@contentjones
my dev environment circa 2012
coda/codekit/mamp
#wcdenver 
@contentjones
my dev environment
#wcdenver 
@contentjones
my dev environment
video of live reload
#wcdenver 
@contentjones
blank themes or theme frameworks*
_s
roots
bones
starkers


check out starters with built in
css ...
#wcdenver 
@contentjones
blank themes or theme frameworks*
total control

(total responsibility)
easier and faster

(once ...
#wcdenver 
@contentjones
the design v2
#wcdenver 
@contentjones
step 1: build static html site
#wcdenver 
@contentjones
_s
 genesis
step 2: choose your theme base
//underscores.me
1.  download theme
- sass/oocss
2.  i...
#wcdenver 
@contentjones
step 3: add styles and scripts
SASS can be handled several ways

1.  @import main.scss into style...
#wcdenver 
@contentjones
_S stylesheets
#wcdenver 
@contentjones
genesis stylesheets
#wcdenver 
@contentjones
_s
 genesis
step 4: enqueue css and scripts in functions.php






style.css is handled by genesis
#wcdenver 
@contentjones
step 5: add the rest of your header.php markup
_s
genesis
#wcdenver 
@contentjones
step 5: add off canvas divs
_s – code in header.php
genesis – code in functions.php
#wcdenver 
@contentjones
using a function to insert stuff

add_action( 'genesis_before', 'theme_offcanvas_begin', 10 );
fu...
#wcdenver 
@contentjones
genesis visual hook guide plugin
#wcdenver 
@contentjones
step 6: close off canvas divs
_s – code in footer.php
genesis – code in functions.php
#wcdenver 
@contentjones
step 7: add in site-title and menu
_s – code in header.php
_genesis – header right widget area
#wcdenver 
@contentjones
step 8: finish off with the footer creds, ©, etc.
_s – code in footer.php
_genesis – simple edits ...
#wcdenver 
@contentjones
starting to look like a website
#wcdenver 
@contentjones
content templates
header.php


template hierarchy: the homepage
depends on settings > reading

if...
#wcdenver 
@contentjones
front-page.php
#wcdenver 
@contentjones
a simplified page template with default loop
#wcdenver 
@contentjones
page template with custom query
#wcdenver 
@contentjones
first section of front-page.php
#wcdenver 
@contentjones
second section of front-page.php
#wcdenver 
@contentjones
genesis front-page.php
#wcdenver 
@contentjones
voila
#wcdenver 
@contentjones
source code for each version
#wcdenver 
@contentjones
resources for theming with blank starters
#wcdenver 
@contentjones
resources for theming with blank starters
#wcdenver 
@contentjones
resources for theming with blank starters
#wcdenver 
@contentjones
resources for theming with genesis
#wcdenver 
@contentjones
resources for theming with genesis
#wcdenver 
@contentjones
resources for theming with genesis
#wcdenver 
@contentjones
Thank you!
Nächste SlideShare
Wird geladen in …5
×

_s v. genesis

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

Ähnliche Bücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

Ähnliche Hörbücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen
  • Als Erste(r) kommentieren

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

×