This is a running document that I’m maintaining as an ongoing learning process for my junior developers. Please feel free to comment and leave feedback if I can do anything better.

  • from iTerm, navigate to your “code” folder
    • composer create-project roots/bedrock {sitename}
      • *{sitename} should be replaced with the folder name for the client project
    • cd {sitename}
    • composer install
    • cd web/app/themes
    • composer create-project roots/sage {themename}
      • follow all prompts
    • cd {themename}
    • composer install
  • open sublime text project for site
    • open /composer.json (file at root of site)
    • paste in the following after line 33 (just after the repository for wpackagist.org)
    • paste in the following after line 65 (just after roots/wp-password-bcrypt, be sure to add a comma on line 65 before starting a new line
    • save file
  • from iTerm, navigate to your site’s root folder
    • composer update
    • cd web/wp/wp-content/themes
    • rm -rf *
      • *shouldn’t be any more folders in the “themes” folder
    • cd ../plugins
    • rm -rf akismet
    • rm -rd hello.php
    • cd ../../../ (should be at root of site)
    • git init
    • git add .
    • git commit -a -m 'Initial Commit'
    • git remote add origin {https link to bitbucket repo}
    • git push -u origin master
  • open WordPress dashboard in browser
    • Plugins -> Activate All
    • Forms -> Enter license
    • Pages -> Add New (for each page in design)
      • *Make sure to create a “Home” and “Blog” page
    • Appearance -> Menus
      • Menu Name = Primary
      • Create Menu
      • Display location -> Primary Navigation = checked
      • Save Menu
    • Appearance -> Widgets
      • Add a Custom HTML widget to the Footer and add Lorem Ipsum to the title and content
      • Save
    • Settings -> General
      • Remove Tagline
      • Timezone -> Los Angeles (unless client is in another timezone, IE Mountain = Denver)
      • Week Starts On -> Sunday
      • Save Changes
    • Settings -> Reading
      • Your homepage displays -> A static page ->
        • Homepage: Home
        • Posts page: Blog
    • Settings -> Permalinks
      • Custom Structure (copy paste) /%category%/%postname%/
      • Save Changes
  • open sublime text project for site
    • navigate to web/app/themes/{themename}
    • open resources/views/layouts/app.blade.php
      • line 7, remove “container” class
    • open app/setup.php
      • Google Font: after line 13, inside the add_action, paste this at line 14: github Google Font in Sage
        • replace fonts with correct fonts from design, get link from https://fonts.google.com
      • Custom Logo: after line 32, paste contents of github add theme support for custom logo
      • New Footer Sidebars: at line 93, create sidebar sections for footer (probably going to need 3, maybe 4 sections depending on the design. Name them “Footer One”, “Footer Two”, etc.) New footer sidebars
      • If necessary, declare WooCommerce Support: after line 39, paste contents of WooCommerce Support
    • download this file and save in app/controllers/
    • open app/helpers.php
      • line 7 (copy paste): require_once 'controllers/wp-bootstrap-navwalker.php';
    • open resources/assets/views/header.blade.php
    • open resources/assets/scripts/routes/common.js
    • if using font awesome, follow instructions here: Use Font Awesome 5 in your Sage theme
    • download this file and save in resources/assets/styles/components/
    • open resources/assets/styles/main.scss
      • line 20, add new line (copy paste): @import "components/gravityforms";

Other General Notes/Tricks for Building Roots/Sage Theme

  • Numeric navigation