Broke Theme is a sophisticated WordPress theme that leverages a suite of powerful tools including Timber, Advanced Custom Fields Pro, Laravel Mix, Tailwind CSS, HTMX, and Alpine.js to create high-performance websites with editor-friendly interfaces.
WHATT Stack stands for
[W] WordPress [H] HTMX [A] Alpine [A] ACF Pro [A] ACF Extended [T] Tailwind [T] Timber [T] Twig
And should be pronounced WHAAATTTT that's WordPress?
Our goal with Broke is to facilitate the development of high-performance websites that not only deliver on the front-end but also provide a seamless back-end experience for editors. To this end, we've crafted two distinct development paths:
This approach empowers clients with a customizable page builder to edit, manage, and create pages effortlessly. It's designed to offer a seamless and controlled editing experience, making it our recommended choice for most clients.
Benefits include:
- Streamlined interface for non-technical users.
- High degree of customization without the complexities of Gutenberg.
For those who prefer Gutenberg, Broke allows for the creation of custom blocks via all components, enhancing the block editor's usability and friendliness.
This option is best suited for:
- Creating content blocks for use during the post creation process.
- Enabling a fast, user-friendly Gutenberg experience without relying on it for full-scale page building.
We advocate for using the block editor primarily for posts and long-form content, ensuring consistency across editing experiences. This harmonization is crucial as Gutenberg, even with Full Site Editing (FSE), maintains a distinct layout that might not align with every theme's design philosophy.
This dual approach is made viable through ACF's Blocks feature, blending flexibility with functionality.
To set up the Broke Theme on your WordPress site, follow these steps:
-
Download and Install Theme:
- Either download the theme's ZIP file or clone this repository.
- Move the downloaded or cloned theme into the
wp-content/themesdirectory of your WordPress installation.
-
Install Dependencies:
- Navigate to the theme's directory in your terminal.
- Execute
composer installto install PHP dependencies. - Run
npm installto install Node.js dependencies.
-
Activate Theme:
- Go to your WordPress dashboard, navigate to Appearance > Themes.
- Locate Broke Theme and click "Activate".
-
Plugin Recommendations:
- Upon theme activation, you will receive installation prompts for ACF Pro and ACF Extended through TGM Plugin Activation (TGPM) if they are not already installed.
- If you have ACF Extended Pro installed, you can safely dismiss the ACF Extended recommendation.
These steps will ensure the Broke Theme is properly installed along with its required plugins and dependencies, ready for your customization and content.
Broke Theme builds your css and js files using Laravel Mix. This allows you to use the latest Javascript and CSS features.
To build your assets for development, run npm run development or npm run watch from the theme directory in the terminal.
To use Browsersync during local development, rename browsersync.config-sample.js to browsersync.config.js and update the proxy to match your local development URL. Other options can be seen in the Browsersync documentation.
To assist with long-term caching, file hashing (e.g. app.js?id=8e5c48eadbfdd5458ec6) is enabled by default. This is useful for cache-busting purposes.
When you're ready for production, run npm run production from the theme directory in the terminal.
If you're developing locally and moving files to your production environment, only the theme and vendor directories are needed inside the Broke Theme theme directory. The theme directory structure should look like the following:
Broke Theme/
├── theme/
├── vendor/
Dynamic layouts enhance the WordPress admin experience by offering live previews within Flexible Content fields, streamlining the editing process. For this functionality, ACF Extended is essential as it enables the live previews.
To introduce new layouts, utilize the layouts directory. Refer to the /theme/layouts/components directory for examples on structuring your Flexible Content layouts.
Here's a sample directory structure for a new component:
layouts/
├─ components/
│ ├─ hero/
│ │ ├── index.twig
│ │ ├── _scripts.js
│ │ └── _styles.css
The theme primarily uses Tailwind CSS for styling. However, you can add component-specific CSS or JavaScript files as needed. These should be placed directly in the component's directory. Additionally, for an enhanced development workflow, consider using the Broke CLI (upon its release) to manage these component-specific assets.
This approach ensures a modular and flexible development environment, facilitating component reuse and ease of maintenance.
A block is a self-contained page section and includes its own template, script, style, functions and block.json files.
example/
├── block.json
├── functions.php
├── index.twig
├── script.js
├── style.css
To create a new block, create a directory in theme/blocks. Add your index.twig and block.json files and it's ready to be used with the WordPress block editor. You can optionally add style.css, script.js and functions.php files. An example block is provided for reference. Add editable fields by creating a new ACF field group and setting the location rule to your new block. You can now use these fields with your block in the block editor.
You access your block's fields in the index.twig file by using the fields variable. The example below shows how to display a block's field. We'll use "heading" as the example ACF field name, but it could be whatever name you give your field.
{{ fields.heading }}
Here's an example of how to loop through a repeater field where "features" is the ACF field name and the repeater field has a heading field.
{% for feature in fields.features %}
{{ feature.heading }}
{% endfor %}
theme/ contains all of the WordPress core templates files.
theme/acf-json/ contain all of your Advanced Custom Fields json files. These files are automatically created/updated using ACF's Local JSON feature.
theme/assets/ contain all of your fonts, images, styles and scripts.
theme/layouts/ contains all of your site's layout components used within the Flexible Content fields or as part of dynamic page templates. Each layout component has its own directory, which can include a Twig template file, optional JavaScript, and CSS files specific to that layout. These components allow for modular page construction and can be reused across different pages or posts, providing a versatile way to manage and present content dynamically.
theme/blocks/ contain all of your site's blocks. These blocks are available to use on any page via the block editor. Each block has its own template, script and style files.
theme/patterns/ contains all of your sites's block patterns. Block Patterns are a collection of predefined blocks that you can insert into pages and posts and then customize with your own content.
theme/views/ contains all of your Twig templates. These pretty much correspond 1 to 1 with the PHP files that respond to the WordPress template hierarchy. At the end of each PHP template, you'll notice a Timber::render() function whose first parameter is the Twig file where that data (or $context) will be used.
MIT © Daniel Snell