This repository contains the starter theme for projects using WordPress.
Install the theme manually by cloning the repository under your WordPress themes directory and then removing the git tracking:
git clone git@github.com:alexsancho/wp-starter-theme.git your-theme-name
rm -rf your-theme-name/.git
First you need to install required npm packages to start developing. In your theme root run:
yarn install
Replace the THEMENAME
string with your theme name within all project files with a case sensitive search and replace. This is used for namespacing the theme function files.
Translations and the theme textdomain are loaded from under the /lang
directory. Replace the textdomain
string with your theme textdomain within all project files with a case sensitive search and replace. Then rename the .pot
file under the /lang
directory with the new theme textdomain.
Assets are compiled with Webpack. Use yarn to install packages and require JavaScript files in assets/src/front/main.js and import Sass files in assets/src/front/scss/main.scss. The directory under which the assets are build is dist
.
You should only enqueue files that are under dist
!
The URL to be used with the assets is defined in /lib/setup.php
with the ASSET_URI
constant. It points to https://{site_domain}/{path_to_themes_folder}/themename/dist
by default. To use another source for assets this value can be changed by defining the constant for example in the wp-config.php
file with a custom URI.
The style and script files are automatically enqueued with the current theme version. To bust browser cache on asset updates change the theme version in the style.css
file comments.
Run webpack in the theme root in your local environment.
Run with the npm script:
npm run start
These commands will compile unminified versions of your assets.
Build minified versions for production with the npm script:
npm run build
These commands will compile minified versions of your assets.
The theme's Webpack config uses Babel to compile ES6 into ES5. Thus we use classes and other cool features introduced in ES6. See the full list of ES6 features here.
If you add npm packages using ES6 features, remember to include them for the Babel loader in the webpack.config.js
file!