How to use Child themes with my Blank Theme

Child themes at first seem like they are just a bunch of work and aren’t really needed. Child themes allow you to build a new theme based on a parent. If the parent get’s new functionality, the children also automatically get the same functionality without typically breaking anything.

What are the requirements with Child themes? Well… Honestly there isn’t a whole lot. The only 3 things that are required:

1. The child theme folder must be named a certain way
2. You need to include at least one file in that folder namely style.css
3. You need to make the header of the style.css mention that it’s a child theme

I am going to assume that the theme folder has been kept the same. ie.  ( .\wp-content\themes\blank )

You will need to create a new folder called (.\wp-content\themes\blank-child ). Inside this folder you will need to place a file called style.css. To make things easy as possible just copy the style.css from the parent theme BLANK.

Here’s what the style.css theme looks like from the download (Click image to enlarge it):

Here’s what the style.css file will look like in the child theme (Click image to enlarge it):

Notice I need to change the theme name in the child style.css. I also need to tell it to use “Blank” template. I do this on line 7 of the child blank theme.

Now that I am done making those changes let’s do something REALLY crazy and change the menu color from black to red.  Search for “#horz-dropdown-menu” and change the css color to “red” like so (Click image to enlarge it):

Now activate the child them from the theme section in WordPress.

Everything is identical EXCEPT that the menu is now red. As you can see this can be VERY powerful. You can change the way a template looks without worrying about loosing functionality.

Please note! – The child theme style.css COMPLETELY overwrites the parent style.css

Ok. Let’s try another example of how you can use Child themes to extend the original theme. This time we are going to make a slight change the included google analytics code. This is one example that will most likely want to do right off the hop if you are making a child theme. Right now it’s very easy to predict how the google analytics code will look. But say in the future I update the code and you apply the update to your server. Essentially it would over write the current functions.php file and your manual configurations with it. As you can probably imaging that this would not be a good outcome. So how do we deal with this?

I ripped this next section off the WordPress website:

• Unlike style.css, the functions.php of a child theme does not override its counterpart from the parent. Instead, it is loaded in addition to the parent’s functions.php. (Specifically, it is loaded right before the parent’s file.)
• In that way, the functions.php of a child theme provides a smart, trouble-free method of modifying the functionality of a parent theme. Say that you want to add a PHP function to your theme. The fastest way would be to open its functions.php file and put the function there. But that’s not smart: The next time your theme is updated, your function will disappear. But there is an alternative way which is the smart way: you can create a child theme, add a functions.php file in it, and add your function to that file. The function will do the exact same job from there too, with the advantage that it will not be affected by future updates of the parent theme.
• The structure of functions.php is simple: An opening PHP tag at the top, a closing PHP tag at the bottom, and, between them, your bits of PHP. In it you can put as many or as few functions as you wish. The example below shows an elementary functions.php file that does one simple thing: Adds a favicon link to the head element of HTML pages.

Here’s an example of a the child theme functions.php file. When put into the child theme folder all parent functions can still be accessed but add_googleanalytics will now be over written with whatever you decide to change or add in this file. (Click image to enlarge it)