Problem Description:

Child themes are a collection of separate files which allow you to make changes without affecting the original theme’s code. This allows you to update the original “parent” theme without your changes being erased,  and also provides a fallback in the event something in your child theme breaks.

Child themes are an absolute must if you need to modify a theme’s HTML structure or existing functions, especially if the site is being developed professionally for a client. The child theme provides an easier way for you to compare your modifications to updates we make in the parent so you are able to manually update or migrate fixes into your theme.

Support

This process is not recommended for beginners. If you do not have any coding or CSS knowledge, we recommend you stick to what can be done with plugins and custom styling, or check out these great resources:

Where can I get help with modifications or advanced Custom CSS?

We are happy to provide clarification on this article or answer questions you may have about the original theme’s styling or function location. We cannot assist you with modifying your theme or support problems you encounter with child themes – once you create a child theme, you are assuming ownership and development of the theme in essence. We recommend the following resources:

 

 

Answer:

Getting Started

In the following example, we are using the Dynamo theme as the parent.

Begin by creating a folder for your child theme files. Ideally the name should reflect your child theme name. In this example, we will name it “dynamo-child.” Your child theme needs two files at the very minimum in order to activate properly from the admin panel, a functions.php and a style.css. These must be placed into a single folder titled for your theme.

Do not copy these files from the parent theme.

Setup the Stylesheet

Your child theme style.css requires a header to activate in WordPress. Most importantly, it needs the theme name, template and version.  Information such as the Description and Theme URI are not required, but uphold a bit of the developer honor code.

/*
 Theme Name:     Dynamo Child
 Theme URI:      http://www.oboxthemes.com/themes/dynamo
 Description:    Dynamo Child Theme
 Author:         You
 Author URI:     http://www.yoururl.com
 Template:       dynamo
 Version:        1.0.0
*/
/* =Theme customization starts here ------------------------------------------------------- */
  • The Theme Name must match your child theme’s folder name.  Our example folder is called “dynamo-child”, so our Theme Name is Dynamo Child. This value is only used to display the theme’s name in your WordPress admin area. It is important to note that your folder name should be in lower case and not contain any spaces. Example: a child theme named My Theme in the stylesheet would have a folder called my-theme, not My-Theme or My Theme.
  • The Template must reflect the parent theme’s folder name. In our example, Dynamo’s folder name is “dynamo.” Be careful with parent themes that have hyphenated folder names – for example Retail Therapy is “retail-therapy”.
  • The Description, Author and Author URI may be updated with your personal information.

Versioning

The Version should begin at 1.0. Each time you make major changes to your child theme and upload it to your site, your version should increment by one. 1.1, 1.2 etc. We recommend using a version control system such as Bitbucket or Github to keep your version history organized, as well as to make comparisons between your modifications and the parent theme updates much easier to view.

@imports

Do not use @imports for including the parent styles or secondary child stylesheets as they can mess up the ability for styles to override each other, and slows loading of the main stylesheet. Instead, enqueue your stylesheets:

Setup Functions

The functions.php should have the following at a minimum. This allows your child theme to load any customized versions of core theme files such as widgets, etc from the ocmx folder, and enqueues your styles and scripts.

To begin,  ensure the child theme can see the parent’s core files:

<?php

/**********************/
/* Include parent OCMX files */
$folder = get_stylesheet_directory(). '/ocmx/';

Next, enqueue your child stylesheet. For a detailed overview of how to use the wp_enqueue_style hook, see this article. The following code can be pasted below the above code.

 

/* Enqueue Child Theme Scripts & Styles ** 
http://codex.wordpress.org/Function_Reference/wp_enqueue_style 
* Since 1.0 */ 
add_action( 'wp_enqueue_scripts', 'my_child_styles' ); 
  if( ! function_exists( 'my_child_styles' ) ) { 
    function my_child_styles() { 
      wp_enqueue_style(
           'child-style', 
            get_stylesheet_directory_uri() . '/style.css', 
            array('dynamo-style') 
      ); 
   } 
}

 

Where you see dynamo-style inside the array brackets on line 15 above, this refers to the name of the parent’s stylesheet. Replace dynamo with the same template name used in your style.css. This ensures your child stylesheet loads after the parent and can override properly, a new requirement with WordPress 4.1.

That’s it! Save the file and continue:

Admin Images

The admin area contains several branded and proprietary images related to the custom post types, theme options panel and post editor options. The parent theme is coded to look to your child theme for these images in order to support customization, so you must copy the ocmx/images folder from the parent into your child theme’s ocmx folder.

Results

Your final child theme structure should look like this:

  • child-folder/
    • functions.php
    • style.css
      • ocmx/
        • images/

Upload and Activate

Both the parent theme and the child theme must be installed. The parent must be installed first  and can use either the WordPress or FTP method. For the child theme, we strongly recommend you upload it via FTP, as zipping it adds another variable for error. Both the parent and child folders should be visible in your wp-content/themes directory.  Once acitvated, you will see the child theme in your Appearance > Themes page where it can be activated.

Note: if you see the original theme screenshot, make sure you did not copy more files into the child than should be there. Delete the screenshot.png from the child folder and replace it with your own, or leave it blank for now so you can easily distinguish the child from the parent.

dynamo-child

 Modifying Widgets

If you are modifying widgets, your copy must have a unique class name on lines 2, 4 and the last line and be in the same “widgets” folder in your child theme “ocmx” folder. The following example demonstrates renaming the Content Widget’s obox_content_widget class to my_content_widget:

  1. <?php
  2.   class my_content_widget extends WP_Widget
  3.            /** constructor */
  4.            function my_content_widget() {

And then at the bottom:

add_action('widgets_init', create_function('', 'return register_widget("my_content_widget");'));

?>