Skip to content

Instantly share code, notes, and snippets.

@mrwweb
Last active March 18, 2023 04:58
Show Gist options
  • Save mrwweb/92b1c15abfe74f0e472c20a9b1591adf to your computer and use it in GitHub Desktop.
Save mrwweb/92b1c15abfe74f0e472c20a9b1591adf to your computer and use it in GitHub Desktop.
Example Child Theme Files

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

<?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' )
);
}
[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]
/*
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}
*/
@rcagle4
Copy link

rcagle4 commented Sep 7, 2018

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.

@paulaweir
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment