Update 2014.08.19:

I originally posted this on my personal blog, and the information it contains pertains to that blog, not this one. However, I will keep this post up here, with a link to the child theme directory on my original blog. Please note that I no longer use that child theme, but you are still free to peruse the files to learn from them what you can.

Earlier, I posted the custom CSS that I use on this blog, with the idea that others might want to see how I accomplished certain tasks. In that post, I noted that my custom CSS (which is the vast majority of the changes I have made) was getting so extensive that it was getting time for a child theme. That time has come.

This will become a tutorial in time, but for now, you can find out about creating child themes from the WordPress Codex. For specific information about creating a child theme from the Graphene theme, you can view this page from the Graphene Theme Documentation Wiki, or you can read and participate in this topic in the Graphene theme support forum.

To view the files I used to style this theme, you can view my child theme directory. Feel free to download those files and do whatever you want with them. Unlike my original posting, I tried to cleanup the style.css file and organize it the way it is organized in the Graphene theme.

Some Notes:
  1. I will undoubtedly continue to make changes to this theme, which you can view anytime by following the directory link above.
  2. For WordPress, your stylesheet must be named style.css. I had originally called it styles.css (note the extra ‘s’), which caused the child theme not to load. This drove me crazy for about four hours until I figured out my mistake.
  3. When I used custom CSS to style this blog, I had made changes to the navigation areas above and below the header image, which then failed to show when I added these items to my child theme’s stylesheet. After reading this page on the codex, I realized that something similar was happening with the Graphene theme. I went to Graphene Options >> Display >> Header Display Options and unticked the box marked “Use light-coloured header bars”. Problem solved.
  4. To see how I created the background, see this post.
  5. I tried to change the color of the site title (the “…in some weird postmodern way…” you see pasted over the header image) using my child theme’s stylesheet, but this is actually a WordPress function controlled in the Appearance >> Header pane of the Dashboard. Once I switched themes (which is what you are doing when you use a child theme) I had to change this back to my original setting.

There is still some tweaking to be done, especially in the navigation menus.

Except for material released under a Creative Commons License: ©2021 Kenneth John Odle All Rights ReservedPermalink for this article: