Starter child theme

  • Updated on November 19, 2015
  • Packaged under Child theme
  • Level
    intermediate

Child themes are great as they allow you to customize your website without worrying about losing your work when you update your parent theme.

To make your life easier, we put together a starter child theme which is all you need to get started with customizing your website.

Download Beans starter child themeMore child themes

Here is how the started child theme is structured by default.

functions.php
screenshot.png
style.css
style.less
  1. The functions.php is where you’ll do all your heavy lifting. All snippets provided to customize Beans must be added there, unless it is justified to be added it in a page template file.
  2. The style.css contains just the basics needed to register the child theme. It is enqueued via the functions.php by default but we advise you to remove the enqueuing function if you are using the style.less file instead.
  3. The style.less is added to the UIkit compiler via the functions.php file by default so you can go ahead and write LESS, CSS and even modify UIkit LESS variables if needed (make sure development mode is enabled in Appearance->Settings for LESS to be processed on the fly). We advise you to remove the enqueuing function if you are using the style.css file instead.
  4. The screenshot.png is a blank placeholder image. Feel free to replace it with your own to see a preview of the theme in the Apprearance->Themes admin page.

Theme header in your style.css

The comment at the top of the style.css is used to register the theme with WordPress which you can modify to make it your own.

/*
Theme Name: [Child theme Name]
Theme URI: [Child theme URI]
Description: [Child theme description]
Author: [Your Name]
Author URI: [Your Website]
Template: [Parent theme folder name]
Version: [Child theme version]
*/

The Template line tells WordPress that it is a child theme and to which parent theme it belongs. Therefore, it is important to leave it set to tm-beans.

Including Beans framework

In the functions.php file, you should see the following at the top of the file.

// Include Beans. Do not remove the line below.
require_once( get_template_directory() . '/lib/init.php' );

This loads Beans framework and it is important not to remove it as it is what makes all the framework functions available in your child theme.