Yesterday I was reading through some of the posts in the Genesis WordPress Facebook group when I stumbled upon a thread where quite a few Genesis users were discussing the best way to create a SASS, and even Gulp ready, version of the Genesis Sample Theme. Some suggested solutions, but then clarified that these were outdated and therefore not really useful at this point in time. Also mentioned was the fact that even once you get a Sassified Sample stylesheet you are then confronted with the sometimes difficult feat of figuring out how to compile the SCSS code. It was like they were describing all that makes our Themer Pro Plugin awesome, but without realizing that it existed. I couldn’t help but chime in! 🙂
So what is Themer Pro, anyway? Well, at its core it is a WordPress Plugin that allows you to create custom child themes for the currently supported 6 WordPress Theme frameworks, including Genesis, as well as the 3 latest WordPress default themes. (See the full list of supported Themer Pro themes here.) But Themer Pro is much more than a Child Theme Export tool. Once created and activated you will find that Themer Pro provides you with a full blown file editor for your Child Theme files, as well as front-end DEV tools for real-time CSS editing, and even the ability to comple SCSS (SASS) code on the fly, with no extra work on your part. And THAT is what I want to talk about in this blog post.
Creating A Custom Sassified Genesis Sample Theme
When creating custom Genesis Child Themes using Themer Pro you simply fill out some fields and click a button to create the theme. But you will also find a drop-down menu that allows you to choose from a stock Sample Theme, a SASS version, a Gulp version, and even a clone of the active Child Theme.
If you choose the stock version then you will get an exact copy of the latest Genesis Sample Theme, but with all of the filled out form fields applied. This means version numbers, links, names, etc… all changed in your theme files to provide you with a totally unique version of that Sample Theme for you latest project. But if you choose either SASS or Gulp you will get not only a unique version based on the filled out fields, but your stylesheet will be converted into a set of SCSS files that provide you with the foundation for next-level Genesis development.
Compiling Your SCSS Code The Easy Way!
I remember when I first started playing with more dynamic CSS solutions like LESS and SASS. Yeah, I remember it was a pain my you know what! Having to install and configure various libraries and packages on my server just to even make it possible to try and get it working, let alone making me more productive. These days there are various solutions that do help with this process, but it’s hard to find a kind of all-in-one solution that leaves the thinking to the code and the doing to the user. And Themer Pro does the thinking for you when it comes to compiling your SCSS code, leaving you to enjoy the really fun part, and that’s the actual design and customization.
So with Themer Pro, once you’ve created and activated your Custom Genesis Child Theme, you can just pop right into the Themer Pro Child Editor and start tweaking away at your SCSS code. Themer Pro will ensure that with each save your code will compile like it should. It’s that easy!
See Themer Pro in action below:
What About The Gulp Version?
With the Gulp version of the Genesis Sample Theme you not only get the Sassified stylesheet, but you get a few other files (including a gulp file) that provide the foundation for using things like Webpack, NPM, Gulp, Babel, etc… to develop Genesis powered websites. Of course this requires some learning on your part, ensuring that you have at least a basic understanding of how these package managers, task runners, and code compilers function and what their various purposes are, but the basic foundation is laid for setting up your ultimate Genesis DEV server.
Here’s a screencast that shows you how to setup such a DEV environment:
Additional Genesis DEV Tools That I Highly Recommend
The two main ones that I want to mention are Genesis DevKit and Instant IDE. DevKit is similar to Themer Pro in that it allows you to easily create Custom Genesis Child Themes based off the latest Genesis Sample Theme, but instead of going to the code editor rout for customization it provides you with hundreds of point-n-click design controls to get the job done. So if coding really isn’t your thing then Genesis DevKit is definitely the way to go! And Instant IDE would be the opposite, embracing custom coding to the fullest degree and providing the most powerful and feature-rich pure DEV environment for WordPress, and that’s not an exaggeration! Also note that Instant IDE also include the same auto-compiling feature for SCSS code that is found in Themer Pro.
So if your are one appreciates the power and reliability of the Genesis Framework and are looking for the best DEV tools to help you work more efficiently and get the job done then Themer Pro, Genesis DevKit, and Instant IDE are definitely work a look! And just a heads-up, we offer these three Premium WordPress Plugins in our Genesis DEV Pack bundle to provide an even greater value!
Follow & Share:
