burbswp / five-minute-presentations

Each of our meet ups includes two of these five minute presentations.
GNU General Public License v3.0
5 stars 0 forks source link

Creating a Child Theme #10

Open JSdesigNerd opened 8 years ago

JSdesigNerd commented 8 years ago

Premise (my current beliefs) While I know how to edit CSS and add a secondary css style sheet to a theme I know this is a hacked way to modify a theme to meet specific project requirements and I believe that it will interfere (to put it mildly) updates and perhaps plug-ins as well. The correct method to modify a theme is to create a Child and while I haven't done this, I think it's fairly straight forward once someone knows which files to modify or add and how.

I'm suggesting this because it's something I need to know how to do. I'd need to study or it at least get pointers but in doing so would have the recent experience of going from not knowing to knowing and would be primed to share that experience with our group in a step by step manner.

Again since I haven't done this yet I would need time to prepare the presentation and would be eager to gather tips from others to assure I'm doing this the most correct and simplest way we know of.

pbrocks commented 8 years ago

A child theme is actually pretty simple and worth just jumping off to see what happens! It used to be that you could create a child theme with just a single file, style.css, in its own folder. This file needed to contain minimally two lines in a comment at the top and a statement in the body.

/*
Theme Name: Child Theme
Template: parent-theme-folder-name
*/
@import url("../parent-theme-folder-name/style.css");

The Template: part in the comment area tells the child theme where to find the theme files and the declaration in the body points to the CSS. WordPress has moved on from having this statement in the style.css and will require that you also have a functions.php in your child theme folder.

So your two child theme files should look like this:

style.css

/**
 * Theme Name: Child Theme
 * Template: parent-theme-folder-name
 */

functions.php

/**
 * Proper way to enqueue scripts and styles
 */
add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_css' );
function enqueue_parent_theme_css() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}