Tips for Developing WordPress Themes Using the WordPress Sage Framework

Previous articles on this siteWordPress bootstrap theme framework roots8.0 will be released soon, big version, big leap!I introduced the WordPress theme framework - Sage, and since then have been using this framework to develop WordPress themes, in the process of using summarized some tips, here to share with you.

Install the gulp plugin globally, then link in the theme to the

Sage uses Gulp to build static resources for WordPress themes, and before using it, you need to run thenpm installto install the dependency. Aurora is slow and sometimes the installation doesn't work, try a few more times or try cnpm, once installed, we can use Gulp in this theme. However, need to develop the next theme, install this again? That's the problem.

(of a computer) runnpm installWhen we installed Gulp and its dependent plugins in the WordPress theme'snode_modulesdirectory, the entire installation down, there are more than 100M, if you need to develop multiple themes, each theme should be installed, the speed is very slow, not to mention that each theme relies on the same Gulp plugin, there is no way to install a place, available everywhere?

As we know, Gulp can be installed globally or locally (locally means it is installed in the theme directory), we can install it globally, and then run the npm link gulpLink gulp locally and it's as good as installing it locally. To make it easier to use, I wrote a batch file, and when you create a new theme, just run the batch file without waiting for a long install.

@echo off

call npm link asset-builder
call npm link browser-sync
call npm link del
call npm link gulp
call npm link gulp-autoprefixer
call npm link gulp-changed
call npm link gulp-concat
call npm link gulp-flatten
call npm link gulp-if
call npm link gulp-imagemin
call npm link gulp-jshint
call npm link gulp-less
call npm link gulp-load-plugins
call npm link gulp-minify-css
call npm link gulp-plumber
call npm link gulp-rename
call npm link gulp-rev
call npm link gulp-sass
call npm link gulp-sourcemaps
call npm link gulp-uglify
call npm link imagemin-pngcrush
call npm link jshint-stylish
call npm link lazypipe
call npm link merge-stream
call npm link run-sequence
call npm link traverse
call npm link wiredep
call npm link yargs
call npm link minimist
call npm link gulp-pleeease

@echo link done

Copy the above code and save it as.batThe file is ready.

Combining Sage with other WordPress frameworks

Sage actually did the following for us:

• It's a modification of the theme logic to allow the theme to reuse the code more and better
• Provides a well-developed front-end workflow based on Gulp
• Streamlined and optimized code in some WordPress themes, such as the Relative URL plugin

Development of a relatively simple structure of the theme (such as blogs), the use of this framework is more than appropriate , but the development of some complex structure of the CMS theme , Sage modified theme logic is a bit inappropriate .

In this case, we can extract the front-end tools in Sage, used in other WordPress framework, I use more in the development of the framework is underscores, extraction is also very simple to extract some of the following files into the underscores on it.

• package.json: defines the node js plugin to be installed.
• gulpfile.js: defines gulp's tasks
• bower.json: defines front-end resource dependencies
• assets: theme-defined front-end resources

Sage is a very good WordPress development framework, we suggest you try to use the following, you will find the work much easier. If there are any tips and tricks and problems in the use of the process, please feel free to communicate with me in the comments.