_s v. genesis

#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.  recently broke up with grunt and

bower

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

_srootsbones

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

#wcdenver

@contentjones

blank themes or theme frameworks*

total control

(total responsibility)

easier and faster

(once you get to know it)

#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.  install theme3.  add styles

//studiopress.com

1.  purchase/download–  $59.95, GPL

2.  install theme3.  create child theme4.  add styles

#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

#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 ); function theme_offcanvas_begin() { //do stuff }

command hook function to add priority }   }   }   }  

#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 plugin is good for this

#wcdenver

@contentjones

starting to look like a website

#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

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