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-sandboxis the folder name you're cloning to) - Move to the newly created directory and run
npm install - Then run
gulponce to download the latest Wordpress release - Copy
themes/default-skeletonintothemes/your-theme - Edit
themes/your-theme/config.jsonfile as you wish (view more on the Wordpress Codex) - Edit your theme name in the
config.jsonroot file, here it would beyour-theme - You need to have a PHP + MySQL server serving the files in the
publicfolder. Mine would usually run onhttp://local.wordpress.com. Once you have that, you should editserver.proxyin yourconfig.jsonfile. - You're good to go ! Run
gulponce again and go tohttp://localhost:8080to 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.