2 – Set Up Project

File structure

├── build/                   # Build files
├── dist/                    # Distribution files
├── src/                     # Source files
│   ├── assets/              # Assets directory
│       ├── css/             # CSS files
│       ├── fonts/           # Fonts directory
│       ├── img/             # Image directory
│       ├── js/              # JavaScript files
│   ├── plugins/             # WordPress plugins
│   ├── theme/               # PHP Template files
└── .babelrc                 # Babel configuration
└── .gitignore               # Git ignored files
└── .stylelintrc             # Stylelint configuration file
└── gulpfile.js              # Gulp configuration
└── LICENSE                  # License agreements
└── package-lock.json        # Packages lock file
└── package.json             # Node packages
└── README.md                # You are reading this

Install WordPressify from NPM

To install WordPressify from NPM, run the command:

sudo npm i wordpressify -g

Start WordPressify

Create a directory for the new WordPress website and from there run WordPressify to generate the file structure:

wordpressify

Install WordPressify from Repository

To install WordPressify you need to clone the repository from GitHub:

git clone https://github.com/luangjokaj/wordpressify

Install dependencies

This will clone the repository on your local machine. Navigate to the newly created folder and install the dependencies:

npm install

Change template name

At this point WordPressify is installed and ready to be used for the first time. Before starting, open gulpfile.js and edit your template name:

/* -------------------------------------------------------------------------------------------------
Theme Name
------------------------------------------------------------------------------------------------- */
const themeName = 'wordpressify';
//--------------------------------------------------------------------------------------------------

Install WordPress

On the first run we need to install WordPress, we do this once by running the command:

npm run install:wordpress

It will fetch the latest WordPress version, which is the build we use for the development server.

Start Workflow

We are ready to start our development server with the command:

npm run dev

If you are running a fresh instance of WordPress, the installation wizard will set up a wp-config.php file containing database credentials, site name etc.

You are ready to go! Happy coding!

WordPress Plugins

If you want to add or build WordPress plugins, you can do that from the directory:

src/plugins

Production Template

To generate your distribution files run the command:

npm run prod

The template will be saved as a zip file in:

dist/wordpressify.zip

Screencast: Installation, first setup.

Windows Users

If you are running Windows, PHP has to be installed and configured. Check the gulp-connect-php documentation.

We prepared a video screencast demonstrating the installation processs using a Windows operating system, you can find it here: How to install WordPressify on Windows? Or check out this tutorial on Medium.

Continue to:
3 – Styles, PostCSS and SCSS