Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,800 courses, including more Web and personalized recommendations.Start Your Free Trial Now
- View Offline
- Picking a parent theme
- Creating and activating a basic WordPress child theme
- Using the developer tools
- Changing the header image size
- Using conditional statements for customized effects
- Adding custom menus to the child theme and/or a template
- Changing the default footer content
- Adding featured images to posts
- Changing the display of meta content (such as date, author, category, etc.)
- Excluding categories from the front page with custom queries
- Including functions from external files
- Identifying and fixing common mistakes
Skill Level Intermediate
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.
Sign up for a Premium Membership to download courses for Internet-free viewing.
Watch offline with your iOS, Android, or desktop app.Start Your Free Trial
After signing up, download the course here or from the iOS/Android App.