WordPress theme + Gulp boilerplate with a terminal command

Posts

As I have already explained in previous articles, I have a Gulp configuration that I use almost always for my WordPress projects.

Every time I start a new project, therefore, I find myself having to do the same things all the time, which make me lose a lot of time.
Specifically, my workflow is:

  • Create and download the basic structure of the theme from Underscore
  • fix the folder structure to fit my Gulp configuration
  • write Gulp configuration files
  • install all the necessary modules

So I decided to automate the whole process. To do this, I created a bash file that takes care of each of these steps.
The only thing I have to do is enter the theme data (like name, slug, author, etc.) through the command-line interface.

(This script works on Mac OS and Linux, it is not tested on Windows.)

How it works in 7 steps

1. Command-line interface

I decided to use a bash script that offers a minimal command-line interface.

The script initially asks some questions, such as the name of the theme, slug, author, etc..

Do they sound familiar to you? That’s right, it’s the information that will end up in the style.css file of the new theme.

Not only that, but the information collected with the first questions will also serve to compile the file package.json and create the theme on Underscore.

echo "1. Theme Name?"
read -r theme_name
echo "2. Theme Slug?"
read -r theme_slug
echo "3. Theme Author?"
read -r theme_author
echo "4. Author URI?"
read -r author_uri
echo "Theme Description?"
read -r theme_description
while true; do
    read -p "Do you want the theme woocommerce ready?" yn
    case $yn in
        [Yy]* ) woocommerce=1; break;;
        [Nn]* ) woocommerce=0; break;;
        * ) echo "Please answer yes or no.";;
    esac
done

2. Curl to Underscore

Using curl then, create, download and unpack a basic theme with the information collected in the first phase.

The request is very simple

curl --data "underscoresme_generate=1&underscoresme_name=${theme_name}&underscoresme_slug=${theme_slug}&underscoresme_author=${theme_author}&underscoresme_author_uri=${author_uri}&underscoresme_description=${theme_description}" http://underscores.me >> "${theme_slug}".zip; unzip "${theme_slug}".zip; rm "${theme_slug}".zip;

3. Folder structure

The script then takes care of creating the folder structure necessary for my Gulp configuration (I explained here in detail Gulp configuration that I always use).

mkdir -p "${theme_slug}"/src/images
mkdir -p "${theme_slug}"/src/scss
mkdir -p "${theme_slug}"/src/js
mkdir -p "${theme_slug}"/dist/images
mkdir -p "${theme_slug}"/dist/css
mkdir -p "${theme_slug}"/dist/js

4. Gulp configuration

The Gulp configuration I use is always the same, so I created a Gist file on GitHub with my configuration, which the script downloads and saves in the main folder of the theme.

curl -O https://gist.githubusercontent.com/daaanny90/64b7e4dc6f58e7d17f1f411562983656/raw/eee88f4227f06530272f771e6237f2b36c58b4ec/gulpfile.babel.js

It then creates the .babelrc file that I use to write my configuration file in JavaScript ES6.

cat <<EOF >.babelrc
{
  "presets": ["@babel/preset-env"]
}
EOF

5. NPM

The next step is to take care of NPM. The script launches the command npm init and compiles the file package.json automatically, all you have to do is confirm the creation of the file by pressing enter

/usr/bin/expect <<!
spawn npm init
expect "package name:"
send "${theme_slug}\n"
expect "version:"
send "1.0.0\n"
expect "description:"
send "${theme_description}\n"
expect "entry point:"
send "index.js\n"
expect "test command:"
send "\n"
expect "git repository"
send "\n"
expect "keywords:"
send "\n"
expect "author:"
send "${theme_author}\n"
expect "license:"
send "\n"
expect "Is this ok?"
send "yes\n"
expect eof
!

6. Scripts in package.json

In my package.json file there are always two scripts, one that I use for the development phase and the other to prepare all the files for the final deployment.

To modify the JSON file I used jq. A very simple utility to use (here you can find more information).

You will have to install it to use this script

MacOS

On Mac OS just use brew

brew install jq

Linux/Debian

On Linux/Debian systems you can use the package manager

sudo apt-get install jq

What jq does is very simple

file='package.json'

jq '.scripts = {"start": "gulp", "build": "gulp build --prod"}' $file > tmp.$$.json && mv tmp.$$.json $file

7. NPM Modules

All you have to do is install all the necessary modules and create the two basic files in the src directory

npm install --save-dev @babel/register @babel/preset-env @babel/core gulp yargs gulp-sass gulp-clean-css gulp-postcss autoprefixer gulp-sourcemaps gulp-imagemin webpack-stream babel-loader browser-sync gulp-if del
npm install --global gulp-cli

cd src/scss
touch bundle.scss
cd .. && cd js
touch bundle.js

How to use it

As already mentioned, the basic prerequisite is that you have jq installed on your system.

Then just download the file create_theme.sh from the GitHub repository and place it in the folder where you want to create the theme, typically wp-content/themes

You’ll have to make it executable and run it with these two simple commands

chmod +x create_theme.hs && ./create_theme.sh

That’s it.

Use it with a terminal command

The great thing you can do is place the file create_theme.sh in a folder on your computer, then you can create an alias in the terminal that copies the filecreate_theme.shto the folder where you are and launch it.

Practical example:

Download the file create_theme.sh and place it in a folder.

Make it executable with chmod +x create_theme.sh

Create an alias in the terminal

alias wptheme="cp /path/of/file/create_theme.sh ./ && ./create_theme.sh"

Now, to create a theme with this boilerplate, just enter the desired folder from the terminal and give the command wptheme to trigger all the magic.

(This script works on Mac OS and Linux, it is not tested on Windows.)


Photo by Nicolas Hoizey on Unsplash