Tutorials

Customize our premium WordPress themes and stand out from the crowd.

Create a Simple Child Themes with Backbone Framework

http://colorlabs.co/IflDDP

The recommended way to customize Backbone Framework and keep track of all your changes is to create a child theme. It is not as hard as you might think. Even if you do not think of yourself as a developer, meaning you have limited HTML, CSS, JavaScript or PHP skills, you STILL ought to create a child theme. By using a child theme, you can make all of the same modifications as you would to the Backbone Framework, make changes to the markup (adding extra divs or wrapper for styling). This allows you to update the Backbone Framework whenever you want and you can still realize your own ideas.

What is a Child Theme?

From the WordPress Codex:

A WordPress child theme is a theme that inherits the functionality of another theme, called the parent theme, and allows you to modify, or add to, the functionality of that parent theme.

A basic child theme consists of only a style.css file.  If you plan on using the available Action Hooks and Filters in Backbone, you will also need to create a functions.php file.  You can also add a screenshot.png file too, which is your theme’s thumbnail that will show up on the Appearance -> Themes page.

Create Child Theme

In the first step, a new folder is created in which we put all the template files, images, scripts and style sheets – everything that is principally needed for the Child Theme. In this example, the folder is backbonechild. To create a Child Theme and make this apparent to WordPress, you simply need style.css within the new folder with several strings in a comment.

/*
Theme Name: BackboneChild
Theme URI: http://colorlabsproject.com/
Description: Child Theme for Backbone Framework from ColorLabs.
Author: ColorLabs & Company
Author URI: http://colorlabsproject.com
Tags: child theme, backbone, simple, clean
Template: backbone
Version: 1.0.0
*/

@import url("../backbone/style.css");

/* Add your own CSS here if you want */

Everything located between the starting /* and ending */ comments tell WordPress important information about the child theme. These are mandatory:

Theme Name: BackboneChild – the name of our child theme
Template: backbone – the folder name of Backbone Framework (Case matters)

This line:

 @import url("../backbone/style.css"); 

imports the style.css file of Backbone Framework into the child theme stylesheet. The ../ tells WordPress to “move up” one directory out of the BackboneChild folder and then move down into the Backbone Framework folder. It’s important to include this @import rule before your custom css. All css rules that show up after this rule will override the Backbone Framework styles.

Note: There must be no CSS rules above the @import rule. If you put other rules above it, it will be invalidated and the stylesheet of the Backbone Framework will not be imported.

Now we have the following structure within the installation of WordPress.

  • wp-content
    • themes
      • backbone (Backbone Framework, including all template files)
        • style.css
        • index.php
      • backbonechild
        • style.css (must satisfy these name convention: style.css)

Required / Optional files for your child theme:

  • style.css (required)*
  • functions.php (optional)
  • Template files (optional)
  • Other files (optional)

Now, you can override any CSS class in the Backbone Framework. Using the Custom File editor in Backbone theme panel also overrides default Backbone CSS styles. Also, of course, you can remove the call to the style sheet @import url('../backbone/style.css'); from the Child Theme and you can build your own style sheet completely.

Create Custom Functions

Of course you can also bring in the Child Theme your own functions. If you put an own functions.php in your Child Theme, then it does not replace the functions.php of the Backbone Framework.
The functions of the Backbone Framework will always be used. You have to disable them via the Hook.

add_action('wp_head','backbone_child_sample_function');

function backbone_child_sample_function() {

    remove_action('colabs_header_after', 'colabs_nav');
    remove_filter('wp_page_menu','colabs_page_menu');

}

Within the function backbone_child_sample_function()you can disable the functions of the Backbone Framework and bring in your own functions.

If using Action Hooks is confusing for you, simply rely on the WordPress template hierarchy and template inheritance to override specific template files. From the WordPress Codex:

Templates in a child theme behave just like style.css, in that they override their namesakes from the parent. A child theme can override any parental template by simply using a file with the same name. (NOTE. index.php can be overriden only in WordPress 3.0 and newer.) Again, this WordPress feature lets you modify the templates of a parent theme without actually editing them, so that your modifications are preserved when the parent theme is updated.

If a child theme contains, for example, an index.php file, it will take precedence over the parent theme’s index.php template file. This only pertains to files that fall within the WordPress template hierarchy. You can’t override all parent theme files simply by recreating them in a child theme.

Activate Child Theme

When you view Dashboard > Appearance, you will now see your new child theme listed. At this moment, it is advised that you preview all your changes as they appear on the WordPress Admin screens. Once you like what you see, activate your new child theme.

If you look at the BackboneChild, it should contain the following information :

The template files are located in /themes/backbone. The stylesheet files are located in /themes/backbonechild. BackboneChild uses templates from Backbone. Changes made to the templates will affect both themes.

  • Geraldine

    Can I make the same process in creating a child theme for Job Jockey theme?

    • Natan

      No it is not, although you can, but some functions on JobJockey does not inherent to its child theme.

  • soundling

    If I want to make a child theme of Minuet do I use the name Minuet or do I use backbone? Should I include the functions.php file even if I don’t plan on changing the functions?

    • Natan

      You can use any name, and you just have to copy the functions.php into your new child theme.

  • Jeff

    How do I get the child theme (papuro) activated if backbone is required on WP? You would think that there would be a tutorial on how to get a child theme to work with the backbone (like papuro) but I can’t seem to find it… maybe you could help with this?

    • Natan

      You just have to install the backbone and make sure it is on your theme list. Then activate the papuros should be just fine.

  • Guest

    @Jeff:disqus You just have to install the backbone and make sure it is on your theme list. Then activate the papuros should be just fine.
    @soundling: disqus You can use any name, and you just have to copy the functions.php into your new child theme.
    @Geraldine:disqus No it is not, although you can, but some functions on JobJockey does not inherent to its child theme.