How to add your own Genesis Custom Stylesheet
When I say Genesis Custom Stylesheet, I specifically mean adding your own .css file to your Genesis child theme.As you know, Genesis Framework (theme) is the base or core theme which is needed (installed but not activated) in your WordPress. You then have one of the Genesis Child Themes that is installed AND activated. See Genesis Themes for WordPress for a more detailed explanation between Genesis Framework and Child Theme.
So for this exercise, let’s say that your Genesis child theme is named “GChild” (there is no such child theme; I am just using that as an illustrative example).
Now every Genesis child theme has its own stylesheet. This is generally found at:
You can see this either via:
- your cPanel >> File Manager or
- your FTP software or
- WP-admin >> Appearance >> Editor
Genesis default style.css
For other child themes, where this option is not available, you can get to the default stylesheet (style.css) via:
Click on the default style.css to edit it and add your own css code.
However I don’t like to edit the default style.css file at all if I can help it.
Plus I find it much neater and historically easier to read and remember if I have my own stylesheet in addition to the default stylesheet.
So what I really want is add an additional Genesis Custom Stylesheet.
And I want to have it show up via WP-admin >> Appearance >> Editor so that I can edit my Genesis Custom Stylesheet from right within my WP admin area.
What do you need to have an Additional Genesis Custom Stylesheet?
- create a new stylesheet (.css file) in your Child Theme folder
- need plugin: Genesis Simple Hooks
Create your Genesis Custom Stylesheet (.css)
You can either create it from scratch or copy the default style.css file and then rename and modify it.
Let’s call our Genesis Custom stylesheet style_my.css
Genesis Custom Stylesheet .css
Once you have your style_my.css, then upload it into your Child Theme folder. Following on from above, that would be:
Therefore you now have (at least) two stylesheets in that child theme folder.
Once you have done that, you can check that it is now available via WP-admin >> Appearance >> Editor
So that is the stylesheet that you select to add your own custom styling. And the default child theme’s stylesheet style.css can be left untouched.
That’s great. But how will your posts/pages know to use your new Genesis Custom Stylesheet?
We need to be able to add to the <head> … </head> section, HTML code like:
<link rel= …>
Plugin “Genesis Simple Hooks” – Install and Activate
Find, install and activate the Genesis Simple Hooks plugin (by Nathan Rice & Studio Press).
Once that is activated, to access the plugin, go to WP admin >> Genesis >> Simple Hooks
In the “wp_head” Hook box, enter the following link (to your Genesis custom stylesheet). Remember though that the path should have the name of your Genesis Child Theme and the name of your Genesis custom stylesheet.
Enter link to your Genesis Custom Stylesheet
This now means that every post/page will now link to your Genesis custom stylesheet and your custom styles will apply (override any identical styled elements within the default style.css). Your Genesis custom stylesheet does not replace the default stylesheet, but is in addition to it.
Summary on How to add Genesis Custom Stylesheet
- create your own Genesis custom stylesheet (.css file)
- upload to your Child Theme’s folder
- install & activate plugin “Genesis Simple Hooks”
- add to your custom stylesheet within the wp_head hook.
The above procedure is not the only way to load a Genesis custom style sheet. You can also do it using php and the functions.php file. For that, I refer you to the Reference section at the end of this post.
Reference for those who need more:
- blogbynumber.com – Install a Custom Genesis Child Theme Stylesheet
- briangardner.com – Load Custom Style Sheet
- github.com – Load a custom style sheet on your site using the Genesis Framework
- wordpressphp.net – Load Custom Stylesheet in Genesis
I just used this on a site – very handy info, thanks!
Hi Glenn, glad to hear of your success in using the Genesis Custom Stylesheet 🙂 Sorry it took me so long to get back to you. Big Life transition and all that jazz. Well done and thank you for your comments 🙂