Help build this fan site of sites built with Roots, the WordPress development kit of choice for making custom sites.

If you just want to learn Roots, this is a good starter project too. Take it apart!

Here's the presentation that was given on May 17, 2017, demoing the project:

Undo the Mess: Use Roots for WordPress Dev - May 17, 2017

This is what you'll need to install to run the stack locally:

Trellis (look in trellis/) is a set of recipes for setting up your servers (using Ansible) and your local development environment (using Vagrant and Virtualbox). Your local dev URL will be built-with-roots.dev when vagrant is running.

• Ansible >= 2.2
• Virtualbox >= 4.3.10
• Vagrant >= 1.8.5
• vagrant-bindfs >= 0.3.1 (Windows users may skip this)
• vagrant-hostmanager

Bedrock (see the site/ directory) organizes your WordPress install in an app-like folder structure with plugins and WordPress itself defined as dependencies.

• Composer

This site is built with Sage 9, a theme development kit that works with Sass, ES6-based Javascript using Webpack for builds, Blade templates, Bootstrap 4, and Browsersync. Very cool. Install node and yarn and you'll have what you need to get running. The theme is found in the site/web/app/themes/built-with-roots/ directory.

• Node.js >= 6.9.x
• Yarn

Once all the requirements are installed, go through these steps to download Ansible's and the theme's dependencies. Then, start the local dev server.

# in the trellis/ directory
$ ansible-galaxy install -r requirements.yml

# in the site/web/app/themes/built-with-roots/ directory
$ composer install
$ yarn install

# in the site/web/app/themes/built-with-roots/ directory
$ yarn run build

# in the trellis/ directory
$ vagrant up

The first time (or every time you run vagrant reload --provision), this will also install Composer's dependencies.

Open built-with-roots.dev

1. Create a Home Page with an intro
2. Assign the Home Page to be the Front Page
3. Activate the plugins
4. Add new sites in the Sites admin menu with a URL, and a screenshot. You can find sites built with roots in the Live Example topic of the Roots Discourse Forum.

To develop the theme with live-reloading in your browser:

# in the trellis/ directory
$ yarn run start

Then visit the site in localhost:3000

Any changes you make will be injected into the page or will reload the page automatically.

The list of site is powered by some Vue.js components so we can get scroll-loading, and so we can get used to working with Webpack and the WP REST API.

Look in the theme's resources/assets/scripts/vue directory to see those components.

Look in the project's Issues for what's next and to pitch in.

1. Fork this repo
2. Commit changes to your copy of the repo
3. Send a pull request

Head over to roots.io or checkout the forum.