Course Title: WordPress: Building Child Themes Description: Learning how to create a child theme is the first step to becoming a WordPress developer. Child themes are a great entry point, as they’re built on top of an existing theme with a properly coded foundation. The skills you use during development are the same ones you leverage for writing brand-new themes and plugins. Learn how to use child themes to create your own custom, stylish new WordPress sites—without the advanced knowledge of a web developer. Instructor Patrick Rauland 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. *********************************************** Chapter: 1. Building on a Solid Foundation *********************************************** ----------------------------------------------- Video: Use real content ----------------------------------------------- Note Time: Note Text: 0:01:45 To import to the new site, go to Admin > Tools > Import, 0:01:45 Export content from a live site - Admin > Tools > Export 0:02:13 install the WordPress importer, and select the file. 0:02:20 Be sure to check the box for "Download and import file attachments" *********************************************** Chapter: 2. Creating a Child Theme *********************************************** ----------------------------------------------- Video: What is a child theme? ----------------------------------------------- Note Time: Note Text: 0:02:14 How Child Themes Load Files: 0:03:02 CSS: Load *parent's* style.css, then load *child's* style.css 0:03:15 Template files: Load *child's* template files first (if they exist), then load *parent's* template files (if they haven't already loaded the child theme's template). 0:03:32 Functions.php: Load *child's* functions.php first, then load *parent's* functions.php ----------------------------------------------- Video: Picking a parent theme ----------------------------------------------- Note Time: Note Text: 0:03:16 WordPress does not allow the creation of a "grandchild" theme - that is, a child of a child 0:03:16 Recommended: start with a parent theme with the layout and templates files you want to have in the resulting child theme. ----------------------------------------------- Video: Creating and activating a child theme ----------------------------------------------- Note Time: Note Text: 0:00:07 see wordpress.org for steps to create a child theme 0:00:54 .../app/public is the folder to open in code editor 0:01:09 need to create child theme folder in .../wp-content/themes 0:02:00 two naming conventions for folder 0:02:18 minimum to create a child theme: style.css in child theme's folder 0:02:51 ...then need to create a standard header (can always copy the default from wordpress.org) 0:03:03 Theme name needs to be unique 0:03:14 Theme URI is the place where you distribute the child theme (can leave blank) 0:03:20 Description good to mention that the theme is a child theme here 0:04:01 also good to set Text Domain: (e.g. twentynineteenchild) for translation purposes in the future 0:04:01 Template: (mandatory) the name of the parent's theme's folder ----------------------------------------------- Video: Including stylesheets ----------------------------------------------- Note Time: Note Text: 0:00:12 convention to load the parent's stylesheets is to use functions.php 0:00:57 create new functions.php in the child theme's folder 0:01:02 can copy the necessary code to enqueue parent's stylesheet from wordpress.org 0:01:56 after the code to load the parent's style.css, add the code to enqueue the child theme's style.css ----------------------------------------------- Video: Best practices for including stylesheets ----------------------------------------------- Note Time: Note Text: 0:00:55 1. add a parameter to child theme's wp_enqueue_style to ensure that the parent's style.css is loaded before the child's style.css 0:01:15 also good to include parent's version (to prevent future caching issues) in the child theme's wp_enqueue_style 0:03:01 can add additional style sheets after child theme's wp_enqueue_style *********************************************** Chapter: 4. Working with Function Files *********************************************** ----------------------------------------------- Video: Understanding functions.php ----------------------------------------------- Note Time: Note Text: 0:00:38 functions.php is used for two distinct purposes: 0:00:45 1. functions.php is used to set up the features of the theme 0:01:01 (including enqueueing style sheets) 0:01:10 (and enqueueing JavaScript files) 0:01:15 2. also used to hold custom functions 0:01:26 (recap of loading order for parent and child CSS and functions.php) 0:01:44 child theme's functions.php is loading BEFORE the parent theme's functions.php to take advantage of "pluggable" functions 0:01:55 A "pluggable" function is one which wraps the function's code in an if statement to see if the function has already been created (e.g. in the child theme's functions.php) ----------------------------------------------- Video: Modify a pluggable function ----------------------------------------------- Note Time: Note Text: 0:00:07 1. copy the entire function from the parent's functions.php 0:00:07 to "plug" a pluggable function in the child theme: 0:00:18 (the if wraps the entire function definition in the parent's functions.php - it's NOT an if statement inside the function -- that would be too late for php) 0:00:28 {copy everything between the if and opening and closing bracket} 0:01:34 (the example uses the sprintf function -- this function is used to enable language translation for the theme) 0:03:27 link to list of special characters and how to encode them: https:/dev.w3.org/html5/html-author/charref ----------------------------------------------- Video: Hooks, filters, and action ----------------------------------------------- Note Time: Note Text: 0:01:29 actions hook into action hooks, filters hook into filter hooks 0:01:40 add_filter has 4 params: $tag, $function_to_add, $priority, $accepted_args 0:01:41 $tag - what's we're filtering 0:01:46 $function_to_add - the callback function 0:01:51 $priority - lower numbers are executed first - default 10 0:02:06 $accepted_args - the number of arguments the function accepts (default 1) 0:02:21 add_action has the same 4 parameteres: $tag, $function_to_add, $priority (default 10), $accepted_args (default 1) ----------------------------------------------- Video: Filter a function ----------------------------------------------- Note Time: Note Text: 0:03:28 example: using a filter to change the displayed titles for recipe category posts without changing the actual title 0:04:02 create the function first, then use; 0:04:14 add_filter('the_title', recipe_titles, 10, 2); ----------------------------------------------- Video: Hooking functions ----------------------------------------------- Note Time: Note Text: 0:00:38 a common use of actions is removing functions that the parent theme has added 0:01:29 need to run remove_action() AFTER the corresponding add_action() - you cannot remove something that hasn't been added 0:01:45 since the child's functions.php runs before the parent's functions.php, need to: 0:01:54 1. write a function which includes the remove_action() functions for the parent's add_action(), then 0:02:29 2. use add_action('after_setup_theme', ); *********************************************** Chapter: 5. Working with Template Files *********************************************** ----------------------------------------------- Video: Template hierarchy in WordPress ----------------------------------------------- Note Time: Note Text: 0:02:40 Show Current Template plugin will...show the current template and the files included in it ----------------------------------------------- Video: Changing an existing template ----------------------------------------------- Note Time: Note Text: 0:00:31 Twentynineteen theme has template-parts/post/author-bio.php, which is a template file for the author bio 0:01:40 WP function to add a picture of a blog user is get_avatar() 0:02:01 to use a given template or template part in the child theme, you need to re-create the directory structure as well as the file 0:02:04 e.g., to add an author-bio.php to the twentynineteen child theme, need to create /template-parts/post/ directories, then copy the author-bio.php from twentynineteen/template-parts/post ----------------------------------------------- Video: Add new template files ----------------------------------------------- Note Time: Note Text: 0:00:19 to create a particular template file when a theme doesn't have one, go to the right in the template hierarchy, copy that file, and rename it as the template you want 0:00:31 e.g. if you want to create a category.php and it doesn't exist, copy the file to the right (archive.php), add it to the child theme folder, and rename it category.php ----------------------------------------------- Video: Managing backward compatibility ----------------------------------------------- Note Time: Note Text: 0:00:19 CSS and functions.php are good at pulling in upstream (parent theme) changes and updates 0:00:49 however, child theme template files may need to be updated to take advantages of upstream changes 0:01:27 whenever possible, try to implement child themes using CSS and functions.php - only add template files as needed ----------------------------------------------- Video: Solution: Custom 404 page ----------------------------------------------- Note Time: Note Text: 0:00:31 royalty-free images at unsplash.com 0:01:50 use get_stylesheet_directory_uri() to reference the child theme's home directory *********************************************** Chapter: 7. Wrapping Up *********************************************** ----------------------------------------------- Video: Shiny new web fonts ----------------------------------------------- Note Time: Note Text: 0:00:01 use wp_enqueue_style() to add new web fonts to your child theme, and use wp_dequeue_style() to remove fonts added by the parent theme ----------------------------------------------- Video: Adding a screenshot ----------------------------------------------- Note Time: Note Text: 0:01:02 the screenshot image for a theme needs to be named screenshot.png 0:01:51 and needs to live in the child theme's home directory ----------------------------------------------- Video: Migrating files to your live site ----------------------------------------------- Note Time: Note Text: 0:01:16 can save the child theme directory to a .zip file, and upload the new theme as that .zip file