Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
To start this project we'll create a child theme to work in. Using a child theme ensures that whatever we do won't impact or break the core theme and also gives us a clean slate to work with. Using a child theme you can create a completely customized look and feel for your WordPress website. Under lynda.com library you'll find Themes, my course WordPress 3: Building Child which shows you how to build advanced child themes and customize them to look the way you want. In this course I'm going to build a child theme using the stock 2011 theme as the parent.
However, if you've already completed the WordPress 3: Building Child Themes course you can use your own child theme instead or you can use any other theme for that matter. All the code examples in this course are ubiquitous and will work in any theme. The only thing that changes is where and in what files you place the code snippets. So like I said we're going to start off by creating a child theme. The first thing we need to do is create a new folder for the child theme. So I'll go into my code editor, navigate to wp-content and themes, and then create a new folder under this.
I'll call that folder cooking and click to open it. Inside the Cooking file I now have to create a file that called style.css. This is the file that tells WordPress that in here there is a child theme. So I'll just call it style.css and take out the default code here and in here I'm going to put in the definition of the new child theme. Now to make it easy for you I put all the code snippets in the code snippets file you're going to find in your exercise files.
So let's go to the exercise files and open the code-snippets file, and here at the very top you'll find the code necessary to create a child theme. Now first let's just grab this commented out code here that starts with /*, so I'll copy this and paste it into the beginning of my style.css file. If you look briefly at this you'll see this defines the theme name, Culinary Artistry, and then it sets a Theme URI. This is where you would put the URL for your site for example.
It has a description, information about who you are, and version, and the line that really matters here is this one, Template. The Template line tells WordPress what the parent theme is. So right now it says twentyeleven. If you wanted to point to twentyten instead you'd just say twentyten, and this word here points to the name of the folder that contains the parent theme. So if you use another theme that's not on my list you just put in the name of the folder and WordPress will automatically assume that that's the parent theme.
If I now save this style.css file and go to WordPress admin and login and then I'll go to Appearance > Themes, then you see by default 2011 is activated and down here we now have a new theme, Culinary Artistry version 0.0.1, and I can activate this. And when I now go to the front page and reload it, you'll see we have the same site but it has no styles.
This is because we created a new style sheet for our theme and that style sheet contains nothing, as you can see right here. Now rather than copying over all the styles from the 2011 theme we're just going to import them into this file dynamically. So if you go back to your code snippets file, you'll see at the very top here we have this line that says import url and then points to /twentyeleven/styl.css. If you copy that, go back into your style.css file in the Cooking folder and paste it in at the very top.
What we're doing is we're telling the browser to import the style sheet at this URL, which is the style sheet inside of 2011 folder, as if it was content in this file. So when we save it and reload the front page, we now have a site that looks exactly the same as the old site except we're now running the child theme. Now before I move further I'm going to do some quick customizations of this site using the Theme functions within 2011. So I'll go back to Appearance and first I'll change the header image.
So I'll go to Header and Choose File. I'll navigate to my exercise files, and under Assets you'll find this chefHeader image. If you don't have the chefHeader image you can just upload any image. As long as it's 1000x288 pixels it will fit exactly; if not, WordPress will help you to crop it. When you click Upload, my new image is uploaded and I can save changes, reload the page, and we now have the header we want.
The next thing I want to do is get rid of this extra text at the top here because we already have the text inside this image itself. So I'll go back to Header, go down to the bottom where it says Display Text. I'll say No, save it, reload the page. Now we have no text. And the final thing I'm going to do is change the layout so we have a one-column layout instead of a two-column layout. So I'll go back, select Theme Options under Appearance, and then change Default Layout to One-column, no sidebar.
Save changes, reload, and we now have a completely different look to our site using a child theme and the theme options in 2011. When adding new functionality to a WordPress theme it's always a good idea to do this in a child theme rather than working in the original. That way if you make a mistake or something doesn't work quite right, you can just delete it and start over without damage being done to the original. And again, if you want to dive further into the world of child themes check out the WordPress 3: Building Child Themes course and then come back here.
But for now we're going to work with this new child theme we just created and move forward.
Get unlimited access to all courses for just $25/month.Become a member
119 Video lessons · 50918 Viewers
117 Video lessons · 38640 Viewers
113 Video lessons · 81562 Viewers
65 Video lessons · 11572 Viewers
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.
Your file was successfully uploaded.