WordPress Theme Dev setup Ubuntu, SSH, Gulp, Tailwind, RSync

SSH

  chmod 400 ./PATH/KEYNAME.pem
# or 
  chmod 600 ./PATH/KEYNAME.pem
ssh -i ./PATH/KEYNAME.pem [email protected]://REMOTEURL  
scp -i ./PATH/KEYNAME.pem [email protected]://REMOTEURL:/var/www/html/REMOTEURL.com/public_html/index.htm /LOCAL/PATH/index.html

Installing WP-CLI + WP Core

WP-CLI is available as a PHP Archive file (.phar).

wget https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar

make this .phar file executable and move it to /usr/local/bin so that it can be run directly:

chmod +x wp-cli.phar
sudo mv wp-cli.phar /usr/local/bin/wp

Check if ti works

wp --info

…just in case , how to install on Mac with homebrew

brew install wp-cli

command to download WordPress

wp core download

Prepare WordPress Database

mysql -u root -p
CREATE DATABASE wordpress;

CREATE USER 'wpuser' IDENTIFIED BY 'password';
GRANT ALL PRIVILEGES ON wordpress.* TO 'wpuser';
FLUSH PRIVILEGES;

Configure and Install Wordpres

cd /var/www/html/example.com/public_html/

wp core config --dbname='wordpress' --dbuser='wpuser' --dbpass='password' --dbhost='localhost' --dbprefix='wp_'

wp core install --url='http://example.com' --title='Blog Title' --admin_user='adminuser' --admin_password='password' --admin_email='[email protected]'

Create new starter theme with _Uderscores

Theme info in CSS

Step 1: Firstly go to wp-content/themes/ folder. And then rename your theme folder to whatever you want.

Step 2: Open your theme folder and open style.css file. In top part of style.css you will see theme name. Rename it and save changes.

Step 3: Go to Wp-admin/appearance/themes and activate your theme under new name.

Automating with WP-Gulp

Installing and hacking Tailwind to work with WP-Gulp

We are suing SCSS from WP-Gulp 🐬 Adding Tailwind on the WP-Gulp is a little bit complex , we need to create a gulp task to handle it outside of the ones provided by WP_Gulp… It may even break WP-Gulp future updates.

Instead of adding as part of the build tasks, we lets isolate tailwind and import into our Styles.sccs and then integrate with WP-Gulp

Files structure

  • assets/scss/taildwind_src.css : tailwind CSS imports.
  • assets/scss/tailwind.css : tailwind CSS imports.
  • assets/scss/style.scss : main scss file, import tailwind.css.

Build Tailwind CSS

  • cd assets/sccs : make sure you are at this folder before running the next command.
  • npx tailwind build tailwind_src.css -o tailwind.css : command to build tailwind theme.
  • npm run tailwind : runs tailwind css + styles task from theme root folder.
npx tailwindcss init
cd assets/scss && npx tailwind build tailwind_src.css -o tailwind.css && gulp styles

Tailwind Base Config + Theme

Deploying with RSync + SSH

rsync -rave "ssh -I /PATH TO/KEYNAME.pem" --exclude='node_modules' --exclude='.git' --exclude='deploy.sh' /PATH TO/LOCAL FOLDER/  [email protected]:/var/www/html/REMOTEURL.com/public_html/wp-content/themes/scantrust