Skip to content
Get Started

Quick Links

Gallery Documentation GitHub Dribbble

Quick Start

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

Last updated: June 14, 2026

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

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

Important: When you copy the file, rename the themeplus_sample_get_option function to use your own theme prefix — for example mytheme_get_option. This avoids naming conflicts if multiple ThemePlus-powered themes are active.

Step 2 — Include It in functions.php

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

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. Always wrap it in a function_exists() check — this keeps your theme working even when ThemePlus is not installed:

📄<code>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.

i18n: ThemePlus translates its own fallback strings using the themeplus domain. Every string you pass into themeplus_framework_config() or themeplus_add_section() should be wrapped in __() with your theme’s own text domain — not 'themeplus'.

Step 4 — Add a Section and Fields

Register your first section and fields on the init hook. Wrap in a function_exists() check here too:

📄<code>php
add_action( 'init', function () {

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

    themeplus_add_section([
        'id'     => 'general',
        'title'  => __( 'General Settings', 'your-textdomain' ),
        'icon'   => 'cog',   // FontAwesome name only — the part after 'fa-solid fa-'
        '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' ),
                'font-size'   => true,
                'font-weight' => true,
                'line-height' => true,
                'default'     => [
                    'font-family' => 'Inter',
                    'font-size'   => '16',
                    'font-weight' => '400',
                    'line-height' => '1.6',
                ],
            ],
            [
                'id'    => 'site_logo',
                'type'  => 'image',
                'title' => __( 'Site Logo', 'your-textdomain' ),
                // Returns: { id, url, width, height, alt, title }
            ],
        ],
    ]);

} );

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():

📄<code>php
// Get a single scalar option
$color   = themeplus_get_option( 'primary_color', '#2271b1' );
$enabled = themeplus_get_option( 'enable_preloader', true );

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

Structured fields return arrays — always use the array keys:

📄<code>php
// Image field returns a structured array
$logo     = themeplus_get_option( 'site_logo', [] );
$logo_url = $logo['url'] ?? '';
$logo_alt = $logo['alt'] ?? get_bloginfo( 'name' );

if ( $logo_url ) {
    echo '<img src="' . esc_url( $logo_url ) . '" alt="' . esc_attr( $logo_alt ) . '">';
}

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

📄<code>php
$primary_color = themeplus_get_option( 'primary_color', '#2271b1' );
$body_font     = themeplus_get_option( 'body_font', [] );
$font_family   = $body_font['font-family'] ?? 'system-ui';
$font_size     = $body_font['font-size']   ?? '16';

echo '<style>
    :root {
        --primary-color:   ' . esc_attr( $primary_color ) . ';
        --body-font-family: "' . esc_attr( $font_family ) . '", sans-serif;
        --body-font-size:  ' . absint( $font_size ) . 'px;
    }
</style>';

A conditional example using a toggle field:

📄<code>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:

On This Page