Developing WordPress with Roots Bedrock/Sage

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)
    • gitbhub bedrock respository link
  • 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
    • github bedrock add plugins link
    • *uncomment the woocommerce line if needed
  • 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/
    • github WP Bootstrap Navwalker
  • open app/helpers.php
    • line 7 (copy paste): require_once 'controllers/wp-bootstrap-navwalker.php';
  • open resources/assets/views/header.blade.php
    • replace line 6 (copy paste): github wp_nav_menu for sage
  • open resources/assets/scripts/routes/common.js
    • line 4, inside init() (copy paste): github bootstrap4 menu magic
  • 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/
    • Gravity Forms Styling for Bootstrap
  • 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
  • put this at the bottom of your /app/helpers.php file: Numeric Page Navigation for Roots Sage Theme
  • and then use it by replacing any instance of {!! get_the_posts_navigation() !!} with:
    {{ App\page_navi() }}