WordPress Child Themes Let You Take Control of Your Blog
All WordPress installations should wrap their base theme inside a child theme.
One of the most exciting things about using WordPress is the great selection of themes that are available for it. But no theme is perfect. You will almost certainly want to make changes to the theme’s style. Over time, these changes might be quite extensive. This is all fine as long as your base theme stays the same. But themes need to be updated from time to time. This can be an issue of security, so you should install the theme as soon as an update becomes available. But when you update a theme that you have changed, all your changes will be eliminated.
Don’t let this happen to you.
The way to avoid this problem is by using child themes. These allow you to use the parent theme as a base to add on top of. They allow you to make wholesale changes to the parent theme. This can cause problems if you change the underlying PHP code. These kinds of changes should only be done by more advanced coders. But most WordPress users will only want to change the theme stylesheet. This allows you to change major aspects of theme:
- Fonts
- Colors
- Header image
- Background
- Link behavior
- Sidebar
The reason why this works is because styles override each other. For example, if your base style has defined the h1 tag to use of a serif font, all your child theme needs to do is define the h1 tag to use a sans serif font and that will take precedence. This is a very powerful feature. It means you can start with a parent theme, fine tune the child theme, and then, when the base theme needs updating, do so without having to do anything else. Your WordPress installation will look and act just as it did before.
Even if you think that you want to use the parent theme exactly the way it comes, you aren’t limiting yourself by creating a child theme. And if you ever do decide to make changes, you will be prepared. It’s best to have the option. It could make your life much easier later. And most important: there is no downside to having one.
Setting Up the Child Theme
The one bad thing about child themes is that they do take a little work outside of WordPress to set up. But it isn’t hard. And after it is set up, you can make all your changes from inside WordPress.
For this example, we’re going to use the Twenty Sixteen theme. Its name on the system is twentysixteen. If you are using a different theme for a parent, you can find out what its name is by clicking the “Live Preview” for the theme. When it is displayed, the address bar will show the name. For example, with Twenty Sixteen, the address bar contains, “theme=twentysixteen.”
On your local machine, use a text editor to create a file named style.css. Inside, add the following text and save:
/*
Theme Name: Twenty Sixteen Child
Description: Child theme for Twenty Sixteen
Author: Frank Moraes
Version: 1.0
Template: twentysixteen
*/
@import url('https://cybernewsguide.com/files/twentysixteen/style.css');
The stuff at the top of the file tells WordPress about this theme. The last line tells the style file to import all the styles from the base theme. This will allow you to later add styles below it that will override anything set in the base theme.
If you are using a different parent theme, there are two things you need to change. First, you have to change the line, “@import url(https://cybernewsguide.com/files/blog/how-to/‘https://cybernewsguide.com/files/twentysixteen/style.css’);” and second, you have to change the line, “Template: twentysixteen.” In both cases, you would replace the them name “twentysixteen” to whatever the name is of your parent.
Once the file is created, you need to use an FTP client. Log in to your server and then go to the where you have WordPress installed. Normally, this will be in the root directory, but it is often in a sub-directory like blog or wp. Now go into wp-content/themes. Create a new directory for your child theme. We will create the directory twentysixteen-child. Go into that directory and upload the style.css file you created before.
And you are done with the hard part of the procedure!
Updating Your Child Theme
Once your base child theme is set up, you need to activate it. Go into Appearance in the WordPress dashboard and select Themes. Find your child theme (in our example, twentysixteen-child) and click the “Activate” button. Since you haven’t made any changes to the child theme, your WordPress installation should look exactly the same way it did before.
Now you can make any changes that you want to your child theme. You do this by selecting Appearance and then selecting Editor. There will only be one file to edit: style.css. You may eventual add other files to the child theme, but that is more advanced and goes beyond the scope of this article. Add whatever style definitions you want to the style.css file. Just make sure you add them at the bottom of the film — below the @import line.
We’ve provided a few useful classes to get you started:
/*
Theme Name: Twenty Sixteen Child
Description: Child theme for Twenty Sixteen
Author: Frank Moraes
Version: 1.0
Template: twentysixteen
*/
@import url('https://cybernewsguide.com/files/twentysixteen/style.css');
/* A simple box for placing quoted material in */
div.box {
padding: 10pt;
margin: 0px;
margin-bottom: 10px;
background: #ddd;
border: 1px solid black;
}
/* Places a left aligned image with text flowing around it. */
img.left {
float: left;
margin-right: 10px;
margin-bottom: 10px;
border: 0px;
}
/* Places a right aligned image with text flowing around it. */
img.right {
float: right;
margin-left: 10px;
margin-bottom: 10px;
border: 0px;
}
/* Left and right pull quotes */
div.pquoter, div.pquotel {
width: 12em;
color: #385D6F;
font-size: 1.3em;
font-style: italic;
padding: 0.5em;
margin: 0;
margin-bottom: 0.5em;
border: 1px solid #C43D20;
}
div.pquoter
{
float: right;
margin-left: 1em;
}
div.pquotel
{
float: left;
margin-right: 1em;
}
This is just the beginning of what you can do. If you want, you can study the style.css file for the parent theme and see how it organizes the whole page. Depending upon the theme, you can move the sidebar or change its size. You can put in a different background image. With a child theme, you have enormous power even while being protected by an established theme. So what are you waiting for? You should be using child themes. They open up a world of possibilities that we’ve only hinted at here.
Twenty Sixteen screenshot licensed under fair use.
Man Coding by Alejandro Escamilla. Licensed under public domain.
Dad Child Beach Sea by clarkevincent0. Licensed under public domain.
