Example Child Theme Files

readme.md

WordPress Child Theme Template Readme

Generated by wp-cli and commented by Mark Root-Wiley

Written quickly for an NTEN WordPress Online Community Forum post.

How to Use

1. Create a folder in /wp-content/themes/{your_theme_name}/
2. Copy both functions.php and style.css from this gist into that folder.
3. Replace all text in {braces} with appropriate values for your theme
   • There are replacements in both files! The theme likely won't work if you don't make all replacements and remove all braces

What Comes Next

• Review the Other Documentation below
• Selectively add and override files in the parent theme via your child theme.

Other Documentation

• WordPress Theme Handbook "Child Themes" Page - Note: The way this child theme includes parent styles is better :)
• WordPress Template Hierarchy - This shows you the files you can override with or add to your child theme

functions.php

<?php

/*
 Important!
 Make sure to replace {my_} with your theme's unique prefix.
 All future functions you write should use that same prefix.
 Example: mrwnten_parent_theme_enqueue_styles()
*/

add_action( 'wp_enqueue_scripts', '{my_}parent_theme_enqueue_styles' );
/**
 * This function loads both the parent styles and child theme styles for the front-end site
 */
function {my_}parent_theme_enqueue_styles() {
    // This loads the parent styles
    wp_enqueue_style( 'parent-styles', get_template_directory_uri() . '/style.css' );
    // this loads your child theme styles.
    // The array() makes the parent themes a "dependency" of the child styles
    // Dependencies get loaded *first*, so your child theme styles will override parent theme styles
    // (^^^^^^^^ as long as your CSS selectors have the same or higher specificity!)
    wp_enqueue_style( 'child-styles',
        get_stylesheet_directory_uri() . '/style.css',
        array( 'parent-styles' )
    );
}

screenshot.png

[This is just a placeholder! Save a 1200px by 900px image called screenshot.png to your theme so that you see a pretty picture of the theme when you go to Appearance > Themes in the Dashboard]

style.css

/*
Theme Name:     {The name of your theme e.g. Super Awesome NTEN Example Theme}
Theme URI:      {OPTIONAL: If the *theme* has a web page, put the URL here. Otherwise, remove this line}
Description:    {A description of what this theme is e.g. An example of a child theme for NTEN WordPress forum}
Author:         {Your name! e.g. Mark Root-Wiley }
Author URI:     {Your website, if you have one. e.g. https://MRWweb.com}
Template:       {The folder name of the parent theme. e.g. twentyseventeen}
Version:        {Bump this number as your theme improves! e.g. 0.1.0}
*/

This is really helpful! Could you describe how functions.php would call multiple CSS style sheets? My theme has styles.css and styles-custom.css.

Thanks, this was really helpful - wasn't a hundred % sure of the PHP elements to change and now do. Thanks