{"id":24490362,"url":"https://github.com/armandphilippot/wordpress-theme-webpack","last_synced_at":"2025-04-13T23:07:55.022Z","repository":{"id":132593557,"uuid":"403745035","full_name":"ArmandPhilippot/wordpress-theme-webpack","owner":"ArmandPhilippot","description":"A WordPress boilerplate to develop themes using webpack and npm scripts.","archived":false,"fork":false,"pushed_at":"2024-11-19T02:25:01.000Z","size":1225,"stargazers_count":7,"open_issues_count":2,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-04-13T23:07:41.407Z","etag":null,"topics":["boilerplate","npm-scripts","webpack","wordpress","wordpress-theme"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/ArmandPhilippot.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2021-09-06T20:02:02.000Z","updated_at":"2024-09-15T11:57:22.000Z","dependencies_parsed_at":"2023-11-11T15:46:02.225Z","dependency_job_id":null,"html_url":"https://github.com/ArmandPhilippot/wordpress-theme-webpack","commit_stats":null,"previous_names":["armandphilippot/wordpress-theme-webpack"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArmandPhilippot%2Fwordpress-theme-webpack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArmandPhilippot%2Fwordpress-theme-webpack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArmandPhilippot%2Fwordpress-theme-webpack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArmandPhilippot%2Fwordpress-theme-webpack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ArmandPhilippot","download_url":"https://codeload.github.com/ArmandPhilippot/wordpress-theme-webpack/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248794572,"owners_count":21162614,"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","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":["boilerplate","npm-scripts","webpack","wordpress","wordpress-theme"],"created_at":"2025-01-21T17:17:57.582Z","updated_at":"2025-04-13T23:07:54.990Z","avatar_url":"https://github.com/ArmandPhilippot.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# WordPress Theme Webpack\n\n![License](https://img.shields.io/github/license/boilerplates-collection/wordpress-theme-webpack?color=blue\u0026colorA=4c4f56\u0026label=License\u0026style=flat-square) ![Version](https://img.shields.io/github/package-json/v/boilerplates-collection/wordpress-theme-webpack?color=blue\u0026colorA=4c4f56\u0026label=Version\u0026style=flat-square)\n\nA WordPress boilerplate to develop themes with webpack.\n\n## Requirements\n\n* You need [npm](https://www.npmjs.com/) and [Composer](https://getcomposer.org/) in order to install dependencies.\n\n* This boilerplate uses Standard version to generate a changelog and Husky to validate commits, so you need to follow the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/).\n\n* In order to avoid the warnings related to the local use of `https`, you will need a valid certificate. You can achieve this with [mkcert](https://github.com/FiloSottile/mkcert).\n\n## Features\n\n### What is included?\n\n* [BabelJS](https://babeljs.io/)\n* [Commitlint](https://commitlint.js.org/)\n* [Dotenv](https://github.com/motdotla/dotenv) and [PHPDotenv](https://github.com/vlucas/phpdotenv)\n* [ESlint](https://github.com/eslint/eslint)\n* [Husky](https://github.com/typicode/husky)\n* [Lint-staged](https://github.com/okonet/lint-staged)\n* [Modern-normalize](https://github.com/sindresorhus/modern-normalize)\n* [PHP_CodeSniffer](https://github.com/squizlabs/PHP_CodeSniffer)\n* [Playwright](https://github.com/microsoft/playwright)\n* [PostCSS](https://postcss.org/)\n* [RTLCSS](https://rtlcss.com/)\n* [Standard version](https://github.com/conventional-changelog/standard-version)\n* [Stylelint](https://github.com/stylelint/stylelint)\n* [webpack](https://webpack.js.org/)\n* [WordPress Coding Standards](https://github.com/WordPress/WordPress-Coding-Standards)\n* [WordPress-Prettier](https://github.com/Automattic/wp-prettier)\n* [wp-pot](https://github.com/wp-pot/wp-pot)\n\n### webpack\n\nwebpack will:\n\n* compile Sass to CSS and process styles with postcss and autoprefixer,\n* generate `style.css` in the theme root,\n* generate `editor.css` and `print.css` in `assets/css`,\n* transpile JS files with Babel and output them in `assets/js`,\n* compress images in `src/images` and copy them in `assets/images`,\n* handle fonts by copying `src/fonts` to `assets/fonts`.\n\nwebpack comes with two mode: `development` and `production`. Here the difference for JS and CSS files :\n\n|Features|`development`|`production`|\n|---|:-:|:-:|\n|Hot Module Replacement|✓|𐄂|\n|Live Reload|✓|𐄂|\n|Minify|𐄂|✓|\n|Sourcemaps|✓|𐄂|\n|Written to disk|𐄂|✓|\n\n### npm scripts\n\nWith `npm`, you can use some scripts:\n\n* `npm run build`: write assets in `assets` folder and generate RTL version for each CSS file.\n* `npm run watch`: build assets in dev mode and continue to watch for changes.\n* `npm run serve`: launch webpack dev server, open your website in the desired browser and refresh it on changes.\n* `npm run lint`: check if all files respects your coding standards.\n* `npm run fix`: fix all files to comply with your coding standards.\n* `npm run rtl`: generate a RTL version of each CSS file.\n* `npm run translate`: generate a `.pot` file in `./languages`.\n* `npm run screenshot`: take a screenshot (`1200x900`) of your homepage and save `screenshot.png` in your theme root.\n* `npm run release`:\n    * bump `package.json`, `readme.txt`, `functions.php` and `src/scss/abstracts/_variables.scss`,\n    * launch build to update version in `style.css`,\n    * create a new commit with a new tag for your release.\n* `npm run zip`: create a compressed file of your theme, excluding files needed only in development mode.\n\nTo lint/fix a specific type of files, you can also use a \"sub\" script:\n* `npm lint:js` / `npm fix:js` for JS files,\n* `npm lint:php` / `npm fix:php` for PHP files,\n* `npm lint:scss` / `npm fix:scss` for SCSS files.\n\n## How to use it\n\n### First steps\n\nClone this repo, copy `wordpress-theme` in your WordPress installation ( `wp-content/themes/` ) and rename it. Then, in your theme directory:\n\n1. Init Git (otherwise Husky will not install hooks)\n2. Launch `npm install` and `composer update`\n3. Execute `npx husky install` to install Git hooks\n4. Copy `.env.example` and rename it `.env`\n5. Edit your `.env` file to suit your project.\n6. Launch `npm run init`\n7. You may want to relaunch `npm install` so that your `package-lock.json` contains the correct information.\n8. Execute `npm run build`: it creates the `style.css` file needed by WordPress to activate the theme.\n\nThat's it! You can now start developing your theme.\n\n### Complete the configuration\n\nIf you need to complete the boilerplate:\n\n* `tools/` contains files required by webpack and npm scripts,\n    * `tools/bump/` contains files used to bump version,\n    * `tools/utils/` contains files that can be reused between scripts,\n    * `tools/webpack/` contains webpack config in addition to `webpack.config.js` in the theme root,\n    * `tools/init.js` is used to init your theme,\n    * `tools/screenshot.js` is used to take a screenshot of your website,\n    * `tools/translate.js` handle the `.pot` generation for translation,\n    * `tools/zip.js` handle the `.zip` generation.\n\n## Tips\n\n### Formatting JS files in VS Code with Prettier and ESlint\n\nIf you are using Prettier extension to auto-fix your files, you may want to disable it for Javascript. Prettier doesn't work well with ESlint rules (in particular space rules). So, I recommend you to set these settings in your workspace:\n\n```json\n{\n    \"editor.codeActionsOnSave\": {\n        \"source.fixAll\": true,\n    },\n    \"editor.formatOnSave\": true,\n    \"[javascript]\": {\n        \"editor.formatOnSave\": false,\n    }\n}\n```\nThis way, only the ESlint extension will be used to format your JS files.\n\n## Additional Notes\n\nIf you plan to publish your theme on [WordPress Theme directory](https://wordpress.org/themes/), you may want to edit `readme.txt` manually to provides all necessary information. I'm not sure this is required for themes (it is for plugins), but it is at least recommended. See [a revised readme](https://make.wordpress.org/themes/2015/04/29/a-revised-readme/) for an example.\n\nYou need at least `410MiO` of free space*: `node_modules` is about `200 Mio` but a dependency (`playwright-firefox`) also creates a folder of about `206 Mio` in your cache directory. I have chosen the Firefox version because the webkit version did not work on my system and the Chromium version took a little more space.\n\n*The sizes are given for information only, they may vary.\n\n## License\n\nThis project is open-sourced and available under the [GPL-v2-or-later](./LICENSE) license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farmandphilippot%2Fwordpress-theme-webpack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farmandphilippot%2Fwordpress-theme-webpack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farmandphilippot%2Fwordpress-theme-webpack/lists"}