-
Notifications
You must be signed in to change notification settings - Fork 47
Home
EA Starter uses git for version control (see repo). Version control allows us to track codebase history, maintain parallel tracks of development, and collaborate without stomping on each other's changes.
We use the feature branches for active development, and the master branch for releases.
Any theme dependencies on functionality plugins should be built with the use of do_action(), apply_filters(), or function_exists().
In short, changing to the default theme should not trigger errors on a site. Nor should disabling a functionality plugin - every piece of code should be decoupled and use standard WordPress paradigms (hooks) for interacting with one another.
We're using Advanced Custom Fields for custom blocks, site options, and metaboxes. We are using the Local JSON feature for version control. Field editing is disabled in production, but can be enabled in your local / development / staging environment by adding define( 'WP_LOCAL_DEV', true ); in wp-config.php
I recommend using WP Migrate DB Pro to pull a fresh copy of the production database, and push/pull databases to the staging environment. You can also use the Theme and Plugin Addon to pull down all the themes & plugins, which is useful when setting up your local dev environment.
There's no need to pull down all of the media from the production or staging environment. Use BE Media from Production to update all the image URLs to point to the production site.
In your theme's functions.php file, define the BE_MEDIA_FROM_PRODUCTION_URL constant with the production or staging URL. This should match the source database you're pulling from so all the media and image sizes in the database exist on the remote server.
define( 'BE_MEDIA_FROM_PRODUCTION_URL', 'https://sitename.com' );
We are using CodeKit to compile and compress SCSS into minified CSS, and JS into a combined and minified JS file. You can use an alternative tool (ex: Prepos or gulp) but make sure to configure it to match the file organization below.
Project structure unity across projects improves engineering efficiency and maintainability. We believe the following structure is segmented enough to keep projects organized—and thus maintainable—but also flexible and open ended enough to enable engineers to comfortably modify as necessary. All projects should derive from this structure:
|- acf-json/ _____________________________ # Advanced Custom Fields
|- assets/
| |- images/ ____________________________ # Theme images
| |- fonts/ _____________________________ # Custom/hosted fonts
| |- icons/ _____________________________ # SVG Icons
| |- utility / ________________________ # Utility icons used throughout the theme
| |- color / __________________________ # Color versions of utility icons
| |- brand / __________________________ # Branded icons, often used in custom blocks
| |- social / _________________________ # Social icons
| |- js/
| |- src/ _____________________________ # Source JavaScript
| |- global-min.js ____________________ # Concatenated and Minified JavaScript
| |- editor.js ________________________ # JS for customizing the block editor
| |- css/
| |- main.css _________________________ # Concatenated and Minified CSS
| |- editor-style.css
| |- scss/ ______________________________ # See below for details
|- inc/ __________________________________ # PHP classes and files
|- partials/ _____________________________ # Template parts
| |- blocks/ ____________________________ # Custom blocks
| |- post-summary/ ______________________ # Post summaries, for archive pages and post listing block
|- templates/ ____________________________ # Page templates
The scss folder is described separately below to improve readability. It is based on How to structure a Sass project:
|- assets/scss/
|-- modules/ # Common modules
| |-- _helpers.scss # Helper mixins
| ...
|
|-- partials/ # Partials
| |-- _base.scss # global project variables + import modules and vendors
| |-- _reset.scss # Reset
| |-- _blocks-base.scss # Main style guide for the site
| ...
|
|-- vendor/ # CSS or Sass from other projects
| |-- _include-media.scss
| ...
|
|-- main.scss # primary Sass file for frontend
|-- editor-style.scss # styles that apply only to backend editor