Admin Menu, Sub-Menu & Custom Icon

Gambaran Umum

Video ini membahas cara membuat custom admin menu dan sub-menu di sidebar WordPress, serta menggunakan custom SVG icon untuk menu plugin.

---

add_menu_page() — Membuat Menu Utama Baru

Berbeda dengan add_options_page() yang menambahkan halaman di bawah menu "Settings", add_menu_page() membuat menu baru sendiri di sidebar admin.

function adminPage() {
  // Menu utama
  $mainPageHook = add_menu_page(
    'Word Filter',              // 1. Page title (tab browser)
    'Word Filter',              // 2. Menu text (sidebar)
    'manage_options',           // 3. Capability
    'ourwordfilter',            // 4. Slug
    array($this, 'wordFilterPage'),  // 5. HTML callback
    'dashicons-smiley',         // 6. Icon (dashicon name)
    100                         // 7. Position (urutan di sidebar)
  );

7 Argumen:

#	Argumen	Keterangan
1	Page title	Judul di tab browser
2	Menu text	Teks yang muncul di sidebar
3	Capability	'manage_options' = hanya admin
4	Slug	URL unik halaman
5	Callback	Function yang generate HTML
6	Icon	Dashicon name atau URL/SVG
7	Position	Angka urutan (semakin besar = semakin bawah)

Return value: add_menu_page() mengembalikan hook suffix yang bisa digunakan untuk load CSS/JS khusus halaman tersebut.

---

add_submenu_page() — Membuat Sub-Menu

  // Sub-menu pertama (override teks default "Word Filter")
  add_submenu_page(
    'ourwordfilter',              // 1. Parent slug (sama dengan slug menu utama)
    'Words To Filter',            // 2. Page title
    'Words List',                 // 3. Menu text
    'manage_options',             // 4. Capability
    'ourwordfilter',              // 5. Slug (SAMA dengan parent = override teks)
    array($this, 'wordFilterPage')  // 6. Callback
  );

  // Sub-menu kedua (halaman Options)
  add_submenu_page(
    'ourwordfilter',              // Parent slug
    'Word Filter Options',        // Page title
    'Options',                    // Menu text
    'manage_options',             // Capability
    'word-filter-options',        // Slug (BEDA = halaman baru)
    array($this, 'optionsSubPage')  // Callback
  );
}

Trik: Override Teks Menu Utama

Secara default, sub-menu pertama akan memiliki teks yang sama dengan menu utama. Untuk mengubahnya:

• Buat add_submenu_page() dengan slug yang SAMA dengan parent
• Ini akan mengganti teks sub-menu pertama (dari "Word Filter" menjadi "Words List")

---

Custom SVG Icon — Base64 Encoding

Alih-alih menggunakan Dashicons bawaan Word Press, kamu bisa menggunakan custom SVG icon:

Metode 1: Inline Base64 SVG

add_menu_page(
  'Word Filter',
  'Word Filter',
  'manage_options',
  'ourwordfilter',
  array($this, 'wordFilterPage'),
  'data:image/svg+xml;base64,PHN2ZyB3aWR...',  // Base64 encoded SVG
  100
);

Cara Mendapatkan Base64 String:

1. Buka Chrome DevTools Console
2. Jalankan:

   btoa('<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path fill="currentColor" d="M10 ..."/></svg>')

3. Copy hasilnya
4. Prefix dengan 'data:image/svg+xml;base64,'

Keuntungan Base64 SVG:

• WordPress otomatis mengatur warna fill SVG (abu-abu default, biru saat hover)
• Icon akan terlihat konsisten dengan icon admin lainnya

Metode 2: URL ke File SVG

add_menu_page(
  ...
  plugin_dir_url(__FILE__) . 'custom.svg',  // Path ke file SVG
  100
);

Catatan: Jika menggunakan metode URL, WordPress tidak mengatur warna fill otomatis. Kamu bisa menggunakan warna custom sendiri. Ukuran yang disarankan: 20x20px.

---

Custom CSS Per Halaman Admin

Untuk memuat CSS hanya di halaman admin tertentu:

function __construct() {
  add_action('admin_menu', array($this, 'adminPage'));
  // ... hooks lainnya
}

function adminPage() {
  $mainPageHook = add_menu_page(...);  // Simpan return value
  add_action("load-{$mainPageHook}", array($this, 'mainPageAssets'));
}

function mainPageAssets() {
  wp_enqueue_style('filterAdminCss', plugin_dir_url(__FILE__) . 'styles.css');
}

Penjelasan:

• $mainPageHook — return value dari add_menu_page(), unik untuk halaman tersebut
• "load-{$mainPageHook}" — Action hook yang hanya dijalankan saat halaman spesifik dimuat
• wp_enqueue_style() — Memuat file CSS
• CSS ini hanya dimuat saat user membuka halaman plugin ini, bukan di seluruh admin

---

Struktur Menu yang Dihasilkan

WordPress Admin Sidebar
  ├── Dashboard
  ├── Posts
  ├── Media
  ├── ...
  ├── Settings
  │   └── Word Count  ← add_options_page (plugin Word Count)
  └── Word Filter  ← add_menu_page (plugin Word Filter, posisi 100)
      ├── Words List  ← add_submenu_page (override)
      └── Options     ← add_submenu_page (halaman baru)