Next Generation WordPress Theme Starter Kit
- Improve template hierarchy and directory layout
- Implement WordPress Theme Autoloader
- Implement class based theme functions
- Implement Theme hooks
- Support the Block Editor Gutenberg
- Generate your starter theme on Theme Starter script
- Theme development environment on npm scripts
- Theme testing environment on composer scripts
git clone https://github.com/thingsym/wp-theme-boilerplate.git mytheme
or
Download archive file (zip or tar.gz) form GitHub Releases page
Note: Change folder name to Theme Slug
Note: Run only once. Note: Theme name does case-sensitive.
cd mytheme
bash bin/setup.sh --theme 'Mytheme'
or (via npm)
npm run setup -- --theme 'Mytheme'
git init
git add .
git commit -m "initial commit"
npm install
|- bin/ # scripts
| |- setup.sh # Theme Starter script
| |- install-wp-tests.sh # install script for WordPress testing environment
| |- reset-wp-tests.sh # reset script for WordPress testing environment
| |- uninstall-wp-tests.sh # uninstall script for WordPress testing environment
|
|- css/ # stylesheet files
| |- block-editor-style.css
| |- editor-style.css
| |- style-rtl.css
| |- style.css
| |- style.min.css
|
|- functions/ # PHP classes and functional php files
| |- custom-header/
| |- customizer/
| |- entry-meta/
| |- post-thumbnail/
| |- setup/
| |- template/
| |- theme-hook/
| |- autoload.php # WordPress Theme Autoloader
| |- loadup.php
|
|- js/ # Javascript files
|
|- languages/ # Translation files
|
|- node_modules/ # npm modules
|
|- src/ # assets for development
| |- js/ # javascript files
| |- scss/ # scss files
|
|- templates/ # template files and partial files
| |- content/ # content part files
| |- page-header/ # page header part files
| |- parts/ # partial files
| |- sidebar/ # sidebar part files
| |- 404.php
| |- archive.php
| |- index.php
| |- page.php
| |- search.php
| |- single.php
|
|- tests/ # testing suite files
| |- js/ # Javascript testing suite
| |- phpunit/ # PHP testing suite
|
|- vendor/ # Composer dependencies
|
|- .editorconfig # Editor config settings
|- .gitignore # gitignore config settings
|- .travis.yml
|- composer.json # Composer package file for theme testing and using PHP libraries
|- functions.php # WordPress functionality file
|- index.php # WordPress file
|- LICENSE # LICENSE file
|- package.json # npm package file for theme development
|- phpcs.ruleset.xml # PHP_CodeSniffer config settings
|- phpmd.ruleset.xml # PHPMD config settings
|- phpstan.neon # PHPStan config settings
|- phpunit.xml # PHPUnit config settings
|- README.md # this file
|- readme.txt # theme readme file for your starter theme
|- screenshot.png # Screenshot image file
|- style.css # main stylesheet file, only theme header
|- webpack.config.js # webpack config settings
The top priority template hierarchy is the templates
directory.
For example, the template hierarchy of the top page is as follows:
templates
/front-page.php- front-page.php
templates
/home.php- home.php
templates
/index.php- index.php
Theme hooks adds an action through the add_action
function.
add_action( 'wp_theme_boilerplate/theme_hook/site/header', [ $this, 'header' ] );
Note: Replace wp_theme_boilerplate
with your_theme_slug
your_theme_slug
/theme_hook/site/header/beforeyour_theme_slug
/theme_hook/site/headeryour_theme_slug
/theme_hook/site/header/afteryour_theme_slug
/theme_hook/site/content/beforeyour_theme_slug
/theme_hook/site/content/afteryour_theme_slug
/theme_hook/site/footer/beforeyour_theme_slug
/theme_hook/site/footeryour_theme_slug
/theme_hook/site/footer/after
your_theme_slug
/theme_hook/content/prependyour_theme_slug
/theme_hook/content/appendyour_theme_slug
/theme_hook/content/index/prependyour_theme_slug
/theme_hook/content/index/appendyour_theme_slug
/theme_hook/content/page/prependyour_theme_slug
/theme_hook/content/page/appendyour_theme_slug
/theme_hook/content/archive/prependyour_theme_slug
/theme_hook/content/archive/append
your_theme_slug
/theme_hook/entry/meta/headeryour_theme_slug
/theme_hook/entry/post_thumbnailyour_theme_slug
/theme_hook/entry/meta/footer
Theme Starter script generate your starter theme.
Note: Run only once.
bin/setup.sh --theme 'Mytheme'
npm run setup -- --theme 'Mytheme'
npm install
npm run <task>
- setup
- makepot
- msgfmt:ja
- msgfmt
- sass:style
- sass:style:minify
- sass:block-editor
- rtlcss:rtl
- webpack
- build:css
- build:js
- build:i18n
- build
- lint:css
- lint:scss
- lint:es
- lint:\es:fix
- lint
- stats:css
- bs:server
- bs:server:watch
- bs:proxy
- bs:proxy:watch
- watch:css
- watch:js
- watch
- server
- archive:package
- archive:zip
- archive
composer install
composer run <task>
- phpcs:config-set
- phpcs
- phpcs:warning
- phpcbf
- phpmd
- phpstan
- phpunit
- ci
- Based on Underscores, GPLv2 or later
- CSS reset by normalize.css, MIT
Small patches and bug reports can be submitted a issue tracker in Github. Forking on Github is another good way. You can send a pull request.
- Fork WP Theme Boilerplate from GitHub repository
- Create a feature branch: git checkout -b my-new-feature
- Commit your changes: git commit -am 'Add some feature'
- Push to the branch: git push origin my-new-feature
- Create new Pull Request
- replace scss from node-sass to dart-sass
- fix npm scripts for dart-sass
- add dart-sass
- update node package
- add GitHub actions, remove .travis.yml
- imporve code with phpcs, phpmd and phpstan
- update testunit configuration
- fix composer.json
- fix webpack.config.js, generate compressed and uncompressed files
- fix npm scripts
- update package.json
- update package.json
- assign object to variable for child theme
- fix hooks priority
- replace array() to short array syntax []
- fix css header
- fix npm scripts
- fix setup.sh
- move test case directory
- bump up phpunit version 7.x
- add version number with zip archive
- move template parts files to page-header dir
- add non minified javascript files for theme review
- change javascript files bundle from webpack to minify
- move javascript files to src/javascript/main directory
- exclude node_modules in test scope
- remove README.md in zip archive
- fix Theme Starter script
- add style-rtl.css
- update .pot
- fix Requires at least to 5.0
- fix header image and logo image size
- add archive script with npm script
- fix test case
- bundle javascript files
- add webpack, replace from uglify-es
- move javascript files to src directory
- fix error content
- remove paginated with archive
- add Class Editor
- fix site-info
- add editor-style.scss
- replace from uglifyjs to uglify-es
- fix header container
- add Composer autoloader
- add editor-style.css
- add test case
- initial release
Licensed under GPLv2 or later
Copyright (c) 2019-2020 by thingsym