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.
The first step in building a WordPress child theme is to create the core of the child theme itself. To make a child theme from any parent theme, all you need to do is create a new folder under the themes folder, give that folder the name of the child theme, add a style.css file to that child theme folder, and add some core code information at the very top of that stylesheet. This will help WordPress identify this child theme as a child theme and add it in under this admin panel under Appearance and Themes, so you can activate it. So let's see how that's done.
On my computer, I installed WordPress under Library--so I can find it right here, and here you see all the files that constitute WordPress. The themes are found under wp-content and themes. The first step in creating a child theme is to create a new folder. So I'll create a new folder and call it childoftwentytwelve. You can call it whatever you want. This is just the name I'm giving this child theme. The next step is to create a style sheet that goes inside my new child themes folder.
For that, I'm going to use my code editor, so I'll go to Notepad++ and I'll just save this open file, so I'll go to Save As and navigate to my childoftwentytwelve folder, and here I create a new file called style.css, I'll make sure it's stylesheet file, here Cascade Style Sheets. And now I need to add the necessary code to help WordPress recognize this as a child theme and associate it with the parent theme.
That code is wrapped inside a comment, so I'll start with the comment and I'll just end the comment so I don't forget later, and now I need to add the parameters necessary to identify this as a child theme. It starts with theme name, Child of Twenty Twelve and again, this name can be anything you want. I just like to call it Child of Twenty Twelve. You can call it bob if that's what you want. From here, I can add a theme URI if I want to, by saying theme URI, and then add a URL that points directly to where the theme lives, but I am not going to do that right now. Instead I am going to add a description, then I'll say Cool child theme based on Twenty Twelve.
Here you should add a proper description that actually explains what this theme does and what kind of feature it includes. Then you should add the author information, so I'll put in my own name, and you should add a version number so that you can see what version you're currently working with, and other people can see it as well. I like to have the numbering structure 0.0.1, but you can choose any number structure you want. This is just so that you can see what version you're working with, and then finally and most importantly, you have to associate this child theme with the parent theme.
The way you do that is you type in Template and then you type in the name of the folder that contains the parent theme. If I go back to my themes folder, you'll see the Twenty Twelve theme. It's called twentytwelve with no spaces. So if I type in twentytwelve here the child theme will now associate with the parent theme. I save the style.css file and because I'm working inside my local installation of WordPress I don't have to do anything else. I don't have to upload this folder to a server to activate it. It'll automatically pop up.
So now, when I go back to WordPress, and as you can see right now, we have Twenty Twelve, Twenty Eleven and Twenty Ten, but when I reload the Themes page we now have the child theme here as well, Child of Twenty Twelve right here, and if I click on it, I can activate it and now you see that we've activated our new Child of Twenty Twelve theme. You can see the description here, you see what version it is, and you see that here is the author information, and if I go to the front page you see the theme is now active.
Now you'll also notice this looks terrible and that's because my child theme currently has no stylesheet, so what you're seeing is only the content on the page with no style. That's the next step to add style back into the child theme.
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.