Iemoto

This is a WordPress Starter Theme based on _s and integrated with grunt.

Iemoto follows all the fixes and feature upgrades of _s

Automate theme development process with it!

How to install

install grunt-init

If you’ve never used any grunt-init templates follow below to install grunt-init.

npm install -g grunt-init

Next, create ~/.grunt-init directory.

mkdir ~/.grunt-init

Install Iemoto

Get this templates via git.

git clone git@github.com:megumiteam/iemoto.git ~/.grunt-init/iemoto

Or if you prefer https, try this.

git clone https://github.com/megumiteam/iemoto.git ~/.grunt-init/iemoto

Sass(Compass)

Iemoto utilizes Sass and Compass to create style.css and editor-style.css.
Get them first.

Sass: http://sass-lang.com/
Compass: http://compass-style.org/

gulp

You can also use gulp.js for js/sass compiling if installed.

$ npm install --global gulp

gulp.js: http://gulpjs.com/

Usage

Create your theme directory in wp-content/themes.

mkdir wp-content/themes/my-theme

Cd to your theme directory run grunt-init iemoto to create theme files.

grunt-init iemoto

By commanding above, you will be asked for some inputs such as Theme Name, Description, license and so on.

$ grunt-init iemoto
Running "init:iemoto" (init) task
This task will create one or more files in the current directory, based on the
environment and the answers to a few questions. Note that answering "?" to any
question will show question-specific help and answering "none" to most questions
will leave its value blank.
Please answer the following:
[?] Project title (Iemoto) 
[?] PHP function prefix (alpha and underscore characters only) (iemoto) 
[?] Description (This is a awesome cool plugin.) 
[?] Project homepage (https://digitalcube.jp/) 
[?] Author name (Digitalcube Co,.Ltd) 
[?] Author url (https://digitalcube.jp/) 
[?] Use gulp? (y/N) 
[?] Do you need to make any changes to the above before continuing? (y/N)

At the end of this procedure, you will be asked if there are any changes. Type N or enter key to create the templates.

When asked [?] Use gulp? (y/N), type y to create files you need for gulp. It’s N by default.

Then, command npm install to download files needed for grunt (or gulp) command.

npm install

Files to be installed are defined in package.json file.

Once you are done to this point, you can see all the files created as below.

├── 404.php
├── archive.php
├── comments.php
├── footer.php
├── functions.php
├── Gruntfile.js (or gulpfile.js )
├── header.php
├── inc
│   ├── custom-header.php
│   ├── customizer.php
│   ├── jetpack.php
│   ├── template-functions.php
│   └── template-tags.php
├── index.php
├── js
│   ├── <themename>.js
│   ├── customizer.js
│   ├── navigation.js
│   └── skip-link-focus-fix.js
├── languages
│   ├── <themename>.pot
│   ├── ja.mo
│   ├── ja.po
│   └── readme.txt
├── node_modules
├── package.json
├── page.php
├── README.md
├── readme.txt
├── rtl.css
├── sass
│   ├── _normalize.scss
│   ├── editor-style.scss
│   ├── style.scss
│   ├── elements
│   │   ├── _elements.scss
│   │   ├── _lists.scss
│   │   └── _tables.scss
│   ├── forms
│   │   ├── _buttons.scss
│   │   ├── _fields.scss
│   │   └── _forms.scss
│   ├── layout
│   │   ├── _content-sidebar.scss
│   │   └── _sidebar-content.scss
│   ├── media
│   │   ├── _captions.scss
│   │   ├── _galleries.scss
│   │   └── _media.scss
│   ├── mixins
│   │   └── _mixins-master.scss
│   ├── modules
│   │   ├── _accessibility.scss
│   │   ├── _alignments.scss
│   │   ├── _clearings.scss
│   │   └── _infinite-scroll.scss
│   ├── navigation
│   │   ├── _links.scss
│   │   ├── _menus.scss
│   │   └── _navigation.scss
│   ├── site
│   │   ├── _site.scss
│   │   ├── primary
│   │   │   ├── _comments.scss
│   │   │   └── _posts-and-pages.scss
│   │   └── secondary
│   │   │   └── _widgets.scss
│   ├── typography
│   │   ├── _copy.scss
│   │   ├── _headings.scss
│   │   └── _typography.scss
│   └── variables-site
│        ├── _colors.scss
│        ├── _structure.scss
│        ├── _typography.scss
│        └── _variables-site.scss
├── screenshot.png
├── search.php
├── sidebar.php
├── single.php
├── style.css
└── template-parts
      ├── content-none.php
      ├── content-page.php
      ├── content-search.php
      └── content.php

Create you own theme now.

Default values

You can set default values to the grunt-init prompt.

It will be more useful if there is a name and URL.

To set default values, put defaults.json and edit it.

cp ~/.grunt-init/iemoto/defaults.json.sample ~/.grunt-init/defaults.json

About compiling SASS and verifying JavaScript code with grunt

When you’ve edited .js and .scss, command this.

grunt

About compiling SASS and verifying JavaScript code with gulp

When you’ve edited .js and .scss, command this.

gulp

You can gulp js or gulp compass to specify just js or Sass(Compass).

watch

If you utilize grunt watch or gulp watch, grunt(gulp) will watch the file editing and automatically compile and validate them.

grunt watch
// or
gulp watch

To stop watch, type [control]+[c]

Version of javascripts and styles

Iemoto adds versions to js and css which is specified in package.json as

"version": "0.1.0",

When grunt(gulp)ed, the version specified in package.json will be implemented in style.css and .js as comments, and also will be passed to wp_enqueue_style() and wp_enqueue_script().

Debug mode and Sourcemap

If WP_DEBUG is true, theme will load css/style.css, which has Sourcemap integrated, instead of style.css, which is the Sourcemap-ommited version of the css/style.css.

Sourcemap is available if your Sass version is greater than 3.3.0.

svn:ignore node_modules directory

Feedbacks

Feedbacks are very much welcome!

https://github.com/megumiteam/iemoto/issues

Contributors

https://github.com/megumiteam/iemoto/graphs/contributors