Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
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.
Child themes aren't just used for making large changes that are very impactful on the whole site. They're also used to make small adjustments to existing styles within a page to make things look a certain way. A very common question raised when people start using WordPress is how they can get more space between paragraphs and make that space consistent. This question actually stems from misunderstanding of how space is created in a document; a misunderstanding caused by how we use word processing applications. If you think about it, if you were in a word processing application like Microsoft Word, and you wanted to make more space between two paragraphs, you'd probably just go in and hit Return a bunch of times to add more space, but did you ever think about what happens when you do that.
If you click on this weird backwards P thing in Microsoft Word, you can see the code behind this page and you see that every time you hit the Return button you're actually adding this paragraph. This technique works well when you work in word processing application, because generally the documents you write there are going to get print it out on paper, so any empty space is just empty space. However, if you do the same thing on the web what you're doing is adding code into your documents that contains nothing; you're just saying empty space, empty space, empty space.
That's not good for the web. Instead what you should do is change the margins around each paragraph to change the height. So if I want to change the space underneath each of the paragraphs what I need to do is make a small change to the style that affects the paragraphs. So I'll right-click on a paragraph, it's down here, and you see that this paragraph has a bottom margin of 1.714, et cetera. What I need to do is make a change to this to make the margin bigger, so I'll again going in and copy out the style just like I did before, go into my stylesheet, paste in the style as it is and now I'm only going to make changes to the bottom margin of each of the paragraphs. You see here it's actually listed twice.
The first line sets the pixel values for the margin. The second line sets a rem value for the margin. The reason why you have both is because not all browsers support the rem value, and for those browsers, the pixel value will kick in instead. What I want to do is I want to change the bottom margin to twice of what it is now, so I'm going to go in here and change 24 to 48, because that's double of 24, and then I'm going to change this long number here to the double, which is 3.428571428.
I'm not making any changes to the line height, and because I'm not making any changes, I don't need to repeat myself, so I'm simply going to take that out. What happens when I take it out? Well, the original style in the parent stylesheet will just kick instead, so we'll still get the same style and I don't have to repeat it. When I save the stylesheet, go back to my browser, you'll see this is before, space here, I'll reload the page and now you see the space is bigger. If we go into the stylesheet again, I'll right- click, Inspect element, and here you see our styles.
We now have 48 pixels or 3.42, and if I scroll down you'll see here are the original styles with the original style struck out, and you'll see what happens when I simply ignore a style here. So you remember I deleted the last style, because I said that wasn't going to change it, well it kicks in down here in the original style. So that way I'm only including stuff I am changing in my child theme and leaving the rest up to the parent theme. Modifying or adding styles isn't just about adding lines and making large changes to the layout. It's also about creating better presentation styles.
Making changes to paragraph line heights and padding and margin around elements, like titles and paragraphs, is a great example of how you can use a child theme to make subtle changes to your parent theme and make the site look better, and like you saw, if you have a style that defines a lot of content and you're only changing one element of that content, then only change that one element. Don't do anything with the rest and the parent theme will do all the rest for you.
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.