[Part 3] Membuat Submenu Admin Page - Membuat Theme WordPress

Tutorial selanjutnya adalah membuat Submenu Admin Page. Tidak lengkap rasanya kalau di Admin Page cuma ada satu menu, oleh karena itu kita akan membuat beberapa submenu untuk Theme ini.

Pada tutorial sebelumnya kita sudah membuat Custom Admin Page, tutorial ini adalah lanjutan dari tutorial sebelumnya. Jadi ikuti terus tutorial ini karena kita membuat artikelnya saling berurutan, so let's do start it.



1. Buka terlebih dahulu project Theme sebelumnya , buka file function-admin.php pada folder inc, ubah slug di script berikut:



function sunda_add_admin_page() {
  add_menu_page('Sunda Theme Options', 'Sunda', 'manage_options', 'gidhancrx-sunda', 'sunda_theme_create_page', get_template_directory_uri() . '/img/G.png', 110);
}
 


ubah 'gidhancrx-sunda' menjadi 'gidhancrx_sunda'.

2. Lalu tambahkan script berikut di file function-admin.php tepat di , function sunda_add_admin_page() , paste kan script berikut:

add_submenu_page( 'gidhancrx_sunda', 'Sunda Theme Options', 'Setting', 'manage_options', 'gidhancrx_sunda', 'sunda_theme_create_page'); 

add_submenu_page( 'gidhancrx_sunda', 'Sunda CSS Options', 'Custom CSS', 'manage_options', 'gidhancrx_sunda_css', 'sunda_theme_settings_page');   

Keterangan: 
add_submenu_page ( string $parent_slug, string $page_title, string $menu_title, string $capability, string $menu_slug, callback $function )

Silahkan cocokkan sendiri untuk keterangan tiap string yang dibuat di submenu page, sulit saya untuk menjelaskan satu-satu karena terlalu panjang, silahkan cari fungsi slug/capability atau lainnya di google ya !! 😁

3. Lalu kita buat lagi function baru di bawah function sunda_theme_create_page()

function sunda_theme_setting_page() {

}

Tampilan script nya seperti berikut.

Silahkan di cocokkan saja script nya, lalu save file, dan refresh WordPress anda, jika berhasil maka akan terlihat seperti gambar dibawah. kalau tidak muncul silahkan cek lagi script nya.

Setelah itu kita buat folder baru di dalam folder inc, kasih nama templates lalu buat file baru di dalam folder templates tersebut dengan nama "sunda-admin.php" atau nama terserah anda, tapi saya sarankan sama kan dulu saja kalau buat testing. (ex: sunda/inc/template/sunda-admin.php)

Lalu buka file sunda-admin.php nya dan isikan script berikut:

<h1> SundaTheme Options</h1>

<h3 class="title"> Manage Options</h3>

<p>Customize the Default WordPress Appearance Options</p> 

Save file tersebut, dan buka lagi function-admin.php, dan masukkan script dibawah untuk memanggil file sunda-admin.php yang sudah anda buat tadi.

require_once ( get_template_directory() . '/inc/templates/sunda-admin.php');

Masukkan kode tersebut kedalam function sunda_theme_create_page()

Simpan file lalu refresh lagi WordPress nya, kalau muncul title dan subtitle nya berarti anda berhasil, jika tidak silahkan cek ulang scriptnya.

Tampilannya akan seperti ini:

Silahkan di cek ulang script nya kalau yang masih belum muncul seperti gambar diatas.

<?php

/*

@package sundatheme

===========================

        ADMIN PAGE

===========================

 */

 //General sunda admin page

function sunda_add_admin_page() {

  add_menu_page('Sunda Theme Options', 'Sunda', 'manage_options', 'gidhancrx_sunda', 'sunda_theme_create_page', get_template_directory_uri() . '/img/G.png', 110);

//General sunda admin sub page

  add_submenu_page( 'gidhancrx_sunda', 'Sunda Theme Options', 'Setting', 'manage_options', 'gidhancrx_sunda', 'sunda_theme_create_page');

  add_submenu_page( 'gidhancrx_sunda', 'Sunda CSS Options', 'Custom CSS', 'manage_options', 'gidhancrx_sunda_css', 'sunda_theme_setting_page');

}

add_action( 'admin_menu', 'sunda_add_admin_page' );

function sunda_theme_create_page() {

  require_once ( get_template_directory() . '/inc/templates/sunda-admin.php');

}

function sunda_theme_setting_page() {

}

 ?> 

 

Cukup sekian tutorial Submenu Admin Page nya, nanti kita akan lanjutkan ke tutorial lainnya dengan judul Custom Options Dengan Setting API, jadi pantau terus blog kami untuk tutorial lanjutan dari Membuat Theme WordPress Bagi Pemula ini. See you next lesson.