Bagaimana Cara Membuat Custom Admin Page dan Menu di Wordpress dari Awal Part 1 (Terupdate)

Tutorial membuat custom admin page dan menu di wordpress

5 min readJul 14, 2024

Bagaimana Cara Membuat Custom Admin Page dan Menu di Wordpress dari Awal Part 1 (Terupdate)

WordPress adalah salah satu CMS paling populer untuk pengembang, dengan banyak fitur kustomisasi dan fleksibilitas, termasuk perluasan area admin WordPress. Menu Admin Kustom dan Halaman di WordPress adalah opsi untuk membuat menu admin kustom dengan halaman konten untuk plugin atau tema Anda.

Terkadang, plugin WordPress Anda memerlukan menu admin di Dashboard untuk menampilkan beberapa laporan atau halaman pengaturan. Untuk melakukan ini, Anda perlu membuat Menu Admin Kustom dan Halaman Admin untuk memperluas WordPress. Membuat menu admin dan halaman admin tidaklah sulit. Ikuti tutorial ini untuk mempelajari cara membuat halaman admin dan menu kustom di CMS WordPress dari awal tanpa plugin tambahan.

Dalam tutorial singkat ini, kami akan melihat panduan lengkap tentang cara menambahkan halaman admin kustom dan menunya ke Dashboard WordPress dari awal tanpa plugin.

Pastikan Anda familiar dengan item berikut:

Pengembangan plugin WordPress
Pengembangan PHP
HTML
CSS
Interaksi dengan database WordPress
Data Sanitization dan Validation di WordPress

Jika Anda belum familiar dengan item-item di atas, jangan khawatir, kami akan menjelaskan semuanya dengan sesederhana mungkin.

Apa Itu Menu dan Halaman Admin Kustom WordPress?

Setelah masuk ke Dashboard admin, Anda dapat melihat menu di sisi kiri dan situs RTL di sisi kanan. Menu ini berisi beberapa menu dasar seperti Tampilan, Plugin, Pengaturan, Pengguna, dan lain-lain.

Setelah mengaktifkan tema atau plugin, jumlah menu mungkin bertambah. Menu baru ini dapat mencakup halaman pengaturan plugin, panel kontrol tema, atau menu lainnya. Menu dan Halaman Admin Kustom adalah fitur yang memungkinkan pengembang WordPress untuk memperluas area admin WordPress sesuai kebutuhan mereka.

Terdapat dua jenis entri menu: top level dan sub-level.

Bagian-Bagian dari Menu dan Halaman Admin

1. Bagian-Bagian dari Menu dan Halaman Admin

Entri Menu — tingkat atas atau sub-level
Konten Halaman
Logika Pemrosesan untuk Formulir — jika diperlukan

2. Menu Tingkat Atas dan Sub-Level

Menu Admin Tingkat Atas adalah menu yang dapat Anda lihat di sidebar Dashboard, seperti “Media”, “Komentar”, dan lain-lain.
Menu Sub-Level dapat ditemukan di dalam menu tingkat atas, seperti “Pengaturan -> Membaca”. “Membaca” adalah menu sub-level dari “Pengaturan”, sementara “Pengaturan” adalah menu tingkat atas.

Cara Membuat Halaman dan Menu Admin Tingkat Atas di WordPress

Untuk membuat Halaman dan top level Menu Admin kustom di WordPress, kita harus membuat entri menu terlebih dahulu. Untuk menambahkan menu admin, kita menggunakan fungsi add_menu_page yang kita kenalkan ke WordPress. Fungsi ini akan menambahkan menu dan kemudian memanggil fungsi callback untuk mengelola konten halaman admin.

Berikut adalah langkah-langkah dasar untuk membuat Halaman dan Menu Admin tingkat atas:

Tambahkan Fungsi untuk Membuat Menu
Tambahkan kode berikut ke dalam file function.php yang ada di folder wp-content > themes > [Pilih Folder Tema yang kalian aktifkan di wordpress] > function.php:

//Contoh dan Penjelasan kodingan

function my_custom_menu_page() {
    add_menu_page(
        'Custom Menu Title',       // Judul menu
        'Custom Menu',             // Nama menu
        'manage_options',          // Kemampuan yang dibutuhkan untuk melihat menu
        'custom-menu-slug',        // Slug menu
        'my_custom_menu_page_content', // Fungsi callback untuk konten halaman
        'dashicons-admin-generic', // Ikon menu
        6                          // Posisi menu
    );
}
add_action('admin_menu', 'my_custom_menu_page');

function my_admin_menu()
{
    add_menu_page(
        __('Page Title - Acture Systems', 'my-textdomain'),
        __('Category', 'my-textdomain'),
        'manage_options',
        'sample-page',
        'my_admin_page_contents',
        'dashicons-schedule',
        3
    );
}

add_action('admin_menu', 'my_admin_menu');

2. Tambahkan Fungsi Callback untuk Konten Halaman Tambahkan fungsi yang akan menampilkan konten halaman admin:

function my_admin_page_contents()
{
 echo '<h1>Ini adalah Halaman Admin Kustom</h1>';
    echo '<p>Konten kustom Anda dapat ditambahkan di sini.</p>';
}

Dengan mengikuti langkah-langkah ini, Anda akan memiliki Halaman dan Menu Admin tingkat atas kustom di Dashboard WordPress. Anda dapat menyesuaikan konten dan gaya halaman sesuai kebutuhan Anda.

Cara Menambahkan Sub Menu dan Halaman Sub-Level

Anda mungkin ingin membuat submenu admin WordPress kustom untuk menu tingkat atas Anda sendiri. Berikut adalah langkah-langkah untuk menambahkan submenu ke menu tersebut.

Struktur submenu akan seperti berikut ini:

Tambahkan Fungsi untuk Membuat Sub Menu
Tambahkan kode berikut ke dalam file function.php yang ada di folder wp-content > themes > [Pilih Folder Tema yang kalian aktifkan di wordpress] > function.php:

function my_custom_menu_page() {
    add_menu_page(
        'Custom Menu Title',       // Judul menu
        'Custom Menu',             // Nama menu
        'manage_options',          // Kemampuan yang dibutuhkan untuk melihat menu
        'custom-menu-slug',        // Slug menu
        'my_custom_menu_page_content', // Fungsi callback untuk konten halaman
        'dashicons-admin-generic', // Ikon menu
        6                          // Posisi menu
    );

    add_submenu_page(
        'custom-menu-slug',            // Slug dari menu induk
        'Custom Submenu Title',        // Judul submenu
        'Custom Submenu',              // Nama submenu
        'manage_options',              // Kemampuan yang dibutuhkan untuk melihat submenu
        'custom-submenu-slug',         // Slug submenu
        'my_custom_submenu_page_content' // Fungsi callback untuk konten halaman submenu
    );
}
add_action('admin_menu', 'my_custom_menu_page');

function my_admin_menu()
{
    add_menu_page(
        __('Page Title - Acture Systems', 'my-textdomain'),
        __('Category', 'my-textdomain'),
        'manage_options',
        'sample-page',
        'my_admin_page_contents',
        'dashicons-schedule',
        3
    );

    add_submenu_page('sample-page',
        __('Page Title - Acture Systems', 'my-textdomain'),
        __('List Category', 'my-textdomain'),
        'manage_options',
        'sample-page-sub-menu',
        'my_sub_menu_admin_page_contents');

}

add_action('admin_menu', 'my_admin_menu');

2. Tambahkan Fungsi Callback untuk Konten Halaman Submenu Tambahkan fungsi yang akan menampilkan konten halaman submenu:

function my_custom_submenu_page_content() {
    echo '<h1>Ini adalah Halaman Submenu Admin Kustom</h1>';
    echo '<p>Konten kustom Anda dapat ditambahkan di sini.</p>';
}

Hasil custom sub menu di admin wordpress

Dengan mengikuti langkah-langkah ini, Anda akan memiliki submenu kustom di bawah menu tingkat atas di Dashboard WordPress Anda. Anda dapat menyesuaikan konten dan gaya halaman sesuai kebutuhan Anda.

Kesimpulan

Dalam tutorial ini, kami telah membahas cara membuat Halaman dan Menu Admin tingkat atas serta cara menambahkan Sub Menu dan Halaman Sub-Level di WordPress. Dengan mengikuti langkah-langkah di atas, Anda dapat memperluas area admin WordPress untuk menyesuaikan kebutuhan plugin atau tema Anda, menambahkan fungsi baru, dan menyediakan antarmuka yang lebih baik untuk pengguna.

Apa yang Telah Kita Pelajari:

Menambahkan Menu Tingkat Atas:

Menggunakan fungsi add_menu_page untuk membuat entri menu tingkat atas.
Menambahkan fungsi callback untuk mengelola konten halaman admin tingkat atas.

2. Menambahkan Sub Menu:

Menggunakan fungsi add_submenu_page untuk membuat submenu di bawah menu tingkat atas.
Menambahkan fungsi callback untuk mengelola konten halaman submenu.

Pada tutorial selanjutnya, kita akan membahas cara membuat halaman menu admin kustom berbasis CRUD (Create, Read, Update, Delete). Ini akan memungkinkan Anda untuk membuat aplikasi yang lebih dinamis dan interaktif di dalam Dashboard WordPress Anda. Jangan lewatkan tutorial berikutnya untuk mempelajari cara membuat halaman CRUD di WordPress!