Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
To show you how you can modify a template file to make a change on your site, let's take a look at a practical example. Twenty Twelve has the ability to add a header image at the top of the site. To activate it, you've to go into the Dashboard and under Appearance, you'll find Header. Here you can upload a header image, if you don't have one already, or if you already have one uploaded, you can select it down here under uploaded images. I'm going to select this one that I uploaded previously, and click Save Changes.
Now when I go back to the front page, you'll see we have a header image right here, but the header image appears underneath the main menu and the title of the site. I want the header image to start at the header at the very top. To achieve that, I have to change the header.php file that controls the header, because that's the file that normally controls the header of a WordPress theme. The first thing I'm going to do is go to my Twenty Twelve theme, so the parent theme, and find header.php. I'll copy header.php into my child theme.
So we're now using the child theme version of header.php, instead of the original. And then we can edit header.php in the child theme. I'll open it in my code editor and then I need to find the code that inserts the header image. And I know when you open a WordPress template file for the first time, it can be rather jarring, because it's hard to read. This is HTML and PHP all over the place and there's lots of comments and things going on. But if you just take your time and read what the page says, it's actually quite easy to figure out what's happening here.
If you scroll down, you'll see it says ID masthead, so that's obviously the header. It even says site header here in this class and directly underneath you see a group that has the site-title and site-description, so that's obviously the title and description. Then you have a nav that says site-navigation, so that's obviously the menu, and then below that you have a function that calls get header image. So this is the function that has the header image. So I'm going to copy out that entire function or rather I'll cut it out.
Then I'll paste it in directly above the title and description. I'm going to save the edited header.php file in my child theme, go back and reload the page in my browser, and you'll see that now the header image appears at the top with the title and description underneath and then the menu. This is more the layout I want, but I'm not quite done yet, because now I changed the layout of the page by changing the markup. And you can see that because the styling originally assumed that this header image was on the bottom, there's not enough space here between the header image and the title and description.
So now I have to go on and change my stylesheets to correspond with my new layout in the markup. To do that, I'm going to select the header image and go Inspect element with my browse tools, so that I can see what I'm working with. And here I can see that I don't actually have a specific class or style for the header image. However, the header image has a class called header-image, which means I can now add a new style that addresses header image and give that style a new margin at the bottom.
I'll go to my child theme, open style.css and here I can create a new style, call it header-image. And in this case, I want to give the heard-image a larger margin on the bottom. So I'll say margin-bottom and give it a 24 pixel margin, because I noticed that all these other styles already have a 24 pixel margin. I'll save my new child theme stylesheet, reload my page, and you see that the header image now has more space underneath and the title gets bumped down.
I can take a look at the site step further if I want to, because now I can get rid of the title and description altogether, because I don't need them anymore. I can go in here to Customize, go to Site Title & Tagline and uncheck this Display Header Text. And now you see we only have the header image and then the menu. If I like what I see, click Save & Publish, close it, and now we have changed the look, feel and layout of our theme using only a small change in one template file and by adding a small extra style in our stylesheet.
Get unlimited access to all courses for just $25/month.Become a member
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.