I build custom Genesis child themes for most of my clients. Rather than starting from an existing StudioPress theme, I use my own starter theme: EA Genesis Child.
What is a starter theme
A starter theme is a base upon which you can build your own custom theme. They usually have minimal styling and contain the features and functionality you use on every site you build.
I recommend you check out StudioPress’ starter theme, Genesis Sample, in addition to mine. After you’ve built a few Genesis sites you’ll likely build your own starter theme structured to your liking.
My starter theme includes
SASS for Styling
Rather than one long stylesheet, my styles are broken into smaller SASS partials for a cleaner organization. I also use variables for key settings (colors, column widths), mixins for helper functions, and dynamically generate styles.
Gutenberg Ready
The theme includes theme support for new Gutenberg features. It also compiles a separate stylesheet so the editor matches the frontend display.
Accessible
Genesis can be made more accessible by enabling the accessibility features.
Template partials for archive pages
See this article for more information.
Login Logo
The site login form displays the client’s logo (example)
Miscellaneous performance improvements
Like minimizing classes on nav menus and posts and removing avatars from comments.
Jamie says
fantastic work mate, using it now to build a client site
i un-commented the feature you added for “child theme setting”
and put some text in for the “left footer and right footer” in the new theme options
but when i hit “save settings” it just clears it instead of saving it…seems to be resetting on save?
i have not modified anything in the child-theme-setting.php file and using genesis 1.8 and latest version of wordpress
hope you can help.
thanks so much
Bill Erickson says
Update the sanitization section to use footer_left and footer_right. Also, in the metabox function update the genesis_get_option() call to include the setting field.
genesis_get_option( 'footer_left', 'child-settings' );I just updated the github repo as well.
Mark says
I noticed you mentioned a shortcodes.php file in your basic child theme files but did not see that file. Has it been removed…or can you include that. I would be curious to see what you have included. Thanks.
Bill Erickson says
I’ve actually moved this to my core functionality plugin. Since the user will be using the shortcodes inside their posts and pages, when they change themes they would lose that functionality if it was packaged in the theme. Putting it in a plugin ensures their content is not theme-dependent.
Andrew says
I’m having a look at you base child theme, and I’m slightly confused.
All the StudioPress themes that I have looked at and studied have the following line as the first line of the child themes functions.php file:
require_once(TEMPLATEPATH.’/lib/init.php’);
However I noticed that your child theme doesn’t have that line of code. Am I missing something, or is it not required for the child theme to function correctly?
Bill Erickson says
While the way StudioPress does it works, it isn’t the WordPress best practice.
In WordPress, the child theme loads before the parent theme. So if you had any functions in your child theme’s functions.php file that depended upon Genesis (most will), it would break. If you remove that require_once line and drop in genesis_register_sidebar(), the site won’t work because that function hasn’t been defined yet. StudioPress added the require_once line to load Genesis before any of the child theme’s functions are loaded.
But you shouldn’t be running any functions directly in the functions.php file. Everything should be hooked somewhere. register_post_type() should be hooked onto init. And any functions that depend on the parent theme being present should be hooked onto after_theme_setup (or a genesis-specific hook: genesis_setup).
So if you look at my theme, you’ll see that everything is inside a function hooked onto genesis_setup, and since I’m using a higher priority (15), it runs AFTER genesis is set up.
To summarize, StudioPress does it that way to minimize support issues. It’s harder to mess up the site using require_once than trying to remember to always hook your functions in the right place. But if you know what you’re doing, you can do it the right way.
Andrew says
So in effect, by running the code the way you do so in your theme, you are effectively doing it the same way that the require is doing, by making sure the parent theme (i.e. Genesis) loads its functions first?
Bill Erickson says
Yes, although technically I’m not doing it “same way”. When you use the require statement, you’re literally loading Genesis before your child theme. When I do it my way, my functions.php file runs first, but I’m telling it to execute the code I wrapped in my child_theme_setup() function after Genesis loads.
Matt Cleaver says
I’m starting to look for a framework to get familiar with and use for a few projects. I did some searching and couldn’t find anywhere you say anything about Bones, but I saw you made a contribution to the Bones for Genesis git. Have any insight?
Bill Erickson says
I haven’t used it to build a website, but I’ve looked through the code and it’s pretty nice.
My personal preference for a base child theme is to be as stripped down as possible so you add in the pieces you need (BE Genesis Child). Bones takes the opposite approach of providing everything you might need (most of it commented out), so you can remove the things you don’t need.
Matt Cleaver says
Great, thanks.
Thomas Bock says
Bill,
I was checking out your base child theme and I noticed the ‘Navigation’ styles in the style.css are the older version of the Genesis ‘sample’ child theme. Is there any particular reason why you are not using the newer ‘Navigation’ styles?
Thanks
Bill Erickson says
There’s no particular reason. I just haven’t gotten around to updating to Genesis’ new CSS file.
Paul says
Bill, thanks so much for your contribution to Genesis in particular. I am using your base theme and i finishing a project and testing on mobile devices (due to launch in 2 days). The layout is ‘off’ meaning i cannot scroll on the page until i zoom out and is causing confusion with the client. I have tried to remove the css media screen settings and nothing changes. Am i missing something to remove this and have it like a standard display website on mobile devices. I know this is a strange request as everything is mobile but it just doesn’t look right. Thanks
Bill Erickson says
If you don’t want to use the mobile aspects:
alex says
How would one add the ability to accept shortcodes in the footer-left and footer-right areas in Child Theme Settings? I’ve put shortcodes in there and they don’t seem to execute.
Bill Erickson says
When you output it, you’ll need to wrap it in do_shortcode(). If you also want it to convert to paragraphs, also wrap it in wpautop(). Example:
echo wpautop( do_shortcode( genesis_get_option( 'footer-left', 'child-settings' ) ) );Alex v. says
Bill, thank YOU! I seriously need to buy you a bottle of your fave brew. Name it. I’ll send it. =)
Here’s what I ended up with, so that I’d still have the Column Classes in place: https://gist.github.com/3918631
Anirudh Bahadur says
Awesome! Thanks…
nithin says
Bill it was great being here, you have a very good blog and very nice you shared your theme 🙂
Richard Buff says
Bill have you worked with the new styling in Genesis 1.9 yet? I dont like the way everything is broken out so that the font size of a certain item might be in the font section, but the sizing styles would be in the layout section. I prefer to have all styles for all physical divisions of a page be grouped in the same place in CSS. For example all “header right” styles would be in the “header-right” section of my stylesheet. From glancing at a few of your CSS files it looks like you do this sometimes as well (I only glanced quickly at a few so I could be assuming wrong). I wonder, if you use the new Genesis stylesheet if you would rearrange it and how?
Bill Erickson says
I haven’t used the new Genesis stylesheet, and have no plans to. I prefer pixels to rems, and already have my stylesheet laid out how I like it (it’s taken a long time to get it right).