Contoh Lengkap Implementasi MadOptions
Berikut adalah contoh kode implementasi lengkap dari inisialisasi panel, pendaftaran section, deklarasi berbagai macam tipe field dengan dependencies, hingga helper front-end siap pakai:
Kode Lengkap (theme-options-init.php)
PHP
<?php
/**
* Contoh Implementasi MadOptions Reusable Theme Settings
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
// 1. Muat framework MadOptions
require_once get_template_directory() . '/madoptions/madoptions.php';
// 2. Inisialisasi Panel Opsi
add_action( 'after_setup_theme', 'my_theme_register_options_panel' );
function my_theme_register_options_panel() {
if ( ! class_exists( 'MadOptions' ) ) {
return;
}
$panel = new MadOptions( array(
'id' => 'my_theme_panel',
'title' => 'Pengaturan Tema MadOptions',
'menu_title' => 'Theme Options',
'capability' => 'manage_options',
'menu_slug' => 'my-theme-options',
'parent_slug' => 'themes.php',
'option_name' => 'my_theme_settings',
) );
// Header & Footer Kustom
$panel->set_header( '<div class="notice notice-info inline"><p>Selamat datang di panel konfigurasi resmi.</p></div>' );
$panel->set_footer( '<p style="color:#888; font-size:12px;">MadOptions Engine v1.0</p>' );
// ==========================================
// SECTION 1: General
// ==========================================
$panel->add_section( array(
'id' => 'general',
'title' => 'General & Brand',
'icon' => 'dashicons-admin-generic',
'desc' => 'Pengaturan identitas brand dan logo situs.',
) );
$panel->add_field( array(
'id' => 'brand_title',
'section' => 'general',
'type' => 'text',
'title' => 'Nama Brand',
'default' => 'XIONIC',
) );
$panel->add_field( array(
'id' => 'brand_logo',
'section' => 'general',
'type' => 'image',
'title' => 'Upload Logo',
'desc' => 'Disarankan logo berlatar transparan (SVG / WebP).',
) );
$panel->add_field( array(
'id' => 'primary_color',
'section' => 'general',
'type' => 'color',
'title' => 'Warna Primer',
'default' => '#1e3a8a',
) );
// ==========================================
// SECTION 2: Header & Navigasi (Dengan Dependencies)
// ==========================================
$panel->add_section( array(
'id' => 'header',
'title' => 'Header & Navigasi',
'icon' => 'dashicons-heading',
'desc' => 'Konfigurasi susunan header dan bar promosi.',
) );
$panel->add_field( array(
'id' => 'header_layout',
'section' => 'header',
'type' => 'select',
'title' => 'Pilihan Layout Header',
'default' => 'default',
'options' => array(
'default' => 'Default — Simpel Sejajar',
'magazine' => 'Magazine — Logo Atas & Banner Iklan',
),
) );
// Dependen: Hanya muncul jika header_layout = 'magazine'
$panel->add_field( array(
'id' => 'magazine_ad_banner',
'section' => 'header',
'type' => 'image',
'title' => 'Gambar Banner Iklan Header',
'depends_on' => array( 'header_layout' => 'magazine' ),
) );
$panel->add_field( array(
'id' => 'enable_topbar',
'section' => 'header',
'type' => 'switch',
'title' => 'Aktifkan Top Bar Pengumuman',
'default' => '0',
) );
// Dependen: Hanya muncul jika enable_topbar = '1'
$panel->add_field( array(
'id' => 'topbar_text',
'section' => 'header',
'type' => 'text',
'title' => 'Teks Pesan Pengumuman',
'default' => 'Gratis ongkir untuk seluruh pesanan hari ini!',
'depends_on' => array( 'enable_topbar' => '1' ),
) );
// ==========================================
// SECTION 3: Tipografi
// ==========================================
$panel->add_section( array(
'id' => 'typography',
'title' => 'Tipografi',
'icon' => 'dashicons-editor-textcolor',
) );
$panel->add_field( array(
'id' => 'body_typo',
'section' => 'typography',
'type' => 'typography',
'title' => 'Tipografi Body Teks',
'default' => array(
'family' => 'inter',
'size' => '16px',
'line_height' => '1.6',
'weight' => '400',
'color' => '#1f2937',
),
) );
}
// 3. Helper Pengambilan Data di Sisi Front-End
function get_theme_setting( $key, $default = '' ) {
static $settings = null;
if ( null === $settings ) {
$settings = get_option( 'my_theme_settings', array() );
}
return isset( $settings[ $key ] ) ? $settings[ $key ] : $default;
}