Genesis Custom Stylesheet – How to Add

How to add your own Genesis Custom Stylesheet

Tip: you can go directly to the Summary steps on how to add 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:

[your WP installation folder]/wp-content/themes/GChild/style.css

You can see this either via:

  • your cPanel >> File Manager or
  • your FTP software or
  • WP-admin >> Appearance >> Editor
Note: not every Genesis Child Theme has an easy way for you to add your own custom css code.
For example, Prose (Genesis Child Theme) does and you can add custom code via
WP-Admin >> Genesis >> Custom Code
Genesis default css stylesheet

Genesis default style.css

 

For other child themes, where this option is not available, you can get to the default stylesheet (style.css) via:

WP-admin >> Appearance >> Editor

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

Sidenote: I won’t go into the specifics of creating your own .css file.  I will assume you already know how to do this.

 

Genesis Custom Stylesheet

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:

[your WP installation folder]/wp-content/themes/GChild/style_my.css

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.

using Genesis Simple Hooks to link to 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.

Tip: you can double check that your Genesis custom stylesheet .css file is called correctly by going to any page/post in a web browser winder and (right click to) view Page Source.  You should find the HTML link rel tag that we have just entered above.

Summary on How to add Genesis Custom Stylesheet

  1. create your own Genesis custom stylesheet (.css file)
  2. upload to your Child Theme’s folder
  3. install & activate plugin “Genesis Simple Hooks”
  4. 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:

 

 

 

Enjoyed this post?

Easily subscribe to keep get all new postings via email. No We Don't Serve Spam - Ever!

We respect your privacy

Comments

  1. I just used this on a site – very handy info, thanks!

    • Helena Asmus Lim says:

      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 🙂

Your Comments? Tips to share?