How to modify the theme using a child theme
-
Admin
Child theme allows you to modify the theme without actually modifying the theme’s core codes, so it makes sure that you can safely update the theme whenever there’s a new update without losing your modifications.
I strongly recommend that you use child theme to modify the theme instead of modifying the theme’s files directly.
It’s quite easy to do. Here’s how:
- Create a graphene-child folder in
wp-content/themes/
- Create a new style.css file inside the graphene-child folder
- Copy and paste the following code into the new style.css
/*
Theme Name: Graphene Child
Theme URI: http://example.com/
Description: Child theme for the Graphene theme
Author: Your name here
Author URI: http://example.com/about/
Template: graphene
Version: 1.0
*/
@import url("../graphene/style.css");
/* Your modification goes here */ - You will only need to modify the values of the properties for the elements that you want to modify. There’s no need to copy and paste the entire style.
- Go to your WordPress Appearance > Themes admin page and activate the child theme.
You can learn more about using child theme at the WordPress codex page.
Thanks for posting this.
So I followed these directions, accurately too I believe, but can’t seem to REM out the RSS button on top. I basically copied your RSS code in the original style.css to this child one, and put them between /* and */. The RSS button still shows…
Thanks.
Jason
AdminSo I followed these directions, accurately too I believe, but can’t seem to REM out the RSS button on top. I basically copied your RSS code in the original style.css to this child one, and put them between /* and */. The RSS button still shows…
What you did, essentially, is nothing. When you commented what you copied, you are basically making the codes invisible to the browser, so the codes from the original CSS is still used. CSS’s cascading property allows you to override the styling, not disable them.
Do this instead:
#rss a {
display:none;
}Oh ok, thanks, that helps. This example concerns removing the entire object, but how about in those circumstances when say one just wants a particular line to be disregarded inside of an object? The following is how I would do it in the main style.css without a child. How would this be done with a child theme?
.post-meta p.post-author{
font:normal 11px tahoma;
float:right;
display:block;
line-height:18px;
color:#dfedff;
/*position:relative;*/
AdminIn that case you have to find a value to reset that CSS property.
position:static
, maybe?When I activate my Graphene-Child theme, some of my colors are wrong. The gray-to-black fade is now just solid black in the footer and the RSS/Search bar above the header and the menu bar is a dull light gray. Also, some of the interior gray between main and sidebar is missing. I copied the style.css file ONLY to graphene-child directory and changed only the header as you have instructed.
AdminHi BenGladden,
Do not copy the entire style.css file from the Graphene theme’s folder into the child theme. Create a new style.css file instead, and only add CSS codes for the elements that you want to change.
The main style.css contains reference to background images which do not exist in the child theme folder. Of course, you can copy the entire images folder as well, but this is unnecessary.
The purpose of child theme is to make modifications easier and preserve the changes when there’s an update. Copying the entire style.css file into the child theme defeats both of those purposes.
Thanks for your quick response to my dumb question! Would it be too much for me to ask another? Will you please provide the code necessary to include in my child style.css file that will remove “home” from the menu bar and remove the page title from the top of each of my static pages? Sorry, I don’t know code and your assistance would be most appreciated!
Thanks
Ben
- Create a graphene-child folder in
- You must be logged in to reply to this topic.