generator-wordpress-theme

Yeoman generator for WordPress themes, childs and custom templates

Installation

First, install Yeoman and generator-wordpress-theme using npm (we assume you have pre-installed node.js).

npm install -g yo @wptools/generator-theme

To generate a new project just type the string below, the generator will create the folder for you if not exists:

yo @wptools/theme "My Theme"
yo @wptools/theme:child "My Child Theme"

It will ask few questions then it will setup a new project for your in seconds.

---

Creating a custom template

The generator allows you to generate WordPress themes from custom templates located in ~/.wptools/themes folder, so you don’t have to write a generator by yourself.

• Create the .wptools/themes directory on your profile home mkdir -p ~/.wptools/themes.
• Place your custom theme templates inside that folder to make them accessible in the generator execution.
• When your template is ready you can use it with --template TemplateName or choose it from the prompt question options.

You must create the folder if doesn’t exist and place your themes inside like in this example:

tree ~/.wptools/themes/
├───Simple
└───Advanced

Every theme folder must follow simple rules in order to been generated correctly.

tree ~/.wptools/themes/Simple
└───theme

In this example the Simple theme has only the theme directory where you should put all the theme files like in the default theme that comes with the generator.

Optionally you can also generate more complex projects, that uses build systems, to archive this result you must follow this project directory structure:

tree ~/.wptools/themes/Simple
├───grunt
├───gulp
├───webpack
└───theme

The generator will search for your project manager template files inside the folder named like it, take a look on how the default theme handle multiple setups.

Inside your custom templates you have access to variables during the rendering process, here the list of all the variables used and available right now during rendering:

• projectName: The project name as slug
• projectTitle: The full project title as it appears on WordPress repositories
• projectDescription: A short project description
• projectTemplate: The name of the template that is being used
• projectManager: The name of the selected build system
• projectVersion: The version when the project has started
• projectAuthor: The project author name
• projectLicense: The project license name

And only for the child theme generator, all the above plus:

• parentTemplate: The name of the parent template theme

Simply use it like this: <%= projectName %> inside your files to have it rendered with the value, if you are not familiar with it take a loot at EJS interpolation.

Inside the theme folder you will always put all the themes related files (scripts, templates, assets, …) while in the other folders you should put only the files that are related with your project build system configuration and package dependencies.

---

Development

To develop this package you must clone it with Git and than link it to your global npm modules by typing:

npm link

Than you can start editing the package by following the contribuing guidelines below and than testing with: yo @wptools/theme, if you have any troubles please follow this guide, “Running the generator”.

---

Contributing

1. Create an issue and describe your idea
2. Fork the project (https://github.com/codekraft-studio/generator-wordpress-theme/fork)
3. Create your feature branch (git checkout -b my-new-feature)
4. Commit your changes (git commit -am 'Add some feature')
5. Publish the branch (git push origin my-new-feature)
6. Add some test for your new feature
7. Create a new Pull Request

---

Getting To Know Yeoman

• Yeoman has a heart of gold.
• Yeoman is a person with feelings and opinions, but is very easy to work with.
• Yeoman can be too opinionated at times but is easily convinced not to be.
• Feel free to learn more about Yeoman.

License

Apache-2.0 © codekraft-studio