-
Notifications
You must be signed in to change notification settings - Fork 1
Home
My Genesis Base Starter Theme is the base for all of my bespoke website builds. It uses git for version control.
- Genesis Framework (theme)
- Advanced Custom Fields PRO (plugin)
- Core Functionality Plugin (plugin)
I use CodeKit to compile and compress SCSS into minified CSS and JS into combined and minified JS files. You are welcome to use other tools to compile code. Below is the file organization structure for reference.
File Organization
|- assets/ | |- css/ ________________________________ # Concatenated and Minified CSS Output Files | |- images/ _____________________________ # Theme Images | |- js/ | |- src/ ______________________________ # Source JavaScript files | |- editor-min.js _____________________ # JS for customizing the block editor | |- main-js-min.js ____________________ # Contcatenated and Minified Primary JS File | |- scss/ _______________________________ # See below for details |- inc/ | |- genesis.php ________________________# Genesis Functions | |- gravityforms.php ___________________# Gravity Forms Functions | |- gutenberg.php ______________________# Gutenberg Functions | |- wordpress.php ______________________# WordPress Functions |- sections/ | |- footer.php ________________________ # Footer | |- header.php ________________________ # Header | |- loop-item.php _____________________ # Main Blog Loop Item | |- search-loop-item.php ______________ # Search Results Loop Item
SCSS Structure
Below is the file organization for the scss. Be sure to output any custom ACF blocks styles to the proper css-output folder, which you will target when you register the custom block. See my Core Functionality Plugin for information on custom block registration.
| scss/partials/ |-- admin/ | | _admin-base.scss | |-- base/ | | _buttons.scss # button styles | | _headings.scss # heading styles | ... | |-- blocks/ |---- acf/ # acf block styles | | _blocks-max-width.scss | | _blocks-block-name.scss # for blocks with a large stylesheet, this should be compiled to /css-output folder and targeting when creating acf block |---- core/ # modified core block styles | | _blocks-core-buttons.scss | | _blocks-core-columns.scss | ... |---- css-output/ # CSS output files for custom ACF blocks with large stylesheets (see instructions below) | | _blocks-block-name.css | ... | | | _blocks-acf.scss # core ACF block styles | | _blocks-base.scss # base ACF blocks styles, use @import to pull in all partials from /core blocks and /acf blocks folder | ... | |-- forms/ | | _forms_base.scss # base form styles | | _forms_gravity.scss # Gravity Forms styles, import other gravity form partials here | ... | |-- layouts/ # layout styles | | _blog.scss | | _ flickity.scss | ... | | | _admin.scss # compiles all partials related to the WordPress admin area | | _editor-styles.scss # compiles all partials specific to the block editor | | _main.scss # compiles all partials for the primary stylesheet |
Advanced Custom Fields PRO is heavily integrated into the build process and the associated core functionality plugin. ACF is used to create custom blocks, options pages, and custom metaboxes. The "Custom Fields" area is disabled via the wd_acf_show_admin filter in /lib/functionality/acf.php in the Core Functionality Plugin ensuring limited access to editing fields. You can show the "Custom Fields" UI by adding appropriate user email addresses to the $approved_users array in the file noted above.
Additionally, Local JSON has been moved into the functionality plugin so all field groups are automatically saved and stored in the /acf-json folder in the Core Functionality Plugin.