Tweet
Tweet

Slide 1

Slide 1 text

#WCMIA @jpetersen WordCamp Miami 2015 Jesse Petersen INTERMEDIATE TO ADVANCED GENESIS

Slide 2

Slide 2 text

#WCMIA @jpetersen WordCamp Miami 2015 411 ON ME WordPress since 2005 Founded agency in 2009 Genesis since inception StudioPress preferred developer Genesis instructor @ Treehouse Genesis pro at WP Valet

Slide 3

Slide 3 text

#WCMIA @jpetersen WordCamp Miami 2015 THEME PICK A #WCMIA @jpetersen WordCamp Miami 2015

Slide 4

Slide 4 text

#WCMIA @jpetersen WordCamp Miami 2015 #WCMIA @jpetersen WordCamp Miami 2015

Slide 5

Slide 5 text

#WCMIA @jpetersen WordCamp Miami 2015 #WCMIA @jpetersen WordCamp Miami 2015

Slide 6

Slide 6 text

#WCMIA @jpetersen WordCamp Miami 2015 FRONT-PAGE vs HOME

Slide 7

Slide 7 text

#WCMIA @jpetersen WordCamp Miami 2015 https://codex.wordpress.org/ Template_Hierarchy#The_Template_Hierarchy_In_Detail renders blog posts index - front-page templates
 take precedence over home template home.php index.php Home

Slide 8

Slide 8 text

#WCMIA @jpetersen WordCamp Miami 2015 http://www.billerickson.net/dont-use-genesis-blog- template/ renders the site front page - whether blog posts
 index or a static page front-page.php Front Page setting (settings -> reading) Home Page (blog index) setting (settings -> reading) Ideally, if you have a front-page & blog page, you will
 use Reading Settings to assign the blog page to put
 WordPress in control over the loop. Front-page

Slide 9

Slide 9 text

#WCMIA @jpetersen WordCamp Miami 2015 FUNCTIONS PLUGIN @jpetersen FUNCTIONS.PHP SNIPPET vs layout customizations vs functionality customizations PLUGIN SNIPPETS https://bitbucket.org/pmgllc/developer-plugin-interface

Slide 10

Slide 10 text

#WCMIA @jpetersen WordCamp Miami 2015 FUNCTIONS PLUGIN @jpetersen ITEMS FOR A scripts that add functionality that the site needs custom post types custom metaboxes tracking scripts removing elements to be gone regardless of theme

Slide 11

Slide 11 text

#WCMIA @jpetersen WordCamp Miami 2015 FUNCTIONS.PHP SNIPPET @jpetersen ITEMS FOR A moving a menu removing elements for a specific look/layout filtering the byline custom footer function enqueueing theme-specific fonts or styles or scripts registering sidebars

Slide 12

Slide 12 text

#WCMIA @jpetersen WordCamp Miami 2015 MOBILE-FIRST (PREPARE TO BLOW YOUR MIND) You’re flipping the stylesheet on its head - YOU WILL MESS UP

Slide 13

Slide 13 text

#WCMIA @jpetersen WordCamp Miami 2015 EASY BASE Brian Gardner’s Mobile-First theme the hard part is done already key principle: phone view with
 no media queries, min-width
 viewport queries from smallest
 up through desktop

Slide 14

Slide 14 text

#WCMIA @jpetersen WordCamp Miami 2015

Slide 15

Slide 15 text

#WCMIA @jpetersen WordCamp Miami 2015 SASS-IFY @jpetersen YOU KNOW YOU WANT TO because Sass all the things

Slide 16

Slide 16 text

#WCMIA @jpetersen WordCamp Miami 2015 @jpetersen Sass it’s like CSS only it can use
 variables & mixins to reduce repetition & make project-wide edits easy

Slide 17

Slide 17 text

#WCMIA @jpetersen WordCamp Miami 2015 @jpetersen Sass install the Sublime Package Control: 
 https://packagecontrol.io/installation or http://css2sass.herokuapp.com

Slide 18

Slide 18 text

#WCMIA @jpetersen WordCamp Miami 2015 @jpetersen Sass

Slide 19

Slide 19 text

#WCMIA @jpetersen WordCamp Miami 2015 @jpetersen Sass convert the CSS you want into Sass
 then break up the style.css into the
 TOC groups to be tidy use partials by those names remember: order matters

Slide 20

Slide 20 text

#WCMIA @jpetersen WordCamp Miami 2015 @jpetersen Sass

Slide 21

Slide 21 text

#WCMIA @jpetersen WordCamp Miami 2015 @jpetersen Sass https://github.com/gregrickaby/ genesis-sample RESOURCES: http://sass-lang.com http://thesassway.com

Slide 22

Slide 22 text

#WCMIA @jpetersen WordCamp Miami 2015 QUESTIONS?