3h 11m – Intermediate
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.
Topics include:
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
Introduction – 6m 59s
Welcome – 1m 6s
Using the exercise files – 1m 34s
What you need to know before watching this course – 1m 29s
Getting the right tools for theme creation – 2m 50s
1. Creating a Child Theme from Scratch – 17m 2s
What is a WordPress child theme and when should you use it? – 2m 38s
Picking a parent theme – 3m 55s
Making sure you have the Twenty Twelve parent theme – 1m 50s
Creating and activating a basic child theme – 4m 20s
Importing parent theme styles – 4m 19s
2. Modifying and Adding Styles – 16m 2s
Using the developer tools – 3m 53s
Modifying existing styles – 4m 24s
Adding space between paragraphs – 4m 7s
Changing font family styles – 3m 38s
3. Modifying and Adding Templates – 31m 47s
Understanding the WordPress template hierarchy – 3m 12s
Modifying existing templates – 2m 33s
Moving the header image – 4m 29s
Adding Related Posts feature to posts – 6m 26s
Creating custom page templates – 5m 43s
Using conditional statements for customized effects – 5m 41s
Creating custom header, footer, and sidebar templates – 3m 43s
4. Customizing the Index Pages – 17m 5s
Understanding the different index pages and what they do – 4m 6s
Adding author, date, and time information to the index loop – 7m 15s
Changing the appearance of category index pages – 5m 44s
5. Modifying and Adding Functions – 43m 5s
Introducing functions.php – 3m 24s
Overriding existing functions – 3m 23s
Adding pagination to index pages – 5m 49s
Adding to existing functions – 3m 21s
Adding a new footer menu to Twenty Twelve – 6m 24s
Adding a new widgetized area to pages – 4m 9s
Adding static content to the sidebar – 7m 44s
Replacing existing functions – 2m 36s
Adding a Google font through a function – 6m 15s
6. Working with Featured Images – 10m 24s
Adding new featured image sizes – 5m 41s
Adding featured images to posts and pages – 4m 43s
7. Beyond the Basics – 31m 1s
Adding a welcome message to the front page – 1m 22s
Displaying page content in an index page – 7m 42s
Hooking in a featured image – 4m 34s
Making the welcome message responsive – 6m 27s
Restricting content to the first page of the blog – 4m 22s
Adding a jQuery function to show or hide the welcome message – 6m 34s
8. Adding Finishing Touches – 10m 23s
Adding a custom favicon – 3m 58s
Adding a custom screenshot – 2m 29s
Adding footer information – 3m 56s
9. Troubleshooting Child Themes – 7m 14s
What to do when a child theme crashes your website – 4m 38s
Updating parent and child themes – 2m 36s