Cara Menambahkan Submenu di Plugin WordPress (Panduan Lengkap + Contoh Kode)

Meta description: Pelajari cara menambahkan submenu (menu dropdown) di plugin WordPress dengan add_submenu_page(). Disertai contoh kode, studi kasus sederhana, tips keamanan, dan prompt gambar. SEO-friendly untuk pemula hingga menengah.

Kata kunci utama

menambahkan submenu plugin WordPress
add_submenu_page WordPress
membuat menu admin WordPress
contoh plugin WordPress
cara membuat submenu di plugin

TL;DR

Gunakan add_menu_page() untuk membuat menu utama dan add_submenu_page() untuk menambahkan submenu.
Pastikan parent_slug submenu sama dengan menu_slug di menu utama.
Buat fungsi callback untuk menampilkan halaman submenu.
(Opsional) Daftarkan opsi dengan register_setting() jika menyimpan data.

Studi Kasus General: “TokoKu”

Bayangkan Anda membuat plugin bernama “TokoKu” untuk mengelola produk. Anda ingin menu admin “TokoKu” memiliki submenu:

Dashboard (halaman utama)
Pengaturan
Bantuan

Di bawah ini contoh paling sederhana dan mudah dipahami.

Struktur Dasar Plugin

Buat file tokoku.php di folder wp-content/plugins/tokoku/:

<?php
/*
Plugin Name: TokoKu
Description: Contoh plugin sederhana untuk demo submenu.
Version: 1.0
Author: Anda
*/

if (!defined('ABSPATH')) exit;

// 1) Tambah Menu Utama + Submenu
add_action('admin_menu', 'tokoku_register_menus');
function tokoku_register_menus() {
    // Menu utama
    add_menu_page(
        'TokoKu Dashboard',        // page title
        'TokoKu',                  // menu title
        'manage_options',          // capability
        'tokoku-dashboard',        // menu slug (dipakai juga sebagai parent_slug)
        'tokoku_page_dashboard',   // callback
        'dashicons-store',         // icon
        25                         // position (opsional)
    );

    // Submenu 1: Dashboard (biasanya WordPress otomatis menambah, tapi kita eksplisitkan agar konsisten)
    add_submenu_page(
        'tokoku-dashboard',        // parent slug (harus sama dengan menu slug di atas)
        'Dashboard TokoKu',        // page title
        'Dashboard',               // menu title
        'manage_options',          // capability
        'tokoku-dashboard',        // submenu slug (sama dengan parent agar mengarah ke halaman utama)
        'tokoku_page_dashboard'    // callback
    );

    // Submenu 2: Pengaturan
    add_submenu_page(
        'tokoku-dashboard',
        'Pengaturan TokoKu',
        'Pengaturan',
        'manage_options',
        'tokoku-settings',
        'tokoku_page_settings'
    );

    // Submenu 3: Bantuan
    add_submenu_page(
        'tokoku-dashboard',
        'Bantuan TokoKu',
        'Bantuan',
        'manage_options',
        'tokoku-help',
        'tokoku_page_help'
    );
}

// 2) Callback halaman: Dashboard
function tokoku_page_dashboard() {
    ?>
    <div class="wrap">
        <h1>Dashboard TokoKu</h1>
        <p>Selamat datang di dashboard TokoKu.</p>
    </div>
    <?php
}

// 3) Callback halaman: Pengaturan (dengan form)
function tokoku_page_settings() {
    // Ambil nilai option
    $default_status = get_option('tokoku_default_status', 'draft');
    ?>
    <div class="wrap">
        <h1>Pengaturan TokoKu</h1>
        <form method="post" action="options.php">
            <?php
            settings_fields('tokoku_options_group');   // group
            do_settings_sections('tokoku_options_group');
            ?>
            <table class="form-table">
                <tr>
                    <th scope="row">Default Status Produk</th>
                    <td>
                        <select name="tokoku_default_status">
                            <option value="draft" <?php selected($default_status, 'draft'); ?>>Draft</option>
                            <option value="publish" <?php selected($default_status, 'publish'); ?>>Publish</option>
                            <option value="pending" <?php selected($default_status, 'pending'); ?>>Pending</option>
                        </select>
                    </td>
                </tr>
            </table>
            <?php submit_button('Simpan Pengaturan'); ?>
        </form>
    </div>
    <?php
}

// 4) Callback halaman: Bantuan
function tokoku_page_help() {
    ?>
    <div class="wrap">
        <h1>Bantuan TokoKu</h1>
        <p>Butuh bantuan? Hubungi kami atau baca dokumentasi.</p>
        <ol>
            <li>Cek pengaturan terlebih dahulu.</li>
            <li>Pastikan user memiliki capability yang tepat.</li>
            <li>Lihat log error jika ada masalah.</li>
        </ol>
    </div>
    <?php
}

// 5) Registrasi setting (opsional, bila menyimpan data)
add_action('admin_init', 'tokoku_register_settings');
function tokoku_register_settings() {
    register_setting('tokoku_options_group', 'tokoku_default_status');
}

Penjelasan Kunci

add_menu_page()
- Membuat menu utama di sidebar admin.
- menu_slug di sini adalah tokoku-dashboard. Slug ini penting karena dipakai sebagai parent_slug untuk semua submenu.
add_submenu_page()
- Menambahkan submenu di bawah menu utama.
- parent_slug harus sama dengan menu_slug pada add_menu_page().
- Anda bisa membuat beberapa submenu dengan slug yang berbeda: tokoku-settings, tokoku-help, dll.
Callback halaman
- Setiap submenu butuh fungsi callback untuk menampilkan isi halaman (HTML/Form).
register_setting()
- Diperlukan jika Anda menyimpan data pengaturan melalui options.php.
- Pastikan settings_fields('group') sama dengan register_setting('group', 'option_name').

Tips Penting (Agar Rapi dan Aman)

Capability
- Gunakan manage_options untuk admin saja. Jika perlu akses role lain, sesuaikan capability (misal edit_posts).
Hapus duplikasi “submenu ke halaman utama”
- WordPress sering menambahkan item submenu yang sama dengan menu utama.
- Cara rapi: tetap eksplisitkan Dashboard seperti contoh agar urutan konsisten dan mudah dikontrol.
Urutan dan posisi
- Anda bisa mengatur urutan tampilan dengan menempatkan pemanggilan add_submenu_page() sesuai prioritas.
Keamanan form
- Selalu gunakan settings_fields() saat menyimpan ke options.php agar nonce diverifikasi otomatis.

Troubleshooting Singkat

Submenu tidak muncul
- Cek parent_slug harus sama persis dengan menu_slug menu utama.
- Cek capability user yang login.
- Pastikan hook admin_menu terpasang.
Form tidak menyimpan
- Cek settings_fields('group') dan register_setting('group', 'option') harus sama.
- Pastikan method="post" action="options.php" pada form.
Icon tidak tampil
- Pastikan icon menggunakan Dashicons yang valid, misal dashicons-store.

FAQ Singkat

Apakah wajib menambahkan submenu “Dashboard”?
- Tidak wajib, tapi baik untuk konsistensi. Banyak plugin tetap menampilkannya agar user mudah kembali ke halaman utama.
Bisa menambahkan submenu yang membuka halaman eksternal?
- Ya, bisa. Pada callback, cukup gunakan wp_redirect() ke URL eksternal lalu exit;, atau isi halaman dengan link/iframe.
Bagaimana membatasi submenu hanya untuk role tertentu?
- Gunakan capability yang sesuai, atau tambahkan pengecekan di callback (mis. current_user_can('editor')).

Penutup

Dengan add_menu_page() dan add_submenu_page(), Anda dapat membangun navigasi admin plugin yang rapi, terstruktur, dan mudah digunakan. Mulailah dari studi kasus sederhana seperti “TokoKu”, lalu kembangkan sesuai kebutuhan proyek Anda.

Post Views: 8