testing-wordpress-github

Setup

This project requires node and git.

Open a terminal (if you are using VSCode, View -> Integrated Terminal)
git clone https://github.com/cvharris/wwt-com-content.git
npm install
Run a local server to pull up a test page: grunt serve or in VSCode: Shift + Cmd + P, type 'Tasks', select 'Grunt Serve'

Workflow

This repo makes use of a plugin that syncs what's on master in Github with our Wordpress website. Use the 'test page' to edit your html, then when it looks good add it to the *.md file it came from.

The 'test page' is post-editing.html and allows you to work on HTML of a single page or post one at a time. It has the website's header and footer handy so it is helpful to visualize the effects of your changes

Open a post or page under one of the folders like _posts or _pages
Copy the HTML portion of the *.md. The top part with two --- is YML frontmatter which configures post metadata
Paste the HTML in between the <main></main> in post-editing.html
Before starting new work, create a new branch off master. Name the branch 1-3 hyphenated words describing the post. For instance: git checkout -b lifecycle-page-changes, changing 'lifecycle-page-changes' to whatever you want the branch name to be
Go to http://localhost:3010 (should alaready be open if you did grunt serve) and you should see the post
(Make all file changes here)
When all looks good, copy the HTML between <main></main> below the bottom --- and save the file
Add the files to git, then commit them to the branch you are on
Publish your branch to Github

Using VSCode

I recommend using VSCode because it has built-in Intellisense, which helps autocompletion of class names. It also allows us to store Grunt tasks and run them in its integrated terminal, which is a lot easier to help non-developers get up and running with writing HTML. There's a lot more to it that could be found in Atom or some other text editor, but I appreciate how the biggest parts are built-in.

Git in VSCode

It's easy to use git in VSCode. Click on the 3rd button in the left sidebar, which looks like a fork-in-the-road.

If you have saved changes to a file they will show up in the list.
To git add files in order to commit them, hover over the file and click the '+' icon
To git commit the files to your new branch, type a commit message describing the changes in the text field with 'Message' in the placeholder, then click the ✔️ icon
To publish your branch and changes to Github, click the '...' icon above the Message textfield to the top-right, then select Publish Branch, select origin.
You can now see your changes out on Github!

Extensions

Download these in VSCode (View -> Extenstions)

Auto Close Tag: Automatically add HTML close tags
HTML CSS Support: Adds project-wide CSS classes to Intellisense for easy autocompletion