WordPress Child Themes

WordPress uses “themes” to display the content of the database in a user-friendly and attractive interface in the browser. Deciding which theme to use may be determined by the site requirements, some themes have additional features that may be required – or not. Don’t use a theme with all the Bells & Whistles if you don’t need those features. Whether a theme is simple, complex, free or fee-based theme, a child theme is created to allow customization of the display and functionality of the parent theme. If changes were made to any files within the parent theme, they would be deleted on a theme update.

Note: Some ‘high-end’ themes include options to add your own customized CSS. This will not be deleted by updates to the theme, and therefor could reduce the need for a Child theme – however, this is an option only IF you plan to tweak some CSS styles, not template files.

Each theme uses:

• One or more style sheets (aka: “Cascading Style Sheets”). The CSS code tells the browser HOW to display content.
• Multiple “Template” pages containing php code which tell the browser WHICH content from the database to display.

Any changes to CSS and/or Template files need to be done in a child theme.

A child theme consists of the child theme folder contaig two files: style.css and functions.php.

To create a child theme, create a folder in the “wp-content/themes” folder with a unique name – a good practice is to add “-child” to the parent name: For instance “twentysixteen-child”. (Clarifies who the parent theme is.)

Create a new plain-text file* and save it as “style.css”, and place this inside the designated Child folder.
Copy the child theme sample code below (Or from: http://codex.wordpress.org/Child_Themes) and enter your own specifications.

The child theme “style.css” file MUST include this at the top, with your own settings:

/*
 Theme Name: Your Theme name - parent name
 Theme URI: http://thewebsite.com
 Description: Child Theme of XX
 Author: You and parent theme designer
 Author URI: http://www.yoursite.com
 Template: The parent theme name
 Version: 1.0.0
*/
@import url("../parent-theme-name/style.css");
/* ------------Theme customization starts under here --------- */

The above  method importing the parent theme stylesheet using @import  is considered outdated, it’s recommended to “enqueue” the file instead. This requires a functions.php in the child theme folder to contain the wp_enqueue_scripts action and use wp_enqueue_style().

<?php
 add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
 function theme_enqueue_styles() {
 wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
 }?>

This needs to be tested

---

Once the child theme has been uploaded into the wp-content/themes folder it will be available in the WordPress admin themes page.

For style changes, the relevant CSS is copied into the child theme style.css, and edited there. Best to have the Firefox Firebug add-on installed. Allows exploration of the applicable CSS affecting any item. The Chrome browser already has this built in. (Right-click and “inspect”)

Changing the CSS for ID’s and class styles:

• Find the style ID or class name by using Firefox Firebug or Chrome Inspect.
• Note the line number (may need additional sleuthing)
• Locate the specific CSS code in the parent theme style.css
• Copy the code into the child theme style.css file. Change the properties as needed and WordPress will give preference to the child theme styles, overriding the parent theme style.

Changes to any template pages:

Changes to a .php template page is done by placing a copy of the .php page in the child theme, and making the edits there. They will override the parent theme.

Sometimes it helps to know which template is used for a specific display. To find out, place this code at the bottom of the functions.php page. Refresh the web page in the browser, and the template path will be shown at the top of the page. However, it may not be obviously visible depending on the page background color.

add_action(‘wp_head’, ‘show_template’);function show_template() { global $template; print_r($template);} 

Minified CSS code:

Sometimes a theme may only have it’s CSS in minified format, making it hard to find specific styles. To un-minify the code: In Dreamweaver, open minified page and click the source formatting link at the bottom. Click Apply Source Formatting and it will un-minify. This web page will also work, and the entire page can be copy/pasted into a new file: http://unminify.com/

https://codex.wordpress.org/Child_Themes

*.. Use a text editor such as Notepad++ (free) or any plain text editor to create the style.css file. Do not use Word or any text formatting software!