[Part 4] Membuat Custom Options Dengan Setting API - Membuat Theme WordPress

Kembali lagi dengan saya pada jam ini, entah jam berapa. Pada kesempatan kali ini kita akan melanjutkan tutorial sebelumnya Membuat Submenu Admin Page ke tutorial Custom Options Dengan Setting API.

Pada tutorial ini kita akan membahas cara membuat textbox dan tombol di custom panel admin yang sudah kita buat sebelumnya. Kalo soal fungsinya nanti juga ketahuan di tutorial selanjutnya. 😁

Langsung saja ke tutorial selanjutnya, let's read it..



1. Seperti biasa buka folder project Theme kita menggunakan Atom dan buka file function-admin.php lalu copy kan script berikut:

add_action ( 'admin_init', 'sunda_custom_settings' );

Tempatkan di paling bawah function sunda_add_admin_page() sebelum penutup '}' seperti contoh dibawah.

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');

  //Activate Custom Settings

  add_action( 'admin_init', 'sunda_custom_settings');

}

Setelah itu tambahkan function lagi tepat di bawah  add_action setelah penutup '}',

function sunda_custom_settings(){
  register_setting ('sunda_custom_settings', 'first_name');
  add_settings_section ( 'sunda-sidebar-options', 'Sidebar Options', 'sunda_sidebar_options', 'gidhancrx_sunda' ); 
  add_settings_field ( 'sidebar-name', 'First Name', 'sunda_sidebar_name', 'gidhancrx_sunda', 'sunda-sidebar-options');
}
function sunda_sidebar_options() {
  echo 'Customizer your Sidebar Information';
}  
function sunda_sidebar_name() {
  $firstName = esc_attr ( get_option ( 'first_name) );
  echo '<input type="text" name="first_name" value="'.$firstName.'" placeholder="First Name" />';
} 

Seperti di bawah ini.

}

add_action( 'admin_menu', 'sunda_add_admin_page' );

function sunda_custom_settings(){

  register_setting ('sunda_custom_settings', 'first_name');

  add_settings_section ( 'sunda-sidebar-options', 'Sidebar Options', 'sunda_sidebar_options', 'gidhancrx_sunda' );

  add_settings_field ( 'sidebar-name', 'First Name', 'sunda_sidebar_name', 'gidhancrx_sunda', 'sunda-sidebar-options');

}

function sunda_sidebar_options() {

  echo 'Customizer your Sidebar Information';

}

function sunda_sidebar_name() {

  $firstName = esc_attr ( get_option('first_name') );

  echo '<input name="first_name" type="text" value="'.$firstName.'" placeholder="First Name" />';

} 

function sunda_theme_create_page() {

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

}

Setelah selesai silahkan buka file sunda-admin.php di folder /inc/template/sunda-admin.php, setelah itu masukkan script berikut:

<h1> Sunset Theme Options</h1>
<?php settings_errors(); ?>
<form method="post" action="options.php">
  <?php settings_fields( 'sunda-settings-group' ); ?>
  <?php do_settings_sections('gidhancrx_sunda'); ?>
  <?php submit_button(); ?>
</form>

Setelah selesai dimasukkan silahkan simpan file nya, lalu refresh browser anda, lihat apakah textbox sama button nya ada apa tidak.
Contoh Tampilannya:

Jika belum muncul tampilan seperti diatas, silahkan cocokkan kembali script nya. Melek terus sampe berhasil !!!! 😆

<?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');

  //Activate Custom Settings

  add_action ( 'admin_init', 'sunda_custom_settings' );

}

add_action( 'admin_menu', 'sunda_add_admin_page' );

function sunda_custom_settings() {

  register_setting( 'sunda-settings-group', 'first_name' );

  add_settings_section ( 'sunda-sidebar-options', 'Sidebar Options', 'sunda_sidebar_options', 'gidhancrx_sunda' );

  add_settings_field ( 'sidebar-name', 'First Name', 'sunda_sidebar_name', 'gidhancrx_sunda', 'sunda-sidebar-options');

}

function sunda_sidebar_options() {

  echo 'Customizer your Sidebar Information';

}

function sunda_sidebar_name() {

  $firstName = esc_attr( get_option('first_name'));

  echo '<input type="text" name="first_name" value="'.$firstName.'" placeholder="First Name" />';

}

function sunda_theme_create_page() {

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

}

function sunda_theme_setting_page() {

}

 ?>

Mungkin untuk tutorial Custom Options Dengan Setting API cukup sekian dulu, sisanya kalau masih ada yang error silahkan di cek ulang atau silahkan komen saja jangan sungkan. Tutorial selanjutnya akan berjudul Custom Sosial Media Fields dan Sanitize Callbacks jadi pantau terus ya, see you next lesson.