Membuat Menu dan Submenu dalam Plugin WordPress

Contoh Kasus:

Saya ingin membuat sebuah menu bernama PSB Online yang mempunya tiga submenu yaitu:

  • Add/Edit
  • Daftar
  • PSB Blog

Seperti terlihat pada gambar dibawah ini:

Pertanyaan:

Bagaimana cara membuatnya … ?

Jawaban:

Buatlah sebuah file bernama psb.php lalu isi dengan kode berikut ini:

<?php 

/*

Plugin Name: PSB Online

Plugin URI: http://psb.a2fahmi.com

Description: Informasi Real Time tentang pendaftaran siswa baru

Version: 1.0

Author: Fahmi Basya

Author URI: http://www.a2fahmi.com

*/

 

function buatHalaman() {

$cap=”8″;

add_menu_page(‘PSB Online’, ‘PSB Online’, $cap, ‘awal’, ‘home’,plugins_url(). ‘/psb/psbIcon.png’, 6);

add_submenu_page(‘awal’, “Add/Edit PSB “, “Add/Edit”, $cap,  ‘awal’, ‘home’);

add_submenu_page(‘awal’, “Daftar PSB”, “Daftar”, $cap, ‘psbTampil’, ‘tampilkanDaftar’);

add_submenu_page(‘awal’, “PSB Blog”, “PSB Blog”, $cap, ‘psbBlog’ , ‘tampilkanBlog’);

}

add_action(‘admin_menu’, ‘buatHalaman’);

function home(){

echo “<div class=’wrap’>”;

echo “Ini halaman Home dari PSB”;

echo “</div>”;

}

function tampilkanDaftar(){

echo “<div class=’wrap’>”;

echo “tampilDaftar”;

echo “</div>”;

}

function tampilkanBlog(){

echo “<div class=’wrap’>”;

echo “tampilBlog”;

echo “</div>”;

}

?>

Keterangan:

  • add_menu_page(‘PSB Online’, ‘PSB Online’, $cap, ‘awal’, ‘home’,plugins_url(). ‘/psb/psbIcon.png’, 6), Kode ini berarti saya membuat sebuah menu yang bertuliskan PSB Online, dengan judul PSB Online pada jendela browser, dengan capabilities user level 8, dengan id bernama ‘awal’, lalu jika menu ini diklik maka akan menjalankan fungsi home, serta menu ini akan mempnyai icon yang bernama psbIcon.png dan terletak di bawah menu Post (untuk detail dokumentasi dari fungsi add_menu_page maka bisa dilihat disini).
  • add_submenu_page(‘awal’, “Add/Edit PSB “, “Add/Edit”, $cap,  ‘awal’, ‘home’), Kode ini berarti saya membuat sebuah submenu bernama “Add/Edit” dalam menu yang mempunyai id yang bernama ‘awal’, ketika menu ini diklik maka jendela browser akan menampilkan judul “Add/Edit”, menu ini mempunyai capabities user level 8 serta mempunyai id bernama ‘awal’, ketika menu ini diklik maka akan menjalankan fungsi home (untuk dokumentasi detail mengenai fungsi add_submenu_page maka bisa kamu lihat disini).
  • add_submenu_page(‘awal’, “Daftar PSB”, “Daftar”, $cap, ‘psbTampil’, ‘tampilkanDaftar’), Kode ini berarti saya membuat sebuah submenu bernama “Daftar” dalam menu yang mempunyai id yang bernama ‘awal’, ketika menu ini diklik maka jendela browser akan menampilkan judul “Daftar PSB”, menu ini mempunyai capabities user level 8 serta mempunyai id bernama ‘psbTampil’, ketika menu ini diklik maka akan menjalankan fungsi tampilkanDaftar (untuk dokumentasi detail mengenai fungsi add_submenu_page maka bisa kamu lihat disini ).
  • add_action(‘admin_menu’, ‘buatHalaman’), Kode ini berarti saya menambahkan fungsi buatHalaman ke dalam action ‘admin_menu’.

Pertanyaan:

Kenapa submenu ‘Add/Edit’ mempunyai id yang sama dengan menu ‘PSB Online’…?

Jawaban:

Karena jika submenu yang pertama tidak sama id-nya dengan menu maka submenu pertama akan menampilkan nama menunya yaitu ‘PSB Online’ seperti terlihat pada gambar dibawah ini:

Penutup

Sekian dan Terima kasih.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *