How to modify the theme using a child theme
-
Hi there. Love your theme. I would live to utilize the child theme for future updates. I accidentally created the style.css in the main graphene folder instead of creating a folder called ‘graphene-child’. I have since corrected this (deleted it out of the main graphene folder & created a new folder called graphene-child and but it in there). but now the css seems to be broken? Is there a way I can remedy this? Thanks, your help is appreciated!
Admin
You need to replace back the
style.cssfile in the maingraphenefolder with the original one. It cannot work without that file.Easiest to just reinstall the theme.
I am trying to add posts to a different page other than my home page. but when I follow all the steps above, I can choose which posts are displayed on my home page, but I can’t seem to get the other posts to be displayed on my other page, which I have named ‘blogs’
I would really appreciate some help with this issue Syahir.
I just want to make sure I understand things right since I’m new to the ‘child theme’ concept. To customize the theme:
1. Create a new theme directory within the “wp-content/themes” directory, call it whatever I want (e.g., Graphene-edited).
2. Place the CSS file in there with the stuff you mentioned in the first post.
3. Anything I want to change in the original CSS, add it to the new ‘child’ CSS.
4. If I change the sprite images, call give them a new name (e.g., sprite-master-edited.png) and add the appropriate css calls in the new child CSS file.
5. Activate the child theme.
But I’m still confused on two things: First regarding certain files, such as the “loop.php” file. I moved the location of where the top social sharing icons will be placed. It now looks like this:
<?php /* Post content */ ?>
<!-- SOCIAL SHARING TEST LOCATION START -->
<div id="socialsharing">
<?php /* Social sharing buttons at top of post */ ?>
<?php if (stripos($graphene_settings['addthis_location'], 'top') !== false) {graphene_addthis(get_the_ID());} ?>
</div>
<!-- SOCIAL SHARING TEST LOCATION END -->
<div class="entry-content clearfix">
<?php do_action('graphene_before_post_content'); ?>
<?php if ((is_home() && !$graphene_settings['posts_show_excerpt']) || is_singular() || (!is_singular() && !is_home() && $graphene_settings['archive_full_content'])) : ?>
<!-- SOCIAL SHARING ORIGINAL LOCATION -->
<?php /* The full content */ ?>Do I create a “loop.php” file in the child theme directory in the same place the original one would respectively go?
Second thing I’m confused about: if I update the theme (when updates come), will this impact the child files such as the loop.php file?
Okay, I’m missing something. In the “themes” directory, I created a folder called “graphene-child-byJLR” and put the following files in it:
– loop.php (because I moved where the top social sharing buttons go)
– style.css
– images/sprite_h-JLR.png (changed some of the colors)
– images/sprite_h_light-JLR.png (changed some of the colors)
Here’s what that CSS file has in it:
/*
Theme Name: Graphene Child
Theme URI: http://www.khairul-syahir.com/wordpress-dev/graphene-theme
Description: Child theme for the Graphene theme
Author: John L. Rothra
Author URI: http://www.jrothraministries.com/
Template: Graphene Custom by John L. Rothra
Version: 1.0
*/
@import url("../graphene/style.css");
/* =Non-classed HTML elements
*/
body {
background: url(images/bg-red-gradiant.png) repeat-x #ae0101 fixed;
}
/* =Header
*/
#top-bar {
background: url(images/sprite_h-JLR.png) left -196px repeat-x #313130;
}
/* =Navigation
*/
.menu-bottom-shadow{
background: url(images/sprite_h-JLR.png) left top repeat-x #eee;
}
#header-menu {
background: url(images/sprite_h-JLR.png) left -3px repeat-x #101010;
}
#header-menu > li:hover,
#header-menu > li.current-menu-item,
#header-menu > li.current-menu-ancestor {
background: url(images/sprite_h-JLR.png) left -100px repeat-x #eee;
}
#header-menu ul li {
background: url(images/sprite_h-JLR.png) left -377px repeat-x #dfdfdf;
}
#secondary-menu {
width: 100%;
background: url(images/sprite_h-JLR.png) left -540px repeat-x #222;
}
#secondary-menu > li:hover,
#secondary-menu > li.current-menu-item,
#secondary-menu > li.current-menu-ancestor {
background: url(images/sprite_h-JLR.png) left -614px repeat-x #dfdfdf;
}
#secondary-menu ul li {
background: url(images/sprite_h-JLR.png) left -614px repeat-x #dfdfdf;
}
/* =Content Area
*/
.post-title,
.post-title a,
.post-title a:visited {
font: 24px arial;
}
blockquote p {
color: #1a1a1a !important;
}
/* =Post Formats
*/
.post-format .entry-header{
background: url(images/sprite_h-JLR.png) left -261px repeat-x #598ead;
}
/* =Footer
*/
#footer {
background: url(images/sprite_h-JLR.png) left -952px repeat-x #0a273f;
}
.footer-menu-wrap ul.sub-menu {
border-left: 1px solid #222;
}I only slightly modified the file names for my own easier reference to the original.
** The Problem **
When I refreshed the templates screen in WP to be able to activate the child theme, it is not listed at all, but FileZilla shows that the files are there. I even tried logging out and logging back in. What did I do wrong?
**** EDIT ****
I found the problem, I think. Re-reading the WP page to which you link in the OP, I have the wrong name under “Template.” Oops.
Glad you found it 🙂
I have what might be a really dumb question. I’m now using a child theme (woo-hoo), but had previously modified loop.php. I’ve now copied loop.php to my child-theme directory, so that when the next update arrives my changes won’t be lost.
My dumb question is this: when you release new updates of the theme, do the .php files never change? For example, if your update includes a change to the loop.php, surely I’m not going to see that change because I’m using my own loop.php in my child-theme directory.
Clarification appreciated and, as always, thanks for such a great theme.
Hi Mark,
I’ve written quite a lengthy explanation about files in a child theme here:
But in a nutshell:
1. Yes, changes in the theme’s loop.php file will not be reflected on your site. And those files do change.
2. So don’t use your own loop.php file in a child theme.
3. Use functions.php and action hooks instead.
Hmmm, I have been able to make changes to functions.php in a child theme and get new css to work by putting it in the extra css box in graphene options, but I have not been able to get changes to my style.css to work in a child theme. The following will make my links bold when inserted in the graphene option box but not in the child css. Does the option box handle css differently?
WP 3.2.1 (Networked)
Filename:
public_html/wp-content/themes/graphene-child/style.css/*
Theme Name: Graphene Child
Description: Child theme for the Graphene theme
Author: The Acqumen Group, LLC
Author URI: http: //www.acqumengroup.com
Template: graphene
Version: 0.1.0
*/
@import url("../graphene/style.css");
a,
a:visited {
font-weight:bold
}
a:hover {
font-weight:bold
}Mod
First, your links are bold. Try refreshing your page.
Second, yes, there is a difference with regard to how some features are handled in a child theme vs. custom css. See this post I wrote for a (too short) explanation.
Third, the rules in a stylesheet can overwrite each other. If you have a CSS rule early on in the sheet, and then inadvertently include another CSS rule later which affects the the same selector, the second rule is the one that your site will display. (This is one of the hardest types of errors to find, IMO.)
Ken
- You must be logged in to reply to this topic.
