FrugalWebGuy is Merging with Michael Mann Web Design under the new Title of I Do Web Work

Child Theme Development – Style.css

Video Available (Signup to Access - Members Only)

A child theme only needs a single file to work correctly. That is a style.css file. In this training we will take a look at the bare minimum required for a child theme's style.css file in order for it to work, as well as some of my own personal guidance for organizing the style.css file.

Clarification: While a child theme only needs a child theme to work correctly, the @import option for pulling in the parent styles is not recommended. For this, we will look at using a function inside a functions.php file within the child theme, as this is the best way to include styles.

The style.css file is all that is absolutely required for a child theme to show within the list of available themes. The code below will set in motion your child theme to display:

/*
Theme Name: Child Theme (a Parent Theme Child)
Description: Child theme description
Author: John Doe
Author URI: http://example.com
Theme URI: http://example.com/parent-child/
Template: parent-theme-folder-name
Version: 1.0.0
Tags: tag1, tag2, tag3
Text Domain: child-theme-text-domain
*/

/* =Theme customization starts here= */

Theme Name: This is the name of your theme, which will show up in the theme selector in the WordPress dashboard. The (a Parent Theme Child) is not required, but suggested so you know to make sure the parent theme is not removed.

Description: A human readable description for your theme.

Author / Author URI: The name and address of the theme author. The author name will show in the theme selector in the WordPress dashboard, linked using the author uri.

Theme URI: Useful to show where the theme is from. You will want this if you plan to distribute the child theme.

Template: As this is a child theme, the template name will be the folder name parent theme, so the child theme can use the parent theme items.

Version: Can increment over time. The update convention and timing is up to you. A version convention is helpful. You will also want to include a changelog file if you plan to distribute.

Tags: Useful especially if you plan to distribute the theme through WordPress.org or elsewhere.

Text Domain: Useful for translation purposes, when placed within appropriate spots inside your theme. You will also need a .po and .mo files for translation.

Structure Suggestion

After working through several dozen child themes, I quickly realized just how quickly one can start getting things jumbled together. That is without a basic structure in place to allow for some organization of styles. So I have put together to following basic structure which might help to keep you better organized as well.

/*** 01. GENERAL - Overall items like header tags and link color ***/

/*** 02. HEADER - Logo, Navigation and such ***/

/*** 03. CONTENT - Bulk of page area including sidebars and content area ***/

/*** 04. FOOTER - Page footer items ***/

/*** 05. MOBILE RESPONSIVENESS - Any mobile responsive code in addition to what the parent theme offers ***/

Feel free to use my basic structure, add on to it or even use your own. As always, leave your comments below.

This Training Series

Part I: Child Theme Development - style.css
Part II: Child Theme Development - functions.php
Part III: Child Theme Development - Custom Meta Box