Be the first to write a review
Building a Child Theme from a Child Theme in WordPress
How to accomplish this small feat, which is very similar to building a child theme from scratch
You already may have child themes down and you've built a few from some WordPress themes. But, have you thought about building a child theme from another child theme? In this article, Linda shows how to accomplish this small feat, which is very similar to building a child theme from scratch.
Graphics for Hybrid News Theme or Any Other Theme
You may have noticed, if you downloaded the Hybrid News theme, that there was another file on that page entitled, "Photoshop Pack." Go ahead and download it, as you'll be fairly surprised at the simplicity here. Basically, Justin replicated the images for Hybrid News as PSD files (PhotoShop) and put them in a file so you can mess around with the colours and to learn the measurements in case you want to create other images that are the same size.
If you are using another theme, all you need to do is find that theme's folder for images and copy it. You already did this when you copied the parent or child theme to another folder to create a child theme. No need to make another copy, as you have the original images in the child theme already. But, if you want to feel extra-safe, go ahead and make a copy of that images folder and set it aside somewhere where you'll know how to find it.
The only issue with that Photshop Pack is that you will need to create a file for those images, as the zip file contains all the images without a folder to contain them. Otherwise, this is a handy-dandy tool to learn how and where everything works in the Hybrid News theme.
I think I've provided enough information for you to begin to play around with a 'child of a child' theme as well as with the graphics for that theme. The only issue left – at least for Hybrid News theme users – is how to alter the CSS...
Hybrid News CSS file – where the heck is it???
If you are confused about which CSS files to play with to alter the look and feel ( meaning, mostly, colour) of the Hybrid News site, don't fret. It's easy to become confused, because – although Hybrid News is beautiful in its functions, it can be complicated to begin to make alterations in a child of that child theme.
The only stylesheet you need to worry about at the moment...especially if you plan to alter images colours, etc., is the same stylesheet you used to change the Hybrid News (or other theme) to your child theme. Open that stylesheet again, and I'll show you how to alter at least one area...
About halfway down the new Hybrid News child stylesheet, you'll see code for the searchbox:
/**
* Search form (in navigation)
************************************************/
#navigation .search {
float: right;
width: 200px;
height: 25px;
}
#navigation input {
float: right;
width: 170px;
height: 15px;
margin: 4px 0 0 0;
padding: 1px 8px 1px 22px;
font: normal normal normal 11px/15px Verdana, Geneva, Tahoma, sans-serif;
color: #aaa;
background: #001328 url(images/search-icon.png) no-repeat 5px 0;
border: 1px solid #011e3f;
}
#navigation .search-submit, #navigation .button {
display: none;
}
/**
That code looks like this on the Web site:
You can barely see the search box, as the type is so small and
the background blends with the background strip that covers the upper part of
the browser window. If the type were darker and the background lighter, the
size of the type would not matter much, as it would be easier to see. I'm going
to alter the CSS to do this (highlighted here for easy viewing and changing):
/**
* Search form (in navigation)
************************************************/
#navigation .search {
float: right;
width: 200px;
height: 25px;
}
#navigation input {
float: right;
width: 170px;
height: 15px;
margin: 4px 0 0 0;
padding: 1px 8px 1px 22px;
font: normal normal normal 11px/15px Verdana, Geneva, Tahoma, sans-serif;
color: #ooo;
background: #fff;
border: 1px solid #011e3f;
}
#navigation .search-submit, #navigation .button {
display: none;
}
/**
Notice that I removed the background image from the background. You'll see that the image had little to do with the result, and by removing it I also removed some download time:
Now you can see the type and you can see the search box. If
you want to keep the magnifying glass image, you'll need to change that image
in Photoshop. If you downloaded that Photoshop pack, you'll find the image of
the magnifying glass in there. Here are the easy steps to alter that image for
the site:
- Open "search-icon.psd" in Photoshop
- Notice that it is in layers. Create a new layer that lies between the magnifying glass graphic and the background layers...make it a white layer, or paint it white.
- Select the layer that contains the graphic image and lower the brightness down to O on the scale (Image > Adjustments > Brightness/Contrast).
- Save that image as a .png file, or save it in the Image folder in your new child folder as that 'search-icon.png.'
- Change the code on your stylesheet to reflect that image (see below) and upload both the image to the image folder and the stylesheet to the 'root' of the content file in that theme folder.
/**
* Search form (in navigation)
************************************************/
#navigation .search {
float: right;
width: 200px;
height: 25px;
}
#navigation input {
float: right;
width: 170px;
height: 15px;
margin: 4px 0 0 0;
padding: 1px 8px 1px 22px;
font: normal normal normal 11px/15px Verdana, Geneva, Tahoma, sans-serif;
color: #ooo;
background: #fff url(images/search-icon.png) no-repeat 5px 0;
border: 1px solid #011e3f;
}
#navigation .search-submit, #navigation .button {
display: none;
}
/**
The search box at the top of the page now should look like this:
Conclusion
I would love to hear from anyone who is creating a child theme from some other theme. I would like to know about your success (or failures) to learn more about how universal this child theme philosophy can go. If it is as easy to change a theme to a child theme...or a child theme to another child theme...as it is with Hybrid, then the doors are open to modify any theme that allows modifications in its copyright.
Next week I'll take you deeper into the graphics in Hybrid. However, the changes I make will help anyone to streamline graphical changes in any other theme as well.
Linda Goin
Linda Goin carries an A.A. in graphic design, a B.F.A. in visual communications with a minor in business and marketing and an M.A. in American History with a minor in the Reformation. While the latter degree doesn't seem to fit with the first two educational experiences, Linda used her 25-year design expertise on archaeological digs and in the study of material culture. Now she uses her education and experiences in social media experiments.
Accolades for her work include fifteen first-place Colorado Press Association awards, numerous fine art and graphic design awards, and interviews about content development with The Wall St. Journal, Chicago Tribune, Psychology Today, and L.A. Times.