Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,800 courses, including more Web and personalized recommendations.Start Your Free Trial Now
- View Offline
- Picking a parent theme
- Creating and activating a basic WordPress child theme
- Using the developer tools
- Changing the header image size
- Using conditional statements for customized effects
- Adding custom menus to the child theme and/or a template
- Changing the default footer content
- Adding featured images to posts
- Changing the display of meta content (such as date, author, category, etc.)
- Excluding categories from the front page with custom queries
- Including functions from external files
- Identifying and fixing common mistakes
Skill Level Intermediate
When you make a child theme, you start off with a theme that displays all the content without any style. That's because your child theme stylesheet is currently empty. If you're going to build a new layout with completely custom styles this is great because you can start from scratch, but in most cases, you want to import the existing styles from the parent theme and then work based on those styles. There are two ways of doing this and they're used in two very different scenarios, so I'll explain both of them and then I'll show you my recommendation.
The two methods are overwriting versus overriding, and though they sound almost the same, they're very different when you actually do them. What I mean when I say overwriting is this; you go to the parent theme, you copy out all the code from the stylesheet, and you paste all that code into your child theme stylesheet. That way you have full micromanaging control over every little piece of style code in your theme, and you never have a situation where one piece of code overrides another piece of code.
It means that you can ignore anything that's happening in the parent theme, and you can write your own style code, and everything will be fine. That means no surprises, but it also means that if an update comes out for the parent theme, and that update includes new content, that new content will not be styled and you'll have to write styles for it. Overriding on the other hand works completely differently. Rather than copying the styles from the parent stylesheet over into the child stylesheet, you simply reference the parent styles, and then you just add the styles you want to change in your child theme styles.css file.
This means you have control over everything you want to control, and you leave everything else to the parent theme. It also means that any future styles that are included in an update will also be included in your child theme, and it means that in very rare cases some of those future styles may mess with what you've already created. But the most important thing about overriding is that you will always get all the updates and it's a lot less work. So I recommend, unless you're changing everything, you should always use the overriding method.
So let's see how that's done. If I go into my child theme stylesheet through WordPress > wp-content > themes and childoftwentytwelve, I'll open it in my code editor, and here I am going to import the styles from the original stylesheet. That's done with one line of code at import. This is the function, and then I say URL because I need to point to the original stylesheet. I wrap it in a parenthesis and then I have to point to the original stylesheet.
If I look in my themes folder, you'll see the original stylesheet is found under Twenty Twelve and it's down here and it's called style.css. So what I need to do is navigate out of childoftwentytwelve into twentytwelve and then point at the file. So I'll go dot dot, this navigates me one folder back so I am in the themes folder, /twentytwelve which is the parent theme folder, /style.css, and the parenthesis and now I'm going save the stylesheet, go back into the browser, reload the page.
And now you see because I am importing all the styles we now see the page that looks exactly like the Twenty Twelve theme, and if I go in to the source code, go Ctrl+U in Chrome, you can see down here we have the stylesheet and a link to the stylesheet. And if I click on this link which points to the stylesheet under childoftwentytwelve, you'll see that that in turn links directly to the 2012 stylesheet. Understanding this technique of importing the styles from the parent stylesheet into the child theme stylesheet without actually copying it, and then overriding those existing styles is very important when you work with the child themes, because then you only have to focus on changing the things that you want to change on the website and you can leave everything else alone.
This is the whole point of child themes. You make simple changes in a simple way without having to become a theme developer in the process.
Sign up for a Premium Membership to download courses for Internet-free viewing.
Watch offline with your iOS, Android, or desktop app.Start Your Free Trial
After signing up, download the course here or from the iOS/Android App.