401/wordpress-base-theme

401 Wordpress Theme

1.20.1 2023-07-19 19:07 UTC

Requires

• php: >=5.3.2
• composer/installers: ~1.0.12

BSD-3-Clause

• 401

• theme
• 401

README

This is meant to be a jumping off point for new site builds. We copy the plugin and theme into a new site build and use this framework to help speed up new site builds.

• Post types are created via Advanced Custom Fields Pro and managed there
• Custom taxonomies are created via Advanced Custom Fields pro and managed there
• PHP namespacing is setup throughout the theme and plugin

Theme Structure

• acf-json
• assets // fonts, images, js, scss, svg
• blocks // custom ACF blocks go here. SCSS is compiled into /build/blocks via npm run build:blocks (see Front-end build below).
• build // Vite output: *`build/assets/** hashed JS/CSS, **build/css/style.css** (duplicate of main bundle for a stable path), **build/.vite/manifest.json** (PHP uses this to enqueue). Block CSS: **build/blocks/`. Run npm run build after pulling or changing assets.
• inc
• • Assets.php // includes and enqueues various files
• • Functions_Custom.php // specific functions and settings that may need to be changed or added PER SITE (since global functions exist in the plugin)
• • Menus.php // custom Walker for WP menu, adds image support
• • metadata.php // included in the via header.php. Adds in the custom :root colors
• templates // our custom templates and files
• • archive // the index.php file routes here
• • content // the single.php file routes here
• • loop // various CPT loops that are used in the archive files
• • pagination.php // custom pagination that handles the standard WP pagination or an ajax load more button
• createblock.sh // scaffolds a new block under /blocks; then run npm run build:blocks
• functions.php // more theme functions (sometimes we use both this and Custom_Functions.php per theme)

Front-end build (Vite + block SCSS)

From the theme directory, npm install once, then:

Command	What it does
npm run dev	Vite dev server (HMR for assets/entries/*, SCSS, JS). Keep this running while developing.
npm run build	Production: Vite → build/ (main + header + editor bundles, manifest), then block SCSS → build/blocks/**
npm run build:blocks	Block SCSS only
npm run watch	vite build --watch (rebuild production bundles on save; no HMR)

Local HMR: In wp-config.php (or an env loader), set define( 'HAMMER_VITE_DEV', true ); only while npm run dev is running. If this stays on when the dev server is stopped, the theme will not load build/ assets (you’ll get missing scripts/styles). For normal browsing of a built theme, remove that constant or set false, then npm run build generates build/ including build/css/style.css (copy of the main compiled CSS) and hashed files under build/assets/. WordPress enqueues CSS/JS via the manifest, not by a fixed dist/css/style.css path.

Optional: hammer_vite_server_url filter if the dev server is not http://localhost:5173.

Stack: Vite (ESM bundles, hashed assets, build/.vite/manifest.json), Dart Sass + PostCSS (Autoprefixer; cssnano in production) inside Vite; block SCSS still compiled with sass + postcss-blocks.mjs. micromodal is an npm dependency (header entry).

Companion plugins

/wp-content/plugins/hammer-marketing-custom

• This plugin is meant to "functionality" that we repeat over and over again, and letting the theme be more for front-end / visual changes on a site-by-site basis.
• The plugin also houses a PostTypes folder for custom functionality (mainly ajax loading, filtering, etc) specific to that post type.
• • The thinking behind this is that the client can change themes eventually if they want to, but keep the plugin installed and the extra functionality remains.

Plugin Structure

• assets // includes css/images/js folders. Also includes a login.css.php file to style a custom login screen styling //
• Components
• • dash // includes custom dashboard files
• • ACFs.php // includes custom ACF blocks and registers custom User Settings field group
• • Admin.php // various WP admin area tweaks and whitelabeling
• • Analytics.php // sets up UA/GTM tag code (possibly old?)
• • Dashboard.php // sets up the custom dashboard with styling and functions
• • Ecommerce.php // only included if WooCommerce is installed, changes WC wrapper
• • Enqueue.php // enqueues admin and login files, sets custom variables to be used in admin
• • Functions.php // plugin theme setup, hiding comments if needed, various Gravity Forms changes, various custom functions used in the theme
• PostTypes // _copy.php is to copy for other post types. Custom functionality for post types goes here
• hammer-marketing-custom.php // init file
• setup.php // changes various WP settings on plugin activation (only?)

/wp-content/plugins/hammer-locations (optional)

• Install only when the build needs the store locator / map. Registers the Locations CPT, ACF fields, page template Locations (map), map list + AJAX popup, and assets. Site-specific styling: add something like assets/scss/partials/_locations.scss in the active theme and compile with the rest of the theme CSS.
• Google Maps API key: define GOOGLE_MAPS_API in wp-config.php when using this plugin. The plugin passes it to ACF (acf/fields/google_map/api + acf_update_setting) and uses it for the front-end Maps script.

TO DO

• style form fields with newest GF styling changes
• make the menu accessible
• other accessibility updates