A WordPress starter theme with baked-in support for SCSS, PostCSS, Autoprefixer, ES2015, BrowserSync and Gulp.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
images
includes
js
languages
modules
scss
.babelrc
.gitignore
404.php
CHANGELOG.md
README.md
comments.php
footer.php
functions.php
gulpfile.js
header.php
index.php
license.txt
package-lock.json
package.json
screenshot.png
script.js
style.css
theme-config.json
tmpl-blank-page.php
tmpl-display-pdf.php
woocommerce.php

README.md

A WordPress starter theme with support for SCSS, PostCSS, ES2015, BrowserSync and Gulp.


Note: Using this theme requires you to have Node.js installed.

Installation

1st Rename the theme's folder name to whatever suits your project is. Side note: Update conflicts with themes from wordpress.org arise from themes having identical folder names. To avoid such conflicts simply make sure that your theme's folder name is unique (e.g. via a prefix).

2nd Open package.json and change the package's name to match your theme's folder name and also revise the rest of the package briefly to suit your project.

3rd Replace all instances of the following strings with whatever suits your project.

  • primeraTextDomain
  • primeraFunctionPrefix
  • primeraObjectPrefix
  • primeraCssPrefix

4th Open scss/style.css and adjust the header comment section. Open gulpfile.js and adjust the constants in the top of the document.

5th Open your terminal and cd into the theme's folder. There you run sudo npm install and enter you computers admin password to install all node modules. Now you can run any of the following gulp commands.

Gulp Commands

GulpJS is a task runner. Below is a list of tasks you can run inside your terminal.

gulp css

  • Processes SCSS, PostCSS
  • Concatenates and minifies all css files into ./style.css
  • Runs once

gulp js

  • Processes ES2015 via BabelJS
  • Concatenates and minifies all js files into ./script.js
  • Runs once

gulp watch

  • Listens for changes within any php, js or css file
  • Applies gulp css or gulp js as needed
  • Will reload the browser to reflect the changes
  • Will keep running until you hit crtl+c within the terminal

gulp imgmin

  • Optimizes all images that are inside the img folder
  • Runs once

gulp potfile

  • Create a .pot file to be used for translations
  • Please see the Translation section below for more information
  • Runs once

gulp build

  • Runs gulp css, gulp js, gulp imgmin and gulp potfile
  • Runs once

gulp

  • Runs gulp watch
  • Runs once

SCSS & PostCSS Plugins

SASS or SCSS is a CSS extension that supplies some really cool features to CSS.

PostCSS is a JavaScript framework which processes CSS files. Primera includes the following PostCSS plugins.

ES2015 Resources

Browser Support

While writing CSS you do not need to worry about writing browser prefixes. The autoprefixer PostCSS plugin supplied via CSSNext will do that for you. To see or change which browsers are supported you can simply change the browserlist inside package.json using this guide.

Please also remember that autoprefixer can't help older browsers understand CSS properties which they simply do not support. For a great place to check which browser supports what visit caniuse.com.

Translation

  1. While developing, wrap any hard coded translatable text strings in their appropriate WP function.
  2. Revisit gulpfile.js and make sure the domain property inside wpPot() matches your theme's text domain.
  3. Run gulp potfile to create a .pot file inside the languages folder.
  4. To translate the .pot file and create the necessary .po and .mo files, you can use either Poedit or Loco Translate.

Please visit the following link to learn more about internationalization (i18n): https://developer.wordpress.org/themes/functionality/internationalization/

Versioning

To update the themes version simply bump the version number inside scss/style.scss.