dentist-concept

Dentist Concept is a concept small business website built from the ground up using WordPress and ACF Pro.

Challenges and Goals

Create a simple, one page website on Wordpress
Make content easily editable from the admin dashboard
Set up a local development environment an automated workflow

Solutions

I used gulp.js to create an automated workflow with minifying, photo optimization, scss, and live reloading. This setup allowed me to build more quickly and efficiently.

I integrated the Advanced Custom Fields plugin for easy content editing from the WordPress admin dashboard. The template then pulls down and escapes this information using PHP. The website is styled using SCSS.

Startup Guide

⚠️ As is, this project requires ACF Pro to run correctly. If you are trying to run this locally, you will either need to set up your own data with ACF Pro or hardcore data directly in front-page.php.

Install on Machine

Add a new project in Local

Clone or download this repo into the app folder of the new project's directory

Local Sites
├── new-project
│   ├── app
│   │   ├── public
│   │   ├── sql
│   │   └── src (this repo)

Start project in Local
In the Admin menu, change theme to 'Dentist Concept'

Set Up Data

Login to ACF Pro account and download plugin from there
Upload ACF Pro plugin in WP Admin
Setup ACF fields for font-page

Start Development Environment

Open this repo in terminal
Install dependencies npm i
Run npm run build to generate files/folders (only have to run this the first time)
Run npm run watch to watch for changes

Customize

Change project name in gulpfile.js, style.scss, and functions.php
Set up live reload to work with Local
Start project in Local
Run npm watch
Live reload url is generated in gulpfile.js and must include port. example http://dentist-concept-reload.test:3000/

stormcloud266/dentist-concept