How to Add a Custom Theme Base

In this tutorial let’s quickly cover how to add a custom theme base from your child theme. We’ll first setup a directory in a child theme called “base” and then add our custom base into there. We could add as many as we want, but for this tutorial, we’ll just add one.

So first, create a directory in your child theme called “base” —

{My Child Theme}/base/

Next create a directory within that called “my-base” —

{My Child Theme}/base/my-base

Next you’ll want to create three files within your theme base.

  1. style.css – You’ll put your base’s overriding CSS here.
  2. base.php – You’ll put your base’s PHP functionality here.
  3. preview.png – An 880×250 preview image for your base, displayed in the admin.

So, now you should have a setup like this —

{My Child Theme}/base/my-base/style.css
{My Child Theme}/base/my-base/base.php
{My Child Theme}/base/my-base/preview.png

And then from your child theme’s functions.php, you’ll filter in the theme base to the admin, along with filtering in the directory path and URL. Now, in order for all this to work correctly, you’ll need to place the following code BEFORE the framework is included in your child theme’s functions.php.

/**
 * In your child theme, create the following files:
 * {Your Child Theme}/base/my-base/style.css
 * {Your Child Theme}/base/my-base/base.php
 * {Your Child Theme}/base/my-base/preview.png - 880×250
 */

/**
 * Filter in the custom bases for the
 * admin selection.
 */
function my_bases( $bases ) {
    $bases['my-base'] = array(
        'name'		=> 'My Base',
        'desc'		=> 'Base description...'
    );
    return $bases;
}
add_filter('themeblvd_bases', 'my_bases');

/**
 * Filter in the paths to your bases.
 */
function my_base_path( $path, $base ) {
    if ( $base == 'my-base' ) {
        $path = sprintf( '%s/base/%s', get_stylesheet_directory(), $base );
    }
    return $path;
}
add_filter('themeblvd_base_path', 'my_base_path', 10, 2);

/**
 * Filter in the URL to your bases.
 */
function my_base_uri( $uri, $base ) {
    if ( $base == 'my-base' ) {
        $uri = esc_url( sprintf( '%s/base/%s', get_stylesheet_directory_uri(), $base ) );
    }
    return $uri;
}
add_filter('themeblvd_base_uri', 'my_base_uri', 10, 2);
Important! Remember to include the above code BEFORE the framework in your child theme’s functions.php for the theme base(s) to be setup properly.