Quick Start

Get ThemePlus up and running in your theme in five steps.

Last updated: March 10, 2026

Overview

ThemePlus is a framework — it requires a small amount of configuration inside your theme before it does anything. This guide walks you through the complete setup from a fresh installation to retrieving your first option value in a template.

Step 1 — Copy the Sample Config

Inside the ThemePlus plugin folder, find this file:

wp-content/plugins/themeplus/includes/config/sample-config.php

Copy it into your theme and rename it — for example:

wp-content/themes/your-theme/inc/themeplus-config.php

Step 2 — Include It in functions.php

In your theme’s functions.php, include the config file:

php

require_once get_template_directory() . '/inc/themeplus-config.php';

Step 3 — Configure the Framework

Inside your config file, call themeplus_framework_config() on the after_setup_theme hook:

php

add_action('after_setup_theme', function () {

    if ( ! function_exists('themeplus_framework_config') ) {
        return;
    }

    $theme = wp_get_theme();

    themeplus_framework_config([
        'display_name' => $theme->get('Name'),
        'opt_name'     => 'my_theme_options',   // Unique DB key — must be unique per theme
        'menu_slug'    => 'my-theme-settings',
        'menu_title'   => __('Theme Settings', 'your-textdomain'),
        'menu_icon'    => 'dashicons-admin-appearance',
        'text_domain'  => 'your-textdomain',
    ]);

});

Important: Always set a unique opt_name. If two themes share the same key, their settings will collide in the database.

Step 4 — Add a Section and Fields

php

add_action('init', function () {

    if ( ! function_exists('themeplus_add_section') ) {
        return;
    }

    themeplus_add_section([
        'id'     => 'general',
        'title'  => __('General Settings', 'your-textdomain'),
        'icon'   => 'cog',
        'fields' => [
            [
                'id'      => 'enable_preloader',
                'type'    => 'toggle',
                'title'   => __('Enable Preloader', 'your-textdomain'),
                'default' => true,
            ],
            [
                'id'      => 'primary_color',
                'type'    => 'color',
                'title'   => __('Primary Color', 'your-textdomain'),
                'default' => '#2271b1',
            ],
            [
                'id'      => 'body_font',
                'type'    => 'typography',
                'title'   => __('Body Typography', 'your-textdomain'),
                'default' => [
                    'font-family' => 'Inter',
                    'font-size'   => '16',
                    'font-weight' => '400',
                ],
            ],
        ],
    ]);

});

Save the file and reload your WordPress admin — your theme’s settings menu should now appear in the sidebar.

Step 5 — Use Options in Your Theme

Retrieve saved values anywhere in your theme using themeplus_get_option():

php

// Get a single option
$color = themeplus_get_option('primary_color', '#2271b1');

// Get all options at once (recommended when using multiple fields)
$options = themeplus_get_option();
$color   = $options['primary_color'] ?? '#2271b1';
$enabled = $options['enable_preloader'] ?? true;

A practical example — outputting a CSS custom property in your theme header:

php

$primary_color = themeplus_get_option('primary_color', '#2271b1');

echo '<style>
    :root {
        --primary-color: ' . esc_attr($primary_color) . ';
    }
</style>';

And a conditional example using a toggle field:

php

$enable_preloader = themeplus_get_option('enable_preloader', true);

if ($enable_preloader) {
    echo '<div class="preloader"></div>';
}

What’s Next?

Now that ThemePlus is set up, explore the rest of the documentation:

Framework Configuration — full white-label config options
Sections & Subsections — organising your options panel
Field Types — all 30 field types with usage examples
Conditional Logic — show and hide fields dynamically

Quick Links