A sandbox for Wordpress theme development, using Jade + Stylus.
- Javascript optimization
- Image compression
- i18n native support
- You need NodeJS to use this
- Clone this repository by running
git clone https://github.com/bnetter/wordpress-gulp-jade-stylus.git wordpress-sandbox
(wordpress-sandbox
is the folder name you're cloning to) - Move to the newly created directory and run
npm install
- Then run
gulp
once to download the latest Wordpress release - Copy
themes/default-skeleton
intothemes/your-theme
- Edit
themes/your-theme/config.json
file as you wish (view more on the Wordpress Codex) - Edit your theme name in the
config.json
root file, here it would beyour-theme
- You need to have a PHP + MySQL server serving the files in the
public
folder. Mine would usually run onhttp://local.wordpress.com
. Once you have that, you should editserver.proxy
in yourconfig.json
file. - You're good to go ! Run
gulp
once again and go tohttp://localhost:8080
to get started
You can edit the options by either editing the root config.json
file or using the command line (for example: gulp --production
would set config.production
as true
).
Type: string
Description: The Wordpress theme name you're working on. This should be identical to the theme directory name.
Type: string
Description: The text domain you will use for internationalization. We use theme
as a default, and we put everywhere it's needed.
Type: boolean
Default: true
Description: Whether you're compiling to production or development.
Type: boolean
or object
Description: By default, we use Browser Sync to inject file changes when working on a theme. You can set server
as false
if you don't want to use it.
Type: string
Default: local.wordpress.com
Description: You need to have a running PHP server pointing to the public
directory, and set server.proxy
to the URL.
Type: number
Default: 8080
Description: The port used to live-reload. You can then access the live-reload server at http://localhost:port
.
Type: object
Description: Variables we use in the template.
Type: string
Default: https://wordpress.org/latest.zip
Description: The URL we use to fetch the latest Wordpress release (ZIP).
The Gulpfile automagically generates a POT file from your template files. It also puts the desired text domain everywhere it's needed.
To translate strings, just use the following example:
div= __('Is this translated?', $text_domain);
A POT file will be generated into the languages
folder in the theme. Copy this, rename it as the language you want to translate (for example fr_FR.po
). Then, the file will be compiled into a MO file and will automatically be used depending on your WPLANG
attribute.
Read more about i18n on the Wordpress Codex.