Contoh Lengkap Boilerplate

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;
}