Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
Create a child theme based on an existing parent theme in WordPress and change the functionality, presentation, or styling of your website. In this course, author Morten Rand-Hendriksen shows how to use the default WordPress theme, Twenty Twelve, as a basis for a new child theme and add custom menus; new headers, sidebars, and footers; and index pages with widgets and pagination to your site. The course also demonstrates how to add a responsive welcome message to your front page using PHP and jQuery, and how to edit the many templates found in a WordPress theme. Morten explains how to perform these changes using any code editor, the developer tools in the Chrome browser, and WordPress.
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.
Find answers to the most frequently asked questions about WordPress 3: Building Child Themes.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.