Home

About

This wiki houses documentation for the website of The Vera Project. The website is implemented as a Wordpress theme (based on Understrap) and a collection of plugins.

Installing

1. Install a server stack to support Wordpress. These instructions assume you will be using the MAMP package, which is available for both Windows and Mac.
2. Open your local URL, http://localhost, this should display a default page listing a "document root" directory. The document root is where you will install wordpress.
3. Install Wordpress. Just unzip wordpress.zip into the document root noted above, and you should have a wordpress/ directory containing a fresh install of Wordpress. Rename this directory to vera/. Verify that Wordpress is installed correctly by visiting http://localhost/vera/. You should see a list of languages.
4. Set up a database and credentials for wordpress with phpMyAdmin, the standard browser-based database control panel. Open the "User accounts" tab and create a new user, named wordpress, with host name "localhost". Make sure to check "Create database with same name and grant all privileges".
5. Go back to http://localhost/vera/ to complete the setup. Provide the database credentials you created and create a Wordpress user account. If Wordpress can't connect to the database, try restarting your computer.
6. Once you've logged in, you'll see a box describing the new "Gutenburg" editor. We're not building a Gutenburg-enabled theme so click the right box twice to install and activate the "Classic Editor" plugin. Next, install this plugin: Advanced Custom Fields. Don't forget to activate it.
7. Install Github Desktop and clone this repo into the Wordpress install directory. vera/wp-content/themes/ is what you're looking for. To clone, use the File > Clone Repository menu item and enter gmvi/vera-wordpress-theme in the URL tab. Don't forget to set the "Local" path field appropriately.
8. Install the parent theme and then activate the theme (The Vera Project 2018). The website will look broken until you sync with the staging server in step 10.
9. Since we are using the "SASS" language (an extension to CSS), you'll have to install a compiler for it. Install node.js. Now open a command line shell: either Powershell on Windows or Terminal on Mac. Move into the vera-wordpress-theme/ directory with the cd [destination] command, i.e. cd C:/MAMP/htdocs/vera/wp-content/themes/vera-wordpress-theme on Windows. Install the dependencies with npm install and npm install -g gulp.
10. From the same command line as step 9, run node scripts/database-pull.js. This should bring your local database in line with the staging server.
11. From the same command line, run gulp watch to start the SASS compiler. Remember you'll need this command running whenever you work on the project.
12. Congratulations, you have a local copy of the new Vera website!

Contributing

Styling

Styles are located in sass/theme/. The file _child_theme.scss is where the bulk of the styles live, and styles that only pertain to a certain section or page should go in their own files. But don't worry to much about that.

Templates

Wordpress templates are PHP files that output HTML. Mostly they look like HTML, and any PHP is contained in a <?php ?> pseudo-tag. The header, footer, front-page, and generic page templates are found in the root of the theme. Templates in the page-templates directory are for specific types of pages, such as the program landing pages. The partial-templates directory holds any templates that are included by other templates for reuse on multiple pages (actually the header and footer templates are an exception to this rule).

Submitting changes

1. To work on the project, you must first open a branch for your changes in git. Do not make commits directly onto the master branch.
2. With Github Desktop you can click on the current branch at the top and then the New branch button. Choose a name that describes the work you're doing.
3. If you are reusing a branch you've worked on previously, make sure to sync the branch with master first. Go to 'Branch' > 'Merge into current branch...' in the top menu to do so.
4. Once you're ready to add a set of changes to your branch, fill out the commit form in the bottom left. Describe your work succinctly in the top line and add additional info in the text box. Click the commit button and 'Publish' or 'Push' your branch up to GitHub.
5. Once you're satisfied with your branch submit a pull request. Choose your branch as the compare branch to see all the changes you've made and then create the pull request. George will review your work and accept it or ask for additional changes.