Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Intermediate to Advanced Genesis Workshop - WordCamp Miami 2015

Intermediate to Advanced Genesis Workshop - WordCamp Miami 2015

Jesse Petersen

May 28, 2015
Tweet

More Decks by Jesse Petersen

Other Decks in Technology

Transcript

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

    View full-size slide

  2. #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

    View full-size slide

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

    View full-size slide

  4. #WCMIA @jpetersen
    WordCamp Miami 2015 #WCMIA @jpetersen
    WordCamp Miami 2015

    View full-size slide

  5. #WCMIA @jpetersen
    WordCamp Miami 2015 #WCMIA @jpetersen
    WordCamp Miami 2015

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  8. #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

    View full-size slide

  9. #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

    View full-size slide

  10. #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

    View full-size slide

  11. #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

    View full-size slide

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

    View full-size slide

  13. #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

    View full-size slide

  14. #WCMIA @jpetersen
    WordCamp Miami 2015

    View full-size slide

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

    View full-size slide

  16. #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

    View full-size slide

  17. #WCMIA @jpetersen
    WordCamp Miami 2015 @jpetersen
    Sass
    install the Sublime
    Package Control:

    https://packagecontrol.io/installation
    or
    http://css2sass.herokuapp.com

    View full-size slide

  18. #WCMIA @jpetersen
    WordCamp Miami 2015 @jpetersen
    Sass

    View full-size slide

  19. #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

    View full-size slide

  20. #WCMIA @jpetersen
    WordCamp Miami 2015 @jpetersen
    Sass

    View full-size slide

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

    View full-size slide

  22. #WCMIA @jpetersen
    WordCamp Miami 2015
    QUESTIONS?

    View full-size slide