Wordpress + Understrap (with SASS + GIT) set up (locally)

Worpress installation.

Download the latest version of WordPress from wordpress.org. Unzip the folder and move the new folder to your sites directory. Rename the wordpress folder to your project name.

Database

Launch phpMyAdmin. Create a new database, user and password. Make a note of these details.

Understrap Theme

Log into WP-Admin. Go to Appearance -> Themes. Press the Add New button and search for Understrap. Install and activate.

Create Child Theme & set up Visual Studio Code Workspace

Go to the Understrap Child GitHub Project page. Download the project folder. Unzip and move to the wp-content/themes folder.

Rename as per your project.

Open up Visual Studio Code. Select Add Folder to Workspace. Select the new renamed child theme folder and drag into the Explorer window.

Save as new workspace (save this into the main work folder, not the _site folder.

Create new Screenshot.png

Open up a new file in Illustrator or Photoshop – artboard size 880px x 660px. Create new screenshot image and save as wp-content/themes/childtheme/screenshot.png

Edit style.css with theme information

Open up style.css and edit with relevant theme information.

Go into Appearance->Themes and activate the new child theme.

Setting up Sass, JS compilation and BrowserSync

The gulp task ‘watch-bs’ (as defined in gulpfile.js) Starts the Sass watcher (watch), Javascript watcher (scripts) and the browser-sync function.

Custom Javascript

The gulpfile.js identifies the path src/js/custom-javascript.js for custom scripts so create this file and add any custom JS to this file.

Sass

The Gulp watch task monitors any .scss file within any folder within the sass folder (ie assets or themes).

Make any variable changes within _child_theme_variables.scss

Create your own files within the theme directory to simplify things for example:

_header.scss

_navigation.scss

_footer.scss

_utilities.scss

_base.scss

_components.scss

_mixins.scss

You could create an individual folder for each of the pages ie:

sass/pages/_home.scss

sass/pages/_contact.scss

Make sure to @import any custom partials in child-theme.scss

Browser Sync

To utilise browserSync you must configure the proxy option in browserSyncOptions in gulpconfig.json

eg: “proxy” : “localhost:800/randrgardenlandscapes.co,.uk

Compiling using Gulp

First install dependencies (node.js and browsersync must be installed globally)

Open terminal and cd to the theme root folder OR open Terminal->New Terminal in VisualStudio Code and type the following command

npm install

Start Gulp watch, scripts and Browsersync with the following command:

gulp watch-bs

*To stop gulp watch service, press ctrl+C

Setting Up Git

STEP 1: Create local GIT repository

Open Terminal
CD to root of intended repository
type: git init
Create a .gitignore file if you don’t want files to be included

STEP 1.2 : Initial Commit

git add -A to add all untracked and modified files

git commit -a -m “initial commit”

Set up remote Repository: BITBUCKET / GIT

STEP 2: Create remote Bitbucket repo

Log in to Bitbucket (duncan@samwell.me) / GIT veryselfishman
Create a new Repository

STEP 3: Clone and migrate local repo

Open terminal and CD to the path of the local repository
Type the following code:

git remote add origin https://djsammers@bitbucket.org/djsammers/broadland-consultants-wordpress-theme.gi t

git push -u origin master

You can use GitLens in Visual Studio to track, commit and push Git changes.