Trellis Settings

Trellis Settings provides options that a publisher can change to alter a theme’s behavior or to perform maintenance functions. Not all settings may be available in a child theme. Some require the theme developer to specifically add support.

Also, if you choose to create new or additional templates (or create an entirely new CSS stylesheet), it’s up to you to connect the Trellis Settings options to elements in your theme.

Using Settings in a Child Theme

The Usage column in the table below describes how a setting is incorporated into a child theme. Some settings are enabled via WordPress’ theme support function; some are accessed via CSS variables; others require adding code to child theme templates; and some require a combination of these methods.

While it’s possible to read the settings programmatically (and then perform an action on them), this page focuses on explaining how the settings are incorporated in the Trellis Core templates.

Theme Support

To enable a feature via WordPress’ theme support function, include the following code in the child theme’s functions.php file at the end of the mv_trellis_child_set_options() function:

add_theme_support('{parameter}');

For example, if adding support for the Background Accent Color setting, the code would look similar to:

function mv_trellis_child_set_options() {
    $child_version = '{your-child-version}';

    \Mediavine\Trellis\Options::set_multiple(
        [
            'child_name'    => '{trellis-child-theme-name}',
            'child_version' => $child_version,
            'child_css'     => get_stylesheet_directory_uri() . "/assets/index.$child_version.css",
            'child_js'      => get_stylesheet_directory_uri() . "/assets/index.$child_version.js",
        ]
    );
/** add theme support for background accent color */
  add_theme_support('mv_trellis_background_accent_color');
}

Multiple add_theme_support() methods can be added to the function, if needed.

Using Trellis CSS Variables

Trellis’ default CSS stylesheet incorporates all the settings shown in the table. If you want to make use of a setting color or font in a different part of your theme, you’ll need to reference a Trellis CSS variable.

The syntax to use a CSS variable is:

var({--trellis-variable-name}, {optional-fallback-value})

For example, if using the Trellis Primary Color as the background for a div element (with a fallback value of white), you would use:

div { background-color: var(--mv-trellis-color-primary, #ffffff); }

Adding Code to Templates

Some settings will reference functions or code that needs to be included in a template file. Refer to the function, hook, filter, or named Trellis Core templates to see how they’re used.

Display Settings

Font Sizes and Typefaces

Colors

Post Meta

Images

Footer

Layout

Advanced Settings

Google Analytics

SEO

Optimization

Permanent Actions

PWA Settings

License Settings

Hooks Settings

Critical CSS Settings

Settings

Exclusions

What’s Next?

• Get started creating a Trellis child theme
• Read more about Trellis Hooks
• Read more about Trellis Filters