Creating Your Child Theme

This document will walk you through the pieces and parts of a Trellis child theme.

Child Theme File Structure

1. Create a new folder for your child theme in your WordPress themes folder.
2. Create the following folder structure inside of your child theme folder:

3. Add a 1200 x 900 px screenshot.png file to your child theme folder. This screenshot will be shown on the Appearance > Themes page in your WordPress dashboard.

Add CSS Files

Create a Style.css File

1. Create a new file called style.css in your child theme folder.
2. Add the following code, replacing the boilerplate text with your own content:

/*
Theme Name: {Your Child Theme Name}
Template: mediavine-trellis
Theme URI: {URL to your child theme's documentation.}
Author: {Your Name or Company Name}
Author URI: {URL to your personal or company website.}
Description: {A short description of your child theme.}
Requires at least: 5.2.0
Version: {Your Child Theme Version (e.g. 0.0.1)}
Text Domain: mediavine
*/

The fields are used in the following ways:

Add Custom CSS Files

You can choose to add your custom CSS to the style.css file or you can create separate CSS files for inclusion in your child theme.

Your custom CSS file can be any name you choose, but we recommend including the child theme version number in the name. This ensures that any CSS changes you make will bust the cache whenever the child theme is upgraded (and its version number changed). You’ll define the name and location of your CSS file in your child theme’s functions.php file.

1. Add a custom CSS file to your child theme’s assets folder.

wp-content/themes/my-child-theme-name/assets/

2. Add your child theme version to the name of your custom CSS file. For example, if your child theme’s version is 0.0.1, name your CSS file index.0.0.1.css.

Add a Functions.php File

Your child theme’s functions.php file will hold custom functions that change how your theme behaves. It lets you enqueue your CSS stylesheet and customize your theme options.

Set Basic Definitions

1. Add a functions.php file to your child theme folder.
2. Add the following code to functions.php, replacing the boilerplate text with your own values:

<?php

/** Basic Definitions **
 * Use mv_trellis_child_set_options() to define the child theme version and other necessary settings. .
 * Options::set_multiple will enqueue stylesheets and scripts.
 * 
 * To learn more about functions available to Trellis child themes, see: https://mediavine.github.io/trellis-docs/reference/functions/
 * To learn more about settings available to Trellis child themes, see: https://mediavine.github.io/trellis-docs/getting-started/trellis-settings/
 */

function mv_trellis_child_set_options() {
    $child_version = '{replace with your child theme version number}';

    \Mediavine\Trellis\Options::set_multiple(
        [
            'child_name'    => '{replace with your child theme name}',
            'child_version' => $child_version,
            'child_css'     => get_stylesheet_directory_uri() . "/assets/index.$child_version.css",
        ]
    );

add_action( 'mv_trellis_parent_loaded', 'mv_trellis_child_set_options' );

The $child_version variable represents the version number of your child theme. We recommend defining it in a variable so that you can reuse it in other places of your child theme code.

(Optional) Add Theme Support Options

Add the following code after Options::set_multiple to allow the publisher to set accent colors and heading styles in Trellis Settings. See Trellis Settings for information on how to connect your code to the settings in your child theme.

/** Accent Color and Headings Support **
 * Use add_theme_support to use accent colors and heading options defined in Trellis Settings.
 */

  add_theme_support( 'mv_trellis_background_accent_color' );
  add_theme_support( 'mv_trellis_headings_control' );
}

Create Template Files

While Trellis supports the WordPress Template Hierarchy, page load time can be reduced through the use of template parts. Template parts are reusable blocks of code that can be called from different page templates. This allows them to serve up special coding for things like category templates, author templates, and more. Think of template parts as more sophisticated versions of get_header() and get_footer().

WordPress has a built-in function for template parts, but Trellis offers a faster function called mv_trellis_get_template_part(). This custom function caches your template parts and serves them much faster than WordPress’ built-in function. You can see it in use in the Trellis Core and Bamboo, Birch, and Wisteria child themes. See Functions in Reference for more information.

Built-In Trellis Core Templates

Any template placed in your child-theme’s folder will follow the WordPress Template Hierarchy and override a template in the Trellis parent theme folder. However, we recommend using a similar structure of template parts for your own theme files in order to get the biggest speed boost.

Trellis Core provides the following templates out of the box:

• comments.php
• footer.php
• header.php
• index.php
• page-full-width.php
• searchform.php
• sidebar.php
• template-parts (directory)
  • article (directory)
    • article-excerpt.php
    • article-meta-footer.php
    • article-meta-head.php
    • article-navigation.php
  • content (directory)
    • content-article.php
    • content-none.php
    • content.php
  • header (directory)
    • header-content-author.php
    • header-content-front-page.php
    • header-content-home.php
    • header-content-singular.php
    • header-content.php
    • header-featured.php
    • header.php
    • navigation.php
    • search-form.php

Bamboo, Birch, and Wisteria Child Themes

If you’ve installed the Bamboo, Birch, and Wisteria child themes, you’ll find that each one builds upon Trellis Core’s default templates and stylesheets. Some of the child themes have support for accent colors and heading settings while others don’t. Be sure to activate these child themes and look through them for ideas on how to create your own child theme.

Trellis Template Markup

Trellis also receives higher SEO scores by using semantic HTML markup in all of its templates. While there’s traditional markup mixed in, large blocks are coded with semantic HTML. Semantic HTML makes it easier for Google’s bots to index your site and also increases web page accessibility.

Here’s a resource to help you understand Trellis’ default markup:

• Trellis Visual Markup Guide

What’s Next?

• Learn how to test your Trellis child theme
• Read more about Trellis Hooks
• Read more about Trellis Filters