Join Morten Rand-Hendriksen for an in-depth discussion in this video Adding new styles, part of WordPress: Building Child Themes.
- View Offline
- The child theme style sheet is not just for overwriting…existing styles from the parent theme.…You can also use it to add new styling to your child theme.…So let me give you a practical example of this…that also contains some fairly advanced CSS.…If you look at the content I have in my demo site here,…you'll see that this first post is a sticky post.…That means if we go to the back end of the site…and edit the post.…You'll see that here under Visibility,…it's set to Public and Sticky,…meaning when we go to the front end of the site,…so the index page, it will always stick…to the top of the index page…and up here before any other content.…
Now in WordPress, there's a specific class that gets applied…to sticky post when they're on the front page.…So if we select any item within the sticky post here…and then move our way up to HTML DOM tree…until we find the article,…you'll see that within this cluster of classes,…there's a class called sticky.…And that means if we create a new rule for sticky,…we'll be able to apply styles to just this one post.…
WordPress: Building Child Themes opens the world of child theme development to anyone, no matter what level of experience or expertise. It helps you build your child theme on top of an existing properly coded foundation, and create stylish new WordPress sites—without the advanced knowledge of a web developer. Morten Rand-Hendriksen explains how to get started picking a parent theme, updating the CSS, creating a new template for your child theme, and updating its functionality. By the end of this practical, project-based course, you should have a functioning child theme and the skills to quickly customize your next WordPress site.
- What is a child theme?
- Creating and activating a child theme
- Overriding or overwriting?
- Changing existing styles
- Adding new styles
- Creating templates for the child theme
- Adding new menus and widgets
- Replacing custom web fonts