Abstract

This is a repository to start developing a wordpress system quick and fast. Aimed for Wordpress team developing and continuous integration.

Handy points

Using Docker-compose for one command Wordpress set up.
- The docker-compose.yml are based on the repository below.
- https://github.com/visiblevc/wordpress-starter
- Edit docker-compose.yml if you want some plugins installed on running.
It uses WP Pusher for CI.
- Enables automatic deployment of themes when setup is correct
- https://wppusher.com/
Sample articles already in it.
Using understrap for starter theme.
- https://github.com/understrap/understrap

Preparation

Install and run Docker.
- For OS X 10.10.3 Yosemite or newer : Docker for mac
- For Win10 Pro 64bit : Docker for Windows
  1. For Win10 64bit Pro(Pro version required), after installation, click the whale icon and go to Settings. (Very important)
  2. Go to "Shared Drives" and click the drive that you "git clone"d. Recommending C drive for now (So "git clone" to some where in C. Maybe somewhere under User/name/ to avoid hassle).
- For other OS : Docker Toolbox
  - For other OS, from now on, when using docker, use Docker Quickstart Terminal.
  - Run docker-machine ssh default -L 8080:localhost:8080.
  - Make a working directory to clone the repository under C:User/{your-name}
Clone the repository to your desired working directory.
Run below to isntall packages. (Install Node before this if you haven't.)

sudo npm install -g gulp
cd clientTheme
npm install

Start Docker contatiner.

Make sure you are not using localhost:8080 or 3000 port with any other container or web server.
Make sure you are not using container named "wpcontainer" or "dbcontainer".
Do docker-compose up in the directory that has docker-compose.yml in it.
In a different terminal of above, run below to edit css on the fly and live reload the browser.

cd clientTheme
gulp watch-bs

That's it. Simple.

By docker-compose up, below should show up in the terminal eventually.

wpcontainer | =======================================
wpcontainer | WordPress Configuration Complete!
wpcontainer | =======================================

The message would stop here so open up localhost:3000 in a browser. A front page should open.

To stop stope the container, ctrl+c
To remove and restart, docker-compose down
- Restart required if

Login Info

To login, open up localhost:8080/wp-admin. Use info below to login.

User: root

Pass: root

Preperation for Continuous Integration

Enable the WP Pusher plugin and install the theme following the instructions below.
- http://docs.wppusher.com/article/6-getting-started
- http://docs.wppusher.com/article/13-working-with-plugins-and-themes

How to develop theme

Using Source Tree.

Checkout origin/develop branch from remote.
Create feature/foo branch from develop . (Win: shift + alt + f, Mac: command + alt + f)
docker-compose up
Edit the files in ./clientTheme. (This would be like wp-content/themes/clientTheme in production environment. It is brought to the top directory by editing docker-compose.yml)
If the the db is changed, run docker exec wpcontainer sh -c 'sudo -u www-data wp db export /data/init.sql'. This will dump the sql and this sql would be used for initializing sql when docker-comnpose up.
Commit and push feature/foo you have made.
Send pull request to origin/develop branch from feature/foo on github. (Win: shift + alt + p, Mac: ⌘ + ⌥ + p).

Which files to edit

CSS and Sass Files

Your design goes into: /sass/theme.
- Add your styles to the /sass/theme/_theme.scss
- Add your variables to the /sass/theme/_theme_variables.scss.
  - Or add other .scss files into it and @import it into /sass/theme/_theme.scss.
- For further info of css and sass files, look below.
  - https://github.com/understrap/understrap#confused-by-all-the-css-and-sass-files

Further Info

Below are not needed if you just want go on developing. Text based on the forked repository.

Syncing directories between container and local

In order to save the changes made in the container, change or add the lines below in docker-compose.yml.

    volumes:
      - ./initialSql:/data
      - ./clientTheme:/app/wp-content/themes/clientTheme
      - ./plugins:/app/wp-content/plugins

Working with databases

If you have an exported .sql file from an existing website, drop the file into the initSql/ folder. The first time you run the container, it will detect the SQL dump and use it as a database. If it doesn't find one, it will create a fresh database.

If you want to create a dump of your development database, you can run:

docker exec wpcontainer sh -c "sudo -u www-data wp db export /data/init.sql"

Finally, sometimes your development environment runs on a different domain than your live one. The live will be example.com and the development localhost:8080. This project does a search and replace for you. You can set the SEARCH_REPLACE: example.com,localhost:8080 environment variable in the docker-compose.yml.

Use `wp-cli`

Follow the example below. Basically, change after "wp".

docker exec wpcontainer sh -c "sudo -u www-data wp db export /data/init.sql"
docker exec wpcontainer sh -c "sudo -u www-data wp theme activate clientTheme"

RyosukeTakahashi/wordpress-starter