The Genesis Starter 2.3.0 offers a slew of new features including Theme Logo support, inline navigation menu, CSS Grid support for structural elements, mobile first CSS and more.
While all the features are interesting, the addition of CSS Grid is particularly important to your development process as it can simplify grid layout design. While Genesis Sample theme by StudioPress still uses Genesis Column Classes, Sridhar’s Genesis Starter Theme uses CSS Grid support for structural elements.
I’ve tried out the brand-new starter theme on a couple of projects, and I’m pretty excited about how it helps the development process.
Since the Genesis Sample theme by StudioPress is used predominantly, it’s natural that you will come across many plugins developed around it. If you’re interested to know, I’ve briefly reviewed most of the Genesis plugins out there. Genesis Sample theme by StudioPress also includes default widgets such as Genesis – Featured Page and Genesis – Featured Posts.
While these widgets work fine with Genesis Sample theme out of the box, you will experience some compatible issues using theme with Genesis Starter Theme by Sridhar.
The reason is simple – these widgets use Genesis Column classes which have been removed from Genesis Starter Theme.
In fact, if you’re using any plugins that are rely on Genesis Column Classes to arrange items in columns, you may run into compatibility problems with Genesis Starter Theme.
Fixing the Compatibility Issues
Sridhar recommends that you should those plugins should upgraded to be compatible with CSS Grid. While you can’t rely ask a free plugin developer to make it so, the next option left for you to try and make your existing plugins fall in line with help of the following hack:
You simply set the parent of items as grid, set your gap and specify the number of columns.
Thanks to Sridhar who offered the following code which makes both ‘Genesis – Featured Posts‘ and ‘Featured Custom Post Types for Genesis‘ plugins compatible with his Genesis Starter Theme.
If you’re using his latest theme which comes highly recommended owing to its CSS Grid support for structural elements, add the following code your default stylesheet or eternal stylesheet.
Note: You can choose to customize the css code whichever you want as per your design requirements.