I am thinking to build my first new Wordpress theme, and I am sure that there are many other developers are having the same plan. I will value the feedback of Envato members who had enough experience to shed more lights about how to start forming your design in the right way, what is the best theme boilerplate, and what should be avoided during the process.
I hope this post will bring benefits to all of the Developers who are taking there first steps toward building an awesome Themes.
When the community succeeds, Envato succeed.
Any positive feedback will be highly appreciated
Thanks
I guess the post was quite sensitive and touches a competitive subject. However, I will try to be proactive and answer my own thread
.
Since my intention was to share knowledge to the community, I will post my research conclusion for the best boilerplate that will help you start building your next dream theme.
There are many theme framework and boilerplate for Wordpress that provide clean, configurable, and efficient templates. And here are few of the very known ones:
It is actually up to the developer preference to land in a most comfortable framework. Nevertheless, what I found the best and would like to share it here is the Sage Framework, it is a very strong configurable theme code base that could deploy themes dynamically with support of Sass and other cool libraries. Sage framework built with high flexibility, scalability and configurability measures in mind. It also worth to mention that Sage works in harmony with Bedrock, the new project structuring standard that have got enormous attention from Wordpress community.
What is good about Sage
Sage uses Node.js based libraries as a building tool that might also work collaboratively in some cases to build and deploy any target web application; but, in our case it is used to gracefully build and deploy Wordpress Themes. Here are the (Node js) libraries that need to be installed to work with Sage:
Gulp: The sweet task runners and stream flow manager. It can be used for basic tasks, such as moving, copying, cleaning, linting, concatenating files, minifying, etc
Bower: Bower is a front-end package manager. You can easily pull in Bootstrap, Modernizr and any other frameworks, libraries, assets, utilities, and rainbows. Bower manages all these things for you.
BrowserSync: A very strong cross-browser testing tool. BrowserSync keeps multiple browsers and devices synchronized while developing, along with injecting updated CSS and JS.
asset-builder: asset-builder is the manifest file format that’s used to collect all assets and put them in order.
wiredep: Finally the sweet wiredep that is used to inject Sass and Less dependencies from Bower into the main theme stylesheet.
After you install Node.js and Node Package Manager (NPM), and then install the above mentioned libraries, you will be ready to dive in and start building you Wordpress theme based on Sage Github initial template.
If you really want to sustain your theme and keep systematically scaling it up, I encourage you to choose Sage or any other custom collective libraries that will help you automate your code builds and deployment. Using Node.js dynamic building scripts will save you a big chunk of time and remove a lot of redundant work.
I hope I brought to your attention something useful.
Here is a more detailed documentation for Sage (Docs)
