Development Notes and Best Practices

 

Site Wide

This site was developed with the Divi theme on WordPress 5.x. Documentation and howtos for Divi are available here.

The theme has not been modified so no child theme is involved.

Site wide modifications have been and can be made via Dashboard (DB)-Divi-Theme Options or DB-Divi-Theme Customizer.

All custom CSS is editable at the bottom of the DB-Divi-Theme Options-General.  All CSS has comments noting its purpose and additional CSS should have those as well.

When editing a new or existing page it should be done via the Divi Builder which offers WYSIWYG editing. Text modules (the main content module) allow for visual editing or text/code editing.

Design changes are done via section (blue outline) and row (green outline) settings (gear icon). Those done so far mostly consist of background color/image (settings-content) and L/R row padding (settings-design-spacing).

The circle with three dots at the bottom of pages contains editing options and a save option.

The top menu can be changed via DB-Appearance-Menus.

 

Plugins

Contact Form 7: Handles the contact form on the contact us page and home page. This form is editable via DB-Contact-Contact Forms-Contact form 1. The shortcode is all that is needed to include it in a Divi Code module.

Contact Form 7 Styler for Divi: Alters the CF7 forms to have consistent styling with Divi.

Modern Events Calendar Lite: Handles events on the home page and events page. Editable via DB-M.E. Calendar. Two custom CSS modifications are in DB-Divi-Theme Options-General.

Smash Balloon Custom Facebook Feed: Linked to our Facebook to pull social media posts/events but not currently utilized. Editable via DB-Facebook Feed.

Smash Balloon Instagram Feed: Linked to our Instagram to pull the latest posts and display them on the home page. Editable via DB-Instagram Feed.

UpdraftPlus – Backup/Restore: Backs up the site (WP, database, uploads) to WAG’s Google Drive once per day.

WooCommerce: For membership payments. Editable via DB-Wooommerce.

WooCommerce Direct Checkout: Eliminates the extra step of adding items to a shopping cart and takes members direct to checkout.

WooCommerce Square: Integrates WC with Square for payment processing.

Yoast SEO: SEO plugin.

 

Page Specific Notes

Home

As with all pages this is a combination of full width sections with rows inside them. Rows are either single column or two column.

Upcoming events are added with Modern Events Calendar Lite with the shortcode “MEC id=”75″” which is editable under DB-M.E. Calendar-Shortcodes-Upcoming Events (grid).

The Google Map is added with default embed code from Google.

Utilizes the Divi Slider Module for rotating images of WAM. Will add more.

The Instagram feed is added with Smash Balloon Instagram Feed. Changes can be made directly with the shortcode and via DB-Instagram Feed.

The contact form is added with Contact Form 7 and editable via DB-Contact-Contact Forms-Contact form 1.

Membership

This page utilizes WooCommerce for membership payments. This will need to be linked to Square before going live.

About Us

This page utilizes the Divi Person Module which allows a photo, bio, and links. Modules are editable via the gear icon on their gray box when being moused over. All options work as written except Google+ is used for Instagram links and Twitter is used for web page links. Photos should be 600×600 JPEGs at 6-8 quality. This PSD file can be used by pasting a photo between the background and Layer 1.

Events

This utilizes Modern Events Calendar Lite which is editable via DB-M.E. Calendar. It uses the shortcode “MEC id=”197″” which is editable under DB-M.E. Calendar-Shortcodes-Main Events Page.

Newsletter

Simple list of newsletters in PDF format. These are uploaded via DB-Media and should be named in the format YYYYMM.pdf and then manually linked.

Our Gallery

Utilizes the Divi Slider Module for rotating images of WAM. Will add more. The Google map embed uses regular Google embed code.

Members

Currently just a simple list with links. This will be an area to upgrade, likely to a paid plugin or SAAS.

Contact Us

The contact form is added with Contact Form 7 and editable via DB-Contact-Contact Forms-Contact form 1.