Skip to content

Directory Structure

Origins
  ├─ acf-json/
  │  └─ ...
  ├─ app/
  │  ├─ Hooks/
  │  │  ├─ Assets.php
  │  │  ├─ ExampleAction.php
  │  │  ├─ GenerateGlobalStyles.php
  │  │  └─ ...
  │  ├─ Models/
  │  │  └─ Posts/
  │  │     └─ ...
  │  ├─ Providers/
  │  │  ├─ Repositories/
  │  │  ├─ Services/
  │  │  └─ TemplateContext/
  │  │     └─ ...
  │  ├─ Routes/
  │  └─ Twig/
  │     ├─ Filters.php
  │     └─ Functions.php
  ├─ blocks/
  │  │  Components/
  │  │  └─ ExampleBlock/
  │  │     ├─ block.json
  │  │     ├─ ExampleBlock.php
  │  │     ├─ index.twig
  │  │     ├─ script.js
  │  │     └─ style.css
  │  │  Containers/
  │  └─ Sections/
  ├─ bootstrap/
  │  ├─ app.php
  │  └─ providers.php
  ├─ config/
  │  ├─ colors.php
  │  ├─ env.php
  │  ├─ theme.php
  │  ├─ timber.php
  │  └─ wordpress.php
  ├─ patterns/
  │  └─ ...
  ├─ resources/
  │  ├─ assets/
  │  │  ├─ fonts/
  │  │  ├─ images/
  │  │  │  └─ ...
  │  │  ├─ scripts/
  │  │  │  ├─ app.js
  │  │  │  └─ editor.js
  │  │  └─ styles/
  │  │     ├─ tailwind/
  │  │     │  ├─ base.css
  │  │     │  ├─ components.css
  │  │     │  └─ utilities.css
  │  │     ├─ wordpress/
  │  │     │  ├─ block-library.css
  │  │     │  └─ global-styles.css
  │  │     ├─ app.css
  │  │     ├─ editor.css
  │  │     ├─ fonts.css
  │  │     └─ safelist.txt
  │  └─ views/
  │     ├─ components/
  │     │  ├─ footer-navigation.twig
  │     │  ├─ header-navigation.twig
  │     │  ├─ megamenu.twig
  │     │  └─ search-results.twig
  │     ├─ layouts/
  │     │  ├─ footer.twig
  │     │  └─ header.twig
  │     ├─ macros/
  │     │  └─ image.twig
  │     ├─ pages/
  │     │  ├─ 404.twig
  │     │  ├─ archive.twig
  │     │  ├─ index.twig
  │     │  ├─ menu.twig
  │     │  ├─ page-plugin.twig
  │     │  ├─ page.twig
  │     │  ├─ search.twig
  │     │  └─ single.twig
  │     ├─ partials/
  │     │  ├─ fonts.twig
  │     │  ├─ gtm-noscript.twig
  │     │  ├─ gtm.twig
  │     │  ├─ pagination.twig
  │     │  └─ socials.twig
  │     ├─ svg/
  │     │  └─ ...
  │     └─ base.twig
  ├─ storage/
  │  └─ cache/
  ├─ block-icon.svg
  ├─ composer.json
  ├─ functions.php
  ├─ icon.png 
  ├─ iconlg.png
  ├─ index.php
  ├─ manifest.json
  ├─ package.json
  ├─ postcss.config.js
  ├─ style.css
  ├─ tailwind-typography.config.js
  ├─ tailwind.config.js
  ├─ theme-provider.js
  ├─ theme.json
  ├─ vite-dev-app.js
  ├─ vite-dev-blocks.js
  ├─ vite-dev-editor.js
  ├─ vite-dev.mjs
  └─ vite.config.mjs

<!-- Omitted for clarity: husky, dist, node_modules, vendor, .gitignore, bun.lockb, composer.lock, markdown files, and package-lock.json -->

acf-json → Contains all of your Advanced Custom Fields json files. These files are automatically created/updated using ACF's Local JSON feature.

app ↓

  • Hooks → Contains classes that create custom functionality in WordPress. Hooks are self registering. See more.

  • Models → Contains classes that describe the structure of the data for an object. Usually these are classes that extend Timber Objects. You must make a hook to register any new models that are created.

  • Providers ↓

  • Repositories → Contains classes responsible for interacting with the database, primarily queries.

  • Services → Contains classes of functions that can be called by useing these classes elsewhere.

  • TemplateContext → Contains classes that provide additional context to parts of the site. See more.

  • Routes → Used for defining htmx routes that fetch the data requested on trigger, and render a desired template with that data as context simultaneously. See more.

  • Twig → Create custom twig filters and functions to be used in twig files.

blocks → Contains 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. Edit the block.json to extend block availability to specific post types. See more.

bootstrap → The bootstrap file initializes the application by loading configurations, setting up dependency injection and error handling, and registering hooks using Og's framework.

config → Contains configuration files for blocks, env, theme, timber, and wordpress. The theme.php file allows you to set various theme settings such as the menu locations that are registered for the site etc. Key/value pairs in this file can be accessed with the Og class like so Config::get('key.value').

patterns → Contains all of the .php files generated when creating a pattern using the Pattern Manager plugin. May not be in your initial directory until a first pattern is made.

resources → Contains the assests folder holding all of the fonts, images, styles and scripts for the site. The editor.js file in resoures/assets/scripts/ can be used to register additional styles for WordPress blocks like buttons for example. In resources/assets/styles/ there are many important css files. components.css is for class-based styles or styling of default WordPress components or third-party components. utilities.css is for single-purpose utility classes that should always take precedence over any other styles. safelist.txt is for adding classes to tailwinds safelist separated from the tailwind.config.js file. Resources also contains the views folder which houses all of your Twig templates which are rendered by TimberRouter the index.php file. Aside from blocks, these view files are going to construct the majority of the website.

storage → An area that is used to store expensive processes such as caching in production or storing API data.

tailwind-typogrophy.config.js → This file is for outlining global styles using the prose typography classes.

tailwind.config.js → This file is for extending the tailwind theme, such as adding custom colors or fonts.

theme.json → This file is for making customization tools available in the editor such as custom colors or spacing options as well as defining defaults for WordPress settings such as the content max-width. See Reference

All WordPress core template files are located in the og-core package.