Sass is now an indispensable tool for web designing, and it is true for creating a custom theme. Webpack also helps to make the build process even smoother. There was a slight change on the integration with the latest Webpack 2.x, so here is how.

This example assumes that you are creating a new WordPress child theme with Bedrock, and have already installed node.js and npm.

When managing WordPress and the plugins with Composer via Trellis, I sometimes could not find a plugin or a theme that are not available from the wpackagist repository. This is how to install plugins and themes directly from the vendors’ github repo or download site.

Open composer.json and add repositories. For example to add Woocommerce plugin and the Storefront theme, specify the zip download URL with the package name. Each custom package requires an unique package name. I specified woocommerce-theme for the Storefront as woocommerce is already used by the plugin.

JavaScript

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

"repositories":[

{

"type":"composer",

"url":"https://wpackagist.org"

},

{

"type":"package",

"package":{

"name":"woocommerce/woocommerce",

"type":"wordpress-plugin",

"version":"3.0.1",

"dist":{

"type":"zip",

"url":"https://github.com/woocommerce/woocommerce/archive/3.0.1.zip"

}

}

},

{

"type":"package",

"package":{

"name":"woocommerce-theme/storefront",

"type":"wordpress-theme",

"version":"2.1.8",

"dist":{

"type":"zip",

"url":"https://downloads.wordpress.org/theme/storefront.2.1.8.zip"

}

}

},

],

and requires them also in the same composer.json.

JavaScript

1

2

3

4

5

6

7

8

9

10

11

"require":{

"php":">=5.6",

"composer/installers":"~1.2.0",

"vlucas/phpdotenv":"^2.0.1",

"johnpbloch/wordpress":"4.7.3",

"oscarotero/env":"^1.0",

"roots/wp-password-bcrypt":"1.0.0",

"wpackagist-plugin/wp-mail-smtp":"*",

"woocommerce/woocommerce":"*",

"woocommerce-theme/storefront":"*"

},

To install the plugin and theme on the development environment, ssh to Vagrant and run composer update.

Shell

1

2

3

/trellis%vagrant ssh

vagrant@example:~$cd/srv/www/example.com/current

vagrant@example:/srv/www/example.com/current$composer update

These plugin will be installed automatically on the production when you next deploy.

We are going to manage entire configurations with git. This is probably one of the most useful aspects of Trellis. You can track all the changes on your website and easily upgrade, revert, and re-create the environments.
Since the repository contains sensitive server configurations, it should be stored in a private repository.
This example assumes that you create a private repo (REPO_NAME) on YOUR_GITHUB_USER_NAME account. To access the private repo, you may need to do this if you are on OXS:

Now let’s start the configuration.
First, add the production address to the trellis. I specified IP address of the production server (PRODUCTION_IP_ADDRESS should be replaced by your own IP address). The official document says that you can also use the hostname.

Edit : /trellis/hosts/production

1

2

3

4

5

[production]

PRODUCTION_IP_ADDRESS

[web]

PRODUCTION_IP_ADDRESS

Next, the WordPress configurations.

Edit : trellis/group_vars/production/wordpress_sites.yml

In this example, I added one redirect rule which routes access to example.com to www.example.com. Remove it if you don’t need it.

Now you are almost ready to provision the production server. Just to final check that CNAME “www” of your domain (www.example.com) is reachable. It is required to issue “Let’s Encrypt SSL” cert during the server provisioning process.

Once your local environment is ready, let’s continue to set up the production server. Digital Ocean hosting is one good choice for the production server. Setting up the server is straightforward, just following these instructions.
When you choose the type of Droplet, select the plain Ubuntsu NOT the LEMP stack. Trellis should take care all the application configurations.

This is a series of memos to install and build WordPress website using Trellis.

In this first article, I will explain the steps to set up the VirtualBox and Vagrant environment on Mac OSX (Sierra). Make sure that you have already installed x-code and it is ready to use, and read through the official documentation.