/wrong-turn-winery-theme

WordPress custom theme for a Winery. Uses Bootstrap 4, SCSS, Normalize, AutoPrefixr, Gulp for compilation/linting/deployments, and BrowserSync for cross-device auto refreshing.

Primary LanguagePHP

Wrong Turn Winery Theme

Wrong Turn Winery Homepage

Version: 1.0.0

Demo

You can find a demo of the Wrong Turn Winery Theme at www.wrongturnwinery.com

Authors

Adam Abundis (adamabundis.xyz / GitHub profile )

Summary

A custom WordPress theme for a winery. Uses Bootstrap 4, SCSS, AutoPrefixer, and Gulp for all processing tasks. Included custom posts like Wines, Events, Locations, Staff, and Notes. Built a search page that uses the WP REST API and ES6 JavaScript to search all pages, posts, and custom posts. Syncs changes across local development devices with BrowserSync. Tested up to WordPress 5.1.

Usage

The theme is setup to use Gulp to compile SCSS (with source maps), run it through Autoprefixer, lint, concatenate and minify JavaScript (with source maps), optimize images, and syncs changes across local development devices with BrowserSync, with flexibility to add any additional tasks via the gulpfile.js.

Features

  1. Media Queries can be nested in each selector using SASS.
  2. SCSS with plenty of mixins ready to go.
  3. Gulp for processing all SASS, JavaScript and images, and cross-device refreshing with BrowserSync.
  4. Search page made with WP REST API and ES6 JavaScript to search all pages, posts, and custom posts.

Suggested Plugins

Prerequisites

Requires at least: WordPress 4.4

Tested up to: WordPress 5.1

Please make sure you have Node.js installed. You can find the link to download Node.js here and WordPress here

// Verify Node was installed by running this command in your terminal
node -v
// You should get something like...
v12.8.1 // it may be a higher version number than this

Getting Started

After downloading this repo, go to your terminal in the project root directory and install all the npm dependencies first.

npm install

Running a Build

Compiles and hot-reloads in a development environment

npm run gulpwatch

Compiles and minifies CSS for a production environment

npm run gulpstyles

Compiles and minifies JavaScript for a production environment

npm run gulpscripts

Built With

  • WordPress - content management system used
  • Gulp - Automating the CSS builds
  • Webpack - Automating the JavaScript builds
  • Vagrant - Development Server

License

This project is licensed under GPLv2 or later - see the license link for details

Credits