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() }}

Developing WordPress with Roots Bedrock/Sage

Other General Notes/Tricks for Building Roots/Sage Theme

One response to “Developing WordPress with Roots Bedrock/Sage”

Leave a Reply Cancel reply