How to Create Admin Options Pages Using Voxycure Framework

<?php

/**
 * Register a Theme Settings page + fields (Voxycure theme settings implementation)
 *
 * Uses the actual filters implemented by Theme_Settings class:
 * - voxycure_option_pages
 *
 * The settings are stored under the option key: 'voxycure_settings'
 */

/**
 * Register (or extend) settings pages.
 */
add_filter('voxycure_option_pages', function ($pages) {

	// Add a page entry. The Theme_Settings class will merge/consume these entries.
	$pages[] = [
		'name'          => __('Theme Settings', 'voxycure'),
		'type'          => 'options-page',           // 'options-page' (page type used by theme)
		'status'        => 'active',                 // 'active' or 'inactive'
		'slug'          => 'voxycure-settings',      // unique slug used to reference fields + option group
		'option_key'    => 'voxycure_settings',      // where values are saved in wp_options
		'capability'    => 'manage_options',         // WP capability required to view page
		'tab_alignment' => 'vertical',               // UI hint (vertical | horizontal)
		'tabs'          => [                         // tab configuration for the page UI
			['value' => 'colors', 'label' => __('Colors', 'voxycure')],
			['value' => 'header', 'label' => __('Header', 'voxycure')],
			['value' => 'footer', 'label' => __('Footer', 'voxycure')],
		],
		// Fields live INSIDE this same array (not using separate hook)
		'fields' => [

			// ---------------- colors TAB ----------------
			[
				'type'      => 'color',
				'label'     => __('Primary Color', 'voxycure'),
				'field_key' => 'primary_color',
				'tab'       => 'colors',
				'default_value'   => '#1d49c3',
			],
			[
				'type'      => 'color',
				'label'     => __('Secondary Color', 'voxycure'),
				'field_key' => 'secondary_color',
				'tab'       => 'colors',
				'default_value'   => '#030303',
			],

			// ---------------- Header TAB ----------------
			[
				'type'      => 'image',
				'label'     => __('Logo', 'voxycure'),
				'field_key' => 'logo',
				'tab'       => 'header',
			],
			[
				'type'      => 'link_button',
				'label'     => __('Header Button', 'voxycure'),
				'field_key' => 'header_button',
				'tab'       => 'header',
			],

			// ---------------- Footer  TAB ----------------
			[
				'type'      => 'image',
				'label'     => __('Footer Logo', 'voxycure'),
				'field_key' => 'logo',
				'tab'       => 'footer',
			],
			[
				'type'      => 'textarea',
				'label'     => __('About the Company', 'voxycure'),
				'field_key' => 'about_company',
				'tab'       => 'footer',
			],
		],
	];

	return $pages;
});

<?php

// Get a single option value
$primary_color = voxycure_get_option('voxycure_settings.colors.primary_color');

// Optional fallback default value
$logo = voxycure_get_option('voxycure_settings.header.logo', 'Default logo URL');

// Print value safely
echo esc_html($primary_color);