Hi. I'm a starter theme called Avidly Theme. I'm a theme meant for hacking so don't use me as a Parent Theme. Instead try turning me into the next, most awesome, WordPress theme out there. That's what I'm here for.
I'm created for WordPress Block Editor and Site Editor especially in mind. I support theme.json theme configuring that enables a finer-grained controls introduces the first step in managing styles for future WordPress releases. Read more from Block Editor Handbook.
I have been developed with accessibility / WCAG 2.1 criteria in mind.
- Requires at least WordPress 6.3
- Webpack / Laravel Mix for bundling assets
- NodeJS v14.0 or later
- npm v6 or later
- Download avidly-theme repository.
- Rename theme folder name for your project (use only a-z and -).
- Run
sh setup.shin theme folder and follow the instructions in terminal. This will run some search and replace functionality for code.
Templates, template parts and theme styles are managed primarily via Site editor (as far as they can be) and saved to theme with Create Block Theme plugin. Please install the plugin only to development environment (WP environment where you manage the theme code and GIT).
Editor experience can be modified multiple ways. You can setup font sizes, colors, spacings and settings users can use in editor what they can move or delete and event set role based settings. See examples for theme.json, block locking ways and more advanced JavaScript methods from official documentation in developer.wordpress.org or video tutorials wordpress.tv.
- Get pagackes with
npm installcommand - Run development with
npm run watchcommand - Run production build with
npm run productioncommand (this also purges caches from edited assets by detecting version changes from /dist/mix-manifest.json)
Audit npm depencencies npm audit and fix them npm audit --fix command.
VERY IMPORTANT: Always run production build to compile compressed, production-ready CSS and JS.
| Directory | Contents |
|---|---|
| /assets/ | development assets (example JS, SASS, fonts) |
| /assets/dist/ | production ready assets (processed, combined and optimized) |
| /assets/fonts/ | webfonts |
| /assets/scss/ | development styles modified via theme |
| /assets/scss/blocks | development styles modified via theme, has conditional loading (loaded when block is presented) |
| /inc/ | php files that are not part of template structure |
| /inc/_conf/ | basic setups for theme and editor & register stuff (assets, menus, widgets, block pattern categories, etc...) |
| /inc/helpers/ | general theme related functions and hooks |
| /inc/queries/ | modifications to queries (query block, get_pre_posts queries, etc...) |
| /inc/render_block/ | modifications to blocks output |
| /languages/ | translations |
| /patterns/ | block patterns |
| /parts/ | template parts for site editor |
| /templates/ | templates for site editor |
- Setup global settings and styles for block editor. Read details from Block Editor Handbook.
More reading and examples from Fullsiteediting.com: Exercise: Creating theme.json and Global Styles & theme.json
I integrate with Tailwind CSS that is used t extend the utility styling when needed. Learn how to use Tailwind CSS by reading the documentation. Note that preflight rules has been removed so that Tailwind would not clear styles that editor gets from WP core and theme.json.
Setup Tailwind CSS related settings (use sam values as you use in theme.json). See detailed instructions from Tailwind CSS documentation