Sections & Subsections

Overview

ThemePlus organises all fields into sections, which appear as menu items in the sidebar navigation. Sections can contain fields directly, nested subsections, or both. Priority-based ordering gives you full control over where each section and subsection appears.

---

Adding a Section

Use themeplus_add_section() on the init hook to register a section:

php

add_action('init', function () {

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

    themeplus_add_section([
        'id'     => 'general',
        'title'  => __('General Settings', 'your-textdomain'),
        'icon'   => 'fa-solid fa-cog',
        'fields' => [
            // your fields here
        ],
    ]);

});

---

Section Options

Option	Type	Required	Description
id	string	✅	Unique identifier for the section
title	string	✅	Label shown in the sidebar
icon	string	—	FontAwesome icon class (e.g. fa-solid fa-cog)
fields	array	✅	Array of field config arrays
subsections	array	—	Array of subsection config arrays
priority	int	—	Sort order — lower numbers appear first

---

Adding Fields to a Section

Fields are defined inline inside the fields array of the section:

php

themeplus_add_section([
    'id'     => 'colors',
    'title'  => __('Colors', 'your-textdomain'),
    'icon'   => 'fa-solid fa-palette',
    'fields' => [
        [
            'id'      => 'primary_color',
            'type'    => 'color',
            'title'   => __('Primary Color', 'your-textdomain'),
            'default' => '#2271b1',
        ],
        [
            'id'      => 'secondary_color',
            'type'    => 'color',
            'title'   => __('Secondary Color', 'your-textdomain'),
            'default' => '#646970',
        ],
    ],
]);

---

Adding Subsections

Subsections appear as nested child items under their parent section in the sidebar. Define them inside the subsections key:

php

themeplus_add_section([
    'id'          => 'header',
    'title'       => __('Header', 'your-textdomain'),
    'icon'        => 'fa-solid fa-rectangle-ad',
    'fields'      => [], // top-level fields (optional)
    'subsections' => [
        [
            'id'     => 'logo',
            'title'  => __('Logo', 'your-textdomain'),
            'fields' => [
                [
                    'id'    => 'logo_image',
                    'type'  => 'image',
                    'title' => __('Logo Image', 'your-textdomain'),
                ],
                [
                    'id'      => 'logo_width',
                    'type'    => 'number',
                    'title'   => __('Logo Width', 'your-textdomain'),
                    'default' => 150,
                    'unit'    => 'px',
                ],
            ],
        ],
        [
            'id'     => 'navigation',
            'title'  => __('Navigation', 'your-textdomain'),
            'fields' => [
                [
                    'id'      => 'sticky_nav',
                    'type'    => 'toggle',
                    'title'   => __('Sticky Navigation', 'your-textdomain'),
                    'default' => true,
                ],
            ],
        ],
    ],
]);

---

Subsection Options

Option	Type	Required	Description
id	string	✅	Unique identifier for the subsection
title	string	✅	Label shown in the sidebar
fields	array	✅	Array of field config arrays

Subsections do not support icons or nested subsections — only one level of nesting is supported.

---

Priority-Based Ordering

Use the priority key to control where a section appears in the sidebar. Sections are sorted in ascending order — lower numbers appear first.

php

themeplus_add_section([
    'id'       => 'general',
    'title'    => __('General', 'your-textdomain'),
    'icon'     => 'fa-solid fa-cog',
    'priority' => 10,
    'fields'   => [],
]);

themeplus_add_section([
    'id'       => 'colors',
    'title'    => __('Colors', 'your-textdomain'),
    'icon'     => 'fa-solid fa-palette',
    'priority' => 20,
    'fields'   => [],
]);

themeplus_add_section([
    'id'       => 'typography',
    'title'    => __('Typography', 'your-textdomain'),
    'icon'     => 'fa-solid fa-font',
    'priority' => 30,
    'fields'   => [],
]);

ThemePlus built-in sections (Custom Fonts, Import/Export, Developer Panel) use high priority numbers (90, 100, 999) so they always appear at the bottom of the sidebar.

---

Built-in Sections

ThemePlus registers three sections automatically — you do not need to add these yourself:

Section	Priority	Description
Custom Fonts	90	Self-hosted font upload and management
Import / Export	100	JSON backup and restore for all settings
Developer Panel	999	Field metadata and code snippets — dev mode only

---

Complete Example

A typical theme configuration with multiple sections and subsections:

php

add_action('init', function () {

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

    // General
    themeplus_add_section([
        'id'       => 'general',
        'title'    => __('General', 'your-textdomain'),
        'icon'     => 'fa-solid fa-cog',
        'priority' => 10,
        'fields'   => [
            [
                'id'      => 'enable_preloader',
                'type'    => 'toggle',
                'title'   => __('Enable Preloader', 'your-textdomain'),
                'default' => true,
            ],
        ],
    ]);

    // Header with subsections
    themeplus_add_section([
        'id'          => 'header',
        'title'       => __('Header', 'your-textdomain'),
        'icon'        => 'fa-solid fa-rectangle-ad',
        'priority'    => 20,
        'fields'      => [],
        'subsections' => [
            [
                'id'     => 'logo',
                'title'  => __('Logo', 'your-textdomain'),
                'fields' => [
                    [
                        'id'    => 'logo_image',
                        'type'  => 'image',
                        'title' => __('Logo Image', 'your-textdomain'),
                    ],
                ],
            ],
            [
                'id'     => 'navigation',
                'title'  => __('Navigation', 'your-textdomain'),
                'fields' => [
                    [
                        'id'      => 'sticky_nav',
                        'type'    => 'toggle',
                        'title'   => __('Sticky Navigation', 'your-textdomain'),
                        'default' => true,
                    ],
                ],
            ],
        ],
    ]);

    // Colors
    themeplus_add_section([
        'id'       => 'colors',
        'title'    => __('Colors', 'your-textdomain'),
        'icon'     => 'fa-solid fa-palette',
        'priority' => 30,
        'fields'   => [
            [
                'id'      => 'primary_color',
                'type'    => 'color',
                'title'   => __('Primary Color', 'your-textdomain'),
                'default' => '#2271b1',
            ],
        ],
    ]);

});