Join Morten Rand-Hendriksen for an in-depth discussion in this video Creating a child theme, part of WordPress: Building a One-Page Style Site.
To build a one-page style front page for your WordPress site, you need to make some changes to the active theme on the site. Here you have two options. If you have an existing theme that you either downloaded off the web or built yourself, or someone built for you, you probably want to create a child theme. Now, if you're not familiar with the child theme, the concept is as follows. You have a parent theme that controls what the site looks like. And then you create a child theme that piggybacks off the parent theme. And all the child theme does is make changes to the components you want to change.
So, rather than adding files to or changing the existing files in the parent theme. You're just adding changed files or adding additional files to your child theme. That way your parent theme can keep updating and new features keep coming through the parent theme and you make your changes in a separate child theme. If this is the first time you're hearing of child themes or you haven't worked with them before, or you want a refresher on how to build them, you can go check out the WordPress 3 Building Child Themes course right here in the lynda.com library. This course takes you through the process of setting up and configuring a child theme, and explains the benefits of using this technique rather than editing a theme itself.
If, on the other hand, you're working with a custom theme that you are building for yourself or for a client, and you want a one page style front page in that theme, you could also follow along in this course with an existing theme. So you make all the changes in the theme its self. In most cases you want to do this using a child theme. But like I said, if you're building a theme from scratch, then you can build all these features in. The process is exactly the same. Throughout this course, I'll be using this WordPress site that I have running on my local computer. It's running the Simone theme that you can download from the WordPress theme directory for free.
You can either get it from here. Or you can install it directly from within the WordPress Admin panel. The first step I need to do now is create a child theme off the Simone theme, so that I can make changes in the child theme. I’m going to be working in Adobe Edge Code. But you use any code editor to follow along with this course. What I’ve done here is I’ve opened the folder that contains WordPress on my computer. And here I’m going to navigate to the WP Content folder. And then to the Themes folder, and here you see that I already have the Simone theme installed, and what I need to do is create a new folder for my new child theme.
So I'll right-click on Themes, and click New Folder, and I'll call my child theme Lander, so I'll just say Lander. Then, inside the Lander folder, we're going to create a new file. It's called style.css. This style.css file becomes the style sheet for my child theme. So if I was to make any changes to the styles of the parent theme, I would do it here. To make a child theme, I need to add a tiny bit of code at the very top of style.css in my child theme folder.
The code starts with a comment. And I'll just close it right away, and then inside the code here I'm going to define the name of the theme. Then I'll set up a description. I can add my author information if I want to. I should add a version number. And finally I need to define the template. And the template is the name of the folder that contains the parent theme. So in our case, that would be simone. If you're building a custom, one-page style front page off a different theme, all you have to do is change this entry, simone, with the name of the theme you're using.
So maybe 2014, 2010, or whatever other theme you're using. Now that I've set up this code, WordPress will recognize Lander as a new custom child theme. However, if I activate it, you'll see that the content has no style because we're currently running without a style sheet. So now that I've created my child theme, I need to import the style sheet from the parent theme. And I can do that using the @import function. Here, I'm going to jump out of the Lander folder, and then into the Simone folder, and then load style.css.
Now I've created my child theme, and I've imported the original styles, so I can save my file, go back to my browser, and go to the WordPress toolbar, and select Themes. And here you'll see Lander page for Simone is a new theme that I can activate. And when I now jump to the front page again, you'll see that very few things have changed. It's still the same theme and the content is the same. The only major change is that the menu now shows the default menu which shows each of the pages in alphabetical order. So here I can go back to the WordPress toolbar and select Menus, and then go to Manage Locations, and set the Primary Menu to Main Menu and I'll also set Social Menu to the Social Menu.
Click Save Changes. Jump back again to the front page, and now we have the same menu that we had before, and we have the social menu, and everything else works exactly as it did before. Now we have a child theme, and we can add files to that child theme to change the behavior of our site.
- Creating a foundation for the front page with a child theme, styles, and dummy content
- Using custom queries to display content from different pages
- Adding testimonials
- Adding a custom menu
- Creating a scrolling effect