Using Bedrock and Sage with Theme Juice

    We've had a few users ask how to configure Theme Juice to use Bedrock and Sage from the roots.io team, so we thought creating a guide on how to do it would be helpful. It's a relatively straight forward process.

    What is Bedrock?

    Bedrock is a modern WordPress stack that helps you get started with the best development tools and project structure. Our starter template Sprout takes a lot of inspiration from Bedrock's folder structure, but does differ quite a bit to be easier to deploy using Capistrano.

    What is Sage?

    Sage is a WordPress starter theme with a modern development workflow.

    How to use them with Theme Juice

    Go ahead and click on the 'New Project' button and follow the steps below to configure a new project utilizing Bedrock and Sage.

    Bedrock starter template

    Configuring your project

    1. Choose a project name, a development domain as well as an empty folder for your new project.
    2. Select 'other' as your starter template; this allows you to use any git repository as a starter template.
    3. Input https://github.com/roots/bedrock into the starter template repository field.
    4. Since Bedrock does not implement a Juicefile, go ahead and disable that option.

    Finally, since Bedrock utilizes a .env file, you can go ahead and leave everything else at their default setting and create your project.


    Installing WordPress and Bedrock

    While your project is being created, let's go ahead and install WordPress and Bedrock using composer. Open up your favorite terminal, cd into your project's root directory and run the following command:

    composer install
    

    Installing Sage

    Now that we've installed WordPress and Bedrock, we need to install Sage. Thanks to composer, doing that is super simple. From your project's root directory, run the following command:

    composer require roots/sage
    

    Building Sage

    Now that Sage is installed, we need to run the build system. Before we do this, you'll need to cd into the Sage theme directory by running:

    cd web/app/themes/sage
    

    Finally, we can install Sage's dependencies and run the build step:

    npm install
    npm run build
    

    Updating requests to route to /web

    If you've used Bedrock before, you'll know that it serves requests from the /web directory, so we'll need to update our development environment to reflect that. Create a new file called .htaccess with the following contents in your project's root directory:

    RewriteEngine on
    RewriteCond %{REQUEST_URI} !^/web
    RewriteRule ^(.*)$ /web/$1 [NC,L]
    

    You could also SSH into your virtual machine and edit your project's Apache DocumentRoot inside /etc/apache2/sites-enabled/{YOUR_DEV_DOMAIN}.conf, but we're just going to keep it simple and use an .htaccess file.

    Sage theme

    Conclusion

    That's it! You should be able to visit your development domain using your favorite browser and finish the WordPress installation. If you have any questions, feel free to reach out using our support system or on Twitter at @themejuice.

    Happy coding!