Setup Work Environment

Iceland landscapes 125

Gulpfile

Gulpfile is the core system that compile both sass and javascript. Gulpfile is independant of wordpress and can be setted up in any environment.

Install prerequisites

Node JS Gulp

Download prerequisites files

Gulpfile js Package json Assets structure (Empty)
  1. Those files must all be placed at the same level.
  2. In command line, go to the level of those files (For example : cd path/to/gulpfile.js)
  3. Type npm install
  4. Type gulp (Compile Scss and Javascript files and watch any modifications to files made to recompile in real time)

When files are compiled, it will generate the dist folder with both css/main.css and js/main.js files within.

WordPress (Local setup)

Note that there is multiple ways to setup a local environment with wordpress. You don’t have to choose this one

Install prerequisites

Mamp application

Download prerequisites files

Latest version of WordPress ACF Pro (Paid plugin)
  1. Run the application Mamp
  2. Within the preferences > server, go to this folder and place the main folder of the latest version of WordPress (You may rename the main folder to the name of your project)
  3. Go to the folder of your project > wp-content > plugins and place the plugin ACF Pro
  4. On the Mamp application, run the server by pressing Start, it should open a window on your default browser. By default, the main url of that server locally should be “localhost:8888”
  5. Create the empty database by going to the url “localhost:8888/phpmyadmin”
  6. Create a new database with the name of your project and the “utf8mb4_general_ci” collation parameter
  7. You can then access your empty website project by going on “localhost:8888/project-name
  8. You can then follow the instructions of the initial installation of WordPress while using the correct name of the database you just created
  9. Login to the backend of your WordPress, go to the plugins tab and activate the ACF Pro plugin

After doing those steps, your local WordPress environment should be good to go. But right now, you will need the basic theme to work with.

WordPress Theme

This is the personal theme that I am personally using while developing any website but feel free to work with a custom theme you enjoy working with or start developing your own. I started from a developer WordPress focused theme which I then recustomize from scratch to make it my own.

Skip to Main Content