https://github.com/unplugstudio/wp-base-theme
Base WordPress theme
https://github.com/unplugstudio/wp-base-theme
es6 js sass scss wordpress wordpress-starter-theme wordpress-theme
Last synced: 2 months ago
JSON representation
Base WordPress theme
- Host: GitHub
- URL: https://github.com/unplugstudio/wp-base-theme
- Owner: unplugstudio
- Created: 2020-05-16T00:12:58.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2024-05-20T16:17:42.000Z (about 2 years ago)
- Last Synced: 2025-06-26T10:51:47.077Z (about 1 year ago)
- Topics: es6, js, sass, scss, wordpress, wordpress-starter-theme, wordpress-theme
- Language: PHP
- Size: 1.74 MB
- Stars: 0
- Watchers: 0
- Forks: 1
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Base WordPress theme
## Important concepts
- [WP CLI `dotenv` command](https://github.com/aaemnnosttv/wp-cli-dotenv-command)
- [Bedrock](https://roots.io/docs/bedrock/master/installation/) (Wordpress theme structure).
## Initializing
```bash
# Switching to the right version of nodejs using nvm (node version manager)
# If you don't have it installed go to https://nvm.sh/ for instructions
nvm use
# Generate configuration and secrets
wp dotenv init --template=.env.example --with-salts --interactive
# Frontend requirements
npm install
# Backend requirements
composer install
```
## Development mode
In development mode Webpack will compile your SCSS (with autoprefixer) and JS (ES6) files and start a Browsersync server continually watching your changes. Files will also be written to `assets/dist`. The entry points are `assets/js/index.js` and `assets/scss/index.scss`.
Assuming your local WordPress installation is served at http://example.test, you can run the Browsersync server like this:
```bash
# Short version
npm run dev proxy="example.test"
# Long version
npm start -- --env proxy="example.test"
```
Now the proxied site with auto-reload will be available at http://localhost:3000. The regular site without auto-reload will still be available at the original URL.
You can also modify the dev script located in package.json with your local url to save some time.
```json
"scripts": {
"dev": "npm run start -- --env proxy='example.test'"
}
```
## Production mode
In production mode Webpack will compile your assets and create minified files in `assets/dist`. You can then transfer these files to the server by using FTP or `rsync`. To compile in production mode:
```bash
npm run build
# To delete previous assets/dist folder and build
npm run build:full
```
The resulting files are generated with unique names by Webpack to get automatic cache-busting when enqueued in WordPress.
## Code style
Linting is configured in `assets/.eslintrc` (JS), `assets/.stylelintrc` (CSS), and `.php_cs.dist` (PHP). Check the files for the configuration details.
Linters can be run with:
```bash
# Frontend files
npm run lint:js
npm run lint:css
# PHP files
composer run-script lint
```
## Additional Scripts
```bash
# deletes previous assets/dist folder and runs npm run dev
npm run dev:full proxy=""
# deletes previous assets/dist folder and runs npm run build
npm run build:full
# Lint js and css
npm run lint:full
```