{"id":25850598,"url":"https://github.com/germanfrelo/wp-theme-template","last_synced_at":"2025-10-15T07:25:44.810Z","repository":{"id":251802347,"uuid":"838449052","full_name":"germanfrelo/wp-theme-template","owner":"germanfrelo","description":"Get a quick start on building modern WordPress websites with this starter block theme template. It includes a curated and useful set of basic presets.","archived":false,"fork":false,"pushed_at":"2025-10-06T16:32:55.000Z","size":1710,"stargazers_count":4,"open_issues_count":4,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-06T18:18:46.688Z","etag":null,"topics":["block-theme","boilerplate","boilerplate-front-end","boilerplate-wordpress","starter-template","wordpress","wordpress-block-theme","wordpress-boilerplate","wordpress-development","wordpress-site","wordpress-starter-theme","wordpress-theme","wordpress-theme-boilerplate","wordpress-theme-development","wordpress-theme-template"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/germanfrelo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-08-05T16:58:02.000Z","updated_at":"2025-10-06T16:04:39.000Z","dependencies_parsed_at":"2025-01-09T14:40:24.488Z","dependency_job_id":"17d25a76-63c7-45ca-b02c-20c0ca847d3b","html_url":"https://github.com/germanfrelo/wp-theme-template","commit_stats":{"total_commits":8,"total_committers":2,"mean_commits":4.0,"dds":0.25,"last_synced_commit":"ad1144e8d3c2684ca3dd6d4b0167ddcad50f3ff1"},"previous_names":["germanfrelo/wordpress-custom-theme-template","germanfrelo/wordpress-custom-theme-boilerplate","germanfrelo/wordpress-child-theme-starter-template","germanfrelo/wp-block-theme-starter-template","germanfrelo/block-theme-starter-template"],"tags_count":3,"template":true,"template_full_name":"germanfrelo/template","purl":"pkg:github/germanfrelo/wp-theme-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/germanfrelo%2Fwp-theme-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/germanfrelo%2Fwp-theme-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/germanfrelo%2Fwp-theme-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/germanfrelo%2Fwp-theme-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/germanfrelo","download_url":"https://codeload.github.com/germanfrelo/wp-theme-template/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/germanfrelo%2Fwp-theme-template/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279059251,"owners_count":26094923,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-15T02:00:07.814Z","response_time":56,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["block-theme","boilerplate","boilerplate-front-end","boilerplate-wordpress","starter-template","wordpress","wordpress-block-theme","wordpress-boilerplate","wordpress-development","wordpress-site","wordpress-starter-theme","wordpress-theme","wordpress-theme-boilerplate","wordpress-theme-development","wordpress-theme-template"],"created_at":"2025-03-01T12:24:36.437Z","updated_at":"2025-10-15T07:25:44.805Z","avatar_url":"https://github.com/germanfrelo.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# themename\n\n[![Build and Deploy to Server](https://github.com/germanfrelo/wp-theme-template/actions/workflows/deploy.yml/badge.svg)](https://github.com/germanfrelo/wp-theme-template/actions/workflows/deploy.yml)\n\n\u003e Get a quick start on building modern WordPress websites with this starter block theme template. It includes a curated and useful set of basic presets.\n\n\u003e [!WARNING]\n\u003e This is a personal **work-in-progress** project and is subject to significant changes. If you are going to use it, it is **crucial** that you carefully review and adapt the code to fit your project's requirements.\n\n\u003e [!IMPORTANT]\n\u003e There are no current plans to release it on the official WordPress.org themes directory.\n\n## Development\n\n**Table of Contents**:\n\n- [Prerequisites](#prerequisites)\n- [Local Site Setup](#local-site-setup)\n- [Theme Setup](#theme-setup)\n- [CSS](#css)\n- [Local Development Workflow](#local-development-workflow)\n- [Deployment Workflow](#deployment-workflow)\n\n## Prerequisites\n\n- [**Git**](https://docs.github.com/en/get-started/git-basics)\n- [**Node.js and npm**](https://developer.wordpress.org/block-editor/getting-started/devenv/#node-js-development-tools)\n- [**Code editor**](https://developer.wordpress.org/block-editor/getting-started/devenv/#code-editor) - Recommended: [VS Code](https://code.visualstudio.com/) with [these extensions](.vscode/extensions.json)\n- [**Local WordPress Development Environment**](https://developer.wordpress.org/block-editor/getting-started/devenv/#local-wordpress-environment) - WordPress [recommends](https://github.com/WordPress/twentytwentyfive#getting-started) using [wp-env](https://developer.wordpress.org/block-editor/getting-started/devenv/) or [Local](https://localwp.com/)\n\n## Local Site Setup\n\nOnce you have a local WordPress development environment set up and running on your computer, set up the local site.\n\n### 1. Replicate the production/staging site locally\n\nAn easy and reliable way is to use the [All-in-One WP Migration and Backup](https://wordpress.org/plugins/all-in-one-wp-migration/) plugin.\n\n### 2. Improve the local development and debugging experience\n\nModify the `wp-config.php` file of your local site to replace **only** the content from `For developers: WordPress debugging mode` to `That's all, stop editing!` with the following content:\n\n\u003cdetails\u003e\n\u003csummary\u003eContent\u003c/summary\u003e\n\n```php\n/**\n * For developers: WordPress debugging mode.\n *\n * Change this to true to enable the display of notices during development.\n * It is strongly recommended that plugin and theme developers use WP_DEBUG\n * in their development environments.\n *\n * For information on other constants that can be used for debugging,\n * visit the documentation.\n *\n * @link https://developer.wordpress.org/advanced-administration/debug/debug-wordpress/\n *\n * Also:\n * When you are actively developing with theme.json you may notice it takes 30+ seconds for your changes to show up in the browser, this is because theme.json is cached. To remove this caching issue, set either WP_DEBUG or SCRIPT_DEBUG to 'true' in your wp-config.php. This tells WordPress to skip the cache and always use fresh data.\n *\n * @link https://developer.wordpress.org/block-editor/how-to-guides/themes/global-settings-and-styles/#why-does-it-take-so-long-to-update-the-styles-in-the-browser\n * @link https://developer.wordpress.org/advanced-administration/debug/debug-wordpress/#wp_debug\n */\nif ( ! defined( 'WP_DEBUG' ) ) {\n  define( 'WP_DEBUG', true );\n}\n\n/**\n * Set the environment type to 'local'.\n */\ndefine( 'WP_ENVIRONMENT_TYPE', 'local' );\n\n/**\n * Set the development mode for the site. Can be 'theme', 'plugin', or 'all'.\n *\n * @link https://make.wordpress.org/core/2023/07/14/configuring-development-mode-in-6-3/\n */\ndefine( 'WP_DEVELOPMENT_MODE', 'all' );\n\n/**\n * Enable Debug logging to the /wp-content/debug.log file.\n *\n * @link https://developer.wordpress.org/advanced-administration/debug/debug-wordpress/#wp_debug_log\n */\ndefine( 'WP_DEBUG_LOG', true );\n\n/**\n * Disable display of errors and warnings.\n * Control whether debug messages (errors and warnings) are shown or not inside the HTML of pages.\n *\n * @link https://developer.wordpress.org/advanced-administration/debug/debug-wordpress/#wp_debug_display\n */\ndefine( 'WP_DEBUG_DISPLAY', false );\n@ini_set( 'display_errors', 0 );\n\n/**\n * Use dev versions of core JS and CSS files (only needed if you are modifying these core files).\n *\n * @link https://developer.wordpress.org/advanced-administration/debug/debug-wordpress/#script_debug\n */\ndefine( 'SCRIPT_DEBUG', true );\n\n/**\n * Enable the use of the Trash for media items.\n *\n * @link https://wordpress.org/plugins/media-trash-button/\n */\ndefine( 'MEDIA_TRASH' , true );\n\n/* That's all, stop editing! Happy publishing. */\n```\n\n\u003c/details\u003e\n\n## Theme Setup\n\nOnce your local site is set up:\n\n1. **Clone this theme repository** into the `/wp-content/themes/` directory of your local site.\n2. **`cd` to the theme directory** using your terminal.\n3. **Find and replace placeholders.** Use your code editor's global search and replace feature to replace all instances of the following placeholders with your project's information:\n   - `themeauthor`\n   - `themedescription`\n   - `themename`\n   - `themerepourl`\n   - `themeslug`\n   - `themeurl`\n4. **Install the dependencies** with `npm install`.\n\n## CSS\n\n\u003e [!IMPORTANT]\n\u003e This theme uses a modular CSS architecture based on the **[CUBE CSS methodology](https://piccalil.li/blog/cube-css/)** and **[this CSS project boilerplate](https://piccalil.li/blog/a-css-project-boilerplate/)**, adapted to the constraints of a WordPress block theme and block/site editor.\n\nThese are the theme's main CSS-related directories and files:\n\n```text\n/\n├── includes/\n│   ├── block-style-variations.php\n│   └── styles.php\n├── src/\n│   └── css/\n│       ├── blocks/\n│       ├── compositions/\n│       ├── global/\n│       ├── regions/\n│       ├── utilities/\n│       └── theme.css\n├── postcss.config.js\n├── style.css\n└── theme.json\n```\n\n### `theme.json`\n\nThis file is primarily used to:\n\n- Define and configure **some settings and global/primitive design tokens**. Except those defined as \"custom\", the rest will be available in the editor.\n- Register **custom templates**, **template parts**, and **patterns**.\n\n\u003e [!IMPORTANT]\n\u003e **It's _not_ used for applying styles.**\n\n### `style.css`\n\nWordPress requires this file solely for theme registration metadata, such as the theme's name, author and version.\n\n\u003e [!IMPORTANT]\n\u003e This file is for metadata only. **It's _not_ enqueued by the theme. Do _not_ use it for adding any CSS.**\n\n### Theme's main styles\n\nThe theme's main styles are in **`src/css/`**, split into multiple files and organized in directories:\n\n```text\nsrc/css/\n├── blocks/\n│   ├── button.css\n│   ├── ...\n│   ├── wp-block-{block_slug}.css\n│   ├── ...\n│   ├── {plugin_slug}-{block_slug}.css\n│   └── ...\n├── compositions/\n│   ├── cluster.css\n│   ├── flow.css\n│   ├── frame.css\n│   ├── grid.css\n│   ├── icon.css\n│   ├── reel.css\n│   ├── repel.css\n│   ├── sidebar.css\n│   ├── stack.css\n│   ├── switcher.css\n│   └── wrapper.css\n├── global/\n│   ├── global-styles.css\n│   ├── reset.css\n│   ├── variables.css\n├── regions/\n│   ├── ...\n│   ├── site-footer.css\n│   ├── site-header.css\n│   └── ...\n├── utilities/\n│   ├── ...\n│   ├── region.css\n│   ├── text-align.css\n│   ├── text-wrap.css\n│   ├── visually-hidden.css\n│   └── ...\n└── theme.css\n```\n\nThe structure is based on the [CUBE CSS methodology](https://piccalil.li/blog/cube-css/) and [boilerplate](https://piccalil.li/blog/a-css-project-boilerplate/) previously mentioned.\n\nThe primary entry point is the **`theme.css`** file. It uses `@import` rules (processed by PostCSS) to pull in all stylesheets that are organized in directories.\n\n\u003e [!IMPORTANT]\n\u003e **The specific import order is critical for correct CSS specificity.**\n\n\u003e [!NOTE]\n\u003e Only stylesheets in `global/` are imported explicitly and in a specific order. Stylesheets in the other directories are all imported in default (alphabetical) order, thanks to the `import-glob` PostCSS plugin. This means that **any new `.css` file created in these directories is automatically imported**.\n\nSome CSS files probably don't need to be changed, whereas other do:\n\n| File/Directory             | Needs Changes?                                                                       |\n| :------------------------- | :----------------------------------------------------------------------------------- |\n| `global/global-styles.css` | Yes.                                                                                 |\n| `global/reset.css`         | Unlikely. It contains useful project-agnostic reset styles.                          |\n| `global/variables.css`     | Yes.                                                                                 |\n| `compositions/`            | Unlikely. It contains a bunch of predefined, project-agnostic compositional layouts. |\n| `blocks/`                  | Yes.                                                                                 |\n| `regions/`                 | Yes.                                                                                 |\n| `utilities/`               | Probably.                                                                            |\n\n### Automated compilation\n\nPostCSS processes the file **`src/css/theme.css`**. It resolves all imports and combines all the different CSS files into a single, optimized file: **`build/css/theme.css`**.\n\nThis process happens automatically:\n\n- During the [**local development workflow**](#local-development-workflow) when you run `npm start`.\n- As part of the [**deployment workflow**](#deployment-workflow) when you push commits or merge PRs to the repository's default branch.\n\nThis means you **never need to compile CSS manually** (i.e., run `npm run build`).\n\n### Enqueuing\n\n\u003e [!IMPORTANT]\n\u003e **The theme only enqueues the `build/css/theme.css` file.**\n\u003e It's enqueued by `includes/styles.php`, **on the website and in the site editor**.\n\n## Local Development Workflow\n\nOnce you have followed the [Local Site Setup](#local-site-setup) and the [Theme Setup](#theme-setup), you can now start developing.\n\nOpen your terminal in the theme directory and run:\n\n```sh\nnpm run start\n```\n\nThis command builds the development version of the theme's assets:\n\n- Styles: from `src/css/` to `build/css/`\n\nIt then activates a \"watch\" mode, automatically recompiling and rebuilding necessary files in real-time as you make and save changes to your code.\n\n\u003e [!IMPORTANT]\n\u003e While `npm run start` automatically rebuilds assets, whether these changes appear in your local WordPress site depends on your development environment. Tools like Local with its \"[Instant Reload](https://localwp.com/help-docs/local-features/instant-reload/)\" feature provide immediate CSS updates. For JavaScript changes in blocks, a browser refresh might still be necessary in some setups.\n\n### Code Quality: Formatting and Linting\n\nBefore committing your changes, please ensure your code adheres to the project's standards.\n\n- **Format your code:** Run `npm run format`.\n- **Check for linting errors:** Run `npm run lint`.\n\nThese formatting and linting checks are also automatically run on staged files before each commit.\n\nIt's also recommended to install the extensions of these tools for your code editor, such as [the ones for VS Code](.vscode/extensions.json).\n\n## Deployment Workflow\n\nThis theme uses [a CI/CD pipeline](https://en.wikipedia.org/wiki/CI/CD) via GitHub Actions to automate the build and deployment process to the production/staging server. The file is `.github/workflows/deploy.yml`.\n\nUpon pushing changes or merging Pull Requests to the repository's default branch, the pipeline will:\n\n1. Set up the Node.js environment.\n2. Install theme dependencies.\n3. Build production-ready assets such as the theme's main CSS.\n4. Deploy the built theme files to the configured server.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgermanfrelo%2Fwp-theme-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgermanfrelo%2Fwp-theme-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgermanfrelo%2Fwp-theme-template/lists"}