fbpx
NeONBRAND Marketing & Business Development Experts
Contact Us
Site Navigation
  • Home
  • SEO
  • Social Media
  • Websites
  • Consulting
  • Contact Us
    • Las Vegas, NV
    • St. George, UT
    • Cedar City, UT
    • Provo, UT
  • Extras
    • About
    • Team
    • Portfolio
    • Website Hosting
    • Blog
    • Ebooks
    • Digital Marketing Dictionary

Developing WordPress with Roots Bedrock/Sage

Originally posted: May 30, 2018 by Kenny Eliason. Leave a comment
Scroll to Next
roots bedrock sage
Get Updates to Your Inbox!
This field is for validation purposes and should be left unchanged.

Home » Websites » WordPress Tips and Tutorials » Developing WordPress with Roots Bedrock/Sage

Reading Time: 2 minutes
  • Twitter
  • Facebook
  • Pinterest
  • LinkedIn

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() }}
  • Twitter
  • Facebook
  • Pinterest
  • LinkedIn
Published: May 30, 2018
Updated: August 26, 2021
Headline: Developing WordPress with Roots Bedrock/Sage
Image: roots bedrock sage Height: Width:

Publisher: NeONBRAND https://neonbrand.com
NeONBRAND https://neonbrand.com/app/themes/neonbrand/dist/images/logo-gray_280c67fe.png 98 120

« The Kurt & Kenny Podcast Episode 13: Return on SEO
The Kurt & Kenny Podcast Episode 14: When It’s Time to Say Goodbye »

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

  1. Arjan Arjan says:
    December 22, 2018 at 5:06 pm

    This is absolutely great! Thanks so much for sharing!

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

About the Author
Kenny Eliason
Kenny Eliason
Having grown up the son of a marketer, the skills of the trade are pumping through his blood. When you couple that with his programming and computer knowledge, you get an explosive combination. Kenny has been an avid digital marketer for over 9 years now, often being the first to recognize the hottest trends coming to the market. In his free time, Kenny loves downhill mountain biking. He calls it his "old man sport" since BMX was what he did as a teenager and it's not quite as easy to ride those little bikes anymore. Kenny is also a huge technology enthusiast, specifically when it comes to Apple products - did someone say, fanboy? Those close to him are often asking for help solving tech-related problems which often results with them saying, "man, you can fix anything!"
Search
Search
Blog Categories
  • Instagram Marketing (6)
  • E-Commerce Support (1)
  • Keywords for SEO (3)
  • WordPress Tips and Tutorials (17)
  • LinkedIn Marketing (2)
  • Consulting (15)
  • Websites (12)
  • Content for SEO (33)
  • Link Building for SEO (6)
  • Marketing Strategy (60)
  • Twitter Marketing (6)
  • Facebook Marketing (33)
  • Local SEO (13)
  • Business Consulting (35)
  • The Kurt & Kenny Podcast! (13)
  • Web Development (4)
  • Video Marketing (10)
  • Uncategorized (1)
  • Website Design (21)
  • Social Media Marketing (94)
  • Search Engine Optimization (82)
  • Home
  • Search Engine Optimization
  • Social Media
  • Website Design
  • Business Consulting
  • Digital Marketing
  • Video Marketing
  • Email Marketing
  • WooCommerce Development
  • Traditional Advertising
  • Retail Marketing
  • Dentist Marketing
  • Hotel Marketing
  • Medical Marketing
NeONBRAND Newsletter
Don't live with FOMO. Get subscribed to our newsletter and never worry about missing the awesomeness ever again.

"*" indicates required fields

This field is for validation purposes and should be left unchanged.

(702) 706-NeON
  • Las Vegas, NV
  • St. George, UT
  • Cedar City, UT
  • Provo, UT
  • NW Las Vegas, NV
  • Sitemap
  • © 2023 NeONBRAND. All Rights Reserved.