Kursus WordPress

Appearance

Settings Page & Settings API ​

Gambaran Umum ​

Video ini membahas cara menambahkan halaman pengaturan (settings page) ke plugin WordPress dan menggunakan WordPress Settings API untuk menyimpan data ke database secara aman.

Bagian 1: Menambahkan Settings Page ​

Mendaftarkan Menu di Admin ​

Di dalam constructor class plugin, tambahkan action untuk admin_menu:

php
class WordCountAndTimePlugin {
  function __construct() {
    add_action('admin_menu', array($this, 'adminPage'));
    add_filter('the_content', array($this, 'ifWrap'));
  }

add_options_page() — 5 Argumen ​

php
function adminPage() {
  add_options_page(
    'Word Count Settings',        // 1. Page title (judul di tab browser)
    'Word Count',                 // 2. Menu text (teks di sidebar admin)
    'manage_options',             // 3. Capability (siapa yang bisa akses)
    'word-count-settings-page',   // 4. Slug (URL unik halaman)
    array($this, 'ourHTML')       // 5. Callback function (output HTML)
  );
}

Membuat HTML Halaman Settings ​

php
function ourHTML() { ?>
  <div class="wrap">
    <h1>Word Count Settings</h1>
    <form action="options.php" method="POST">
      <?php
        settings_fields('wordcountplugin');
        do_settings_sections('word-count-settings-page');
        submit_button();
      ?>
    </form>
  </div>
<?php }

Penting: Action form harus options.php — ini adalah file bawaan WordPress yang menangani penyimpanan settings.

Bagian 2: WordPress Settings API ​

Mendaftarkan Settings di admin_init ​

php
function __construct() {
  add_action('admin_menu', array($this, 'adminPage'));
  add_action('admin_init', array($this, 'settings'));
  add_filter('the_content', array($this, 'ifWrap'));
}

3 Fungsi Utama Settings API ​

1. register_setting() — Mendaftarkan option ke database ​

php
function settings() {
  // Mendaftarkan setting untuk lokasi tampilan
  register_setting(
    'wordcountplugin',           // 1. Group name (harus sama di settings_fields)
    'wcp_location',              // 2. Option name (nama di database)
    array(
      'sanitize_callback' => array($this, 'sanitizeLocation'),
      'default' => '0'
    )
  );

  // Mendaftarkan setting untuk headline
  register_setting(
    'wordcountplugin',
    'wcp_headline',
    array(
      'sanitize_callback' => 'sanitize_text_field',
      'default' => 'Post Statistics'
    )
  );

  // Setting untuk word count (checkbox)
  register_setting('wordcountplugin', 'wcp_wordcount', array('sanitize_callback' => 'sanitize_text_field', 'default' => '1'));

  // Setting untuk character count (checkbox)
  register_setting('wordcountplugin', 'wcp_charcount', array('sanitize_callback' => 'sanitize_text_field', 'default' => '1'));

  // Setting untuk read time (checkbox)
  register_setting('wordcountplugin', 'wcp_readtime', array('sanitize_callback' => 'sanitize_text_field', 'default' => '1'));

2. add_settings_section() — Membuat section grup ​

php
  add_settings_section(
    'wcp_first_section',              // 1. Section name/ID
    null,                             // 2. Title (null = tanpa judul)
    null,                             // 3. Content callback (null = tanpa keterangan)
    'word-count-settings-page'        // 4. Page slug (harus sama dengan add_options_page)
  );

3. add_settings_field() — Menambahkan field ke section ​

php
  // Dropdown field
  add_settings_field(
    'wcp_location',                   // 1. Option name
    'Display Location',               // 2. Label text
    array($this, 'locationHTML'),     // 3. HTML callback
    'word-count-settings-page',       // 4. Page slug
    'wcp_first_section'               // 5. Section name
  );

  // Text input field
  add_settings_field('wcp_headline', 'Headline Text', array($this, 'headlineHTML'), 'word-count-settings-page', 'wcp_first_section');

  // Checkbox fields
  add_settings_field('wcp_wordcount', 'Word Count', array($this, 'checkboxHTML'), 'word-count-settings-page', 'wcp_first_section', array('theName' => 'wcp_wordcount'));
  add_settings_field('wcp_charcount', 'Character Count', array($this, 'checkboxHTML'), 'word-count-settings-page', 'wcp_first_section', array('theName' => 'wcp_charcount'));
  add_settings_field('wcp_readtime', 'Read Time', array($this, 'checkboxHTML'), 'word-count-settings-page', 'wcp_first_section', array('theName' => 'wcp_readtime'));
}

Argumen ke-6 pada add_settings_field() — array yang dikirim ke callback function. Ini memungkinkan kita menggunakan satu function untuk beberapa checkbox.

Bagian 3: HTML Callbacks untuk Setiap Field ​

php
function locationHTML() { ?>
  <select name="wcp_location">
    <option value="0" <?php selected(get_option('wcp_location'), '0') ?>>Beginning of post</option>
    <option value="1" <?php selected(get_option('wcp_location'), '1') ?>>End of post</option>
  </select>
<?php }

selected() — Helper WordPress yang otomatis menambahkan selected="selected" pada option yang cocok.

Text Input ​

php
function headlineHTML() { ?>
  <input type="text" name="wcp_headline" value="<?php echo esc_attr(get_option('wcp_headline')) ?>">
<?php }

Checkbox Reusable ​

php
function checkboxHTML($args) { ?>
  <input type="checkbox" name="<?php echo $args['theName'] ?>" value="1" <?php checked(get_option($args['theName']), '1') ?>>
<?php }

checked() — Helper WordPress yang otomatis menambahkan checked="checked" jika value cocok.

Bagian 4: Custom Validation / Sanitize Callback ​

php
function sanitizeLocation($input) {
  if ($input != '0' AND $input != '1') {
    add_settings_error('wcp_location', 'wcp_location_error', 'Display location must be either beginning or end.');
    return get_option('wcp_location');  // Kembalikan nilai lama
  }
  return $input;  // Nilai valid, simpan
}

Penjelasan: ​

  • add_settings_error() — Menampilkan pesan error di halaman settings
    • Arg 1: Nama setting
    • Arg 2: Error code
    • Arg 3: Pesan error
  • Jika validasi gagal, kembalikan nilai lama dengan get_option()
  • Jika valid, kembalikan $input untuk disimpan

Fungsi-Fungsi WordPress Penting ​

FungsiKegunaan
register_setting()Mendaftarkan option di database
add_settings_section()Membuat grup section
add_settings_field()Menambahkan field ke section
settings_fields()Output hidden fields (nonce, action)
do_settings_sections()Render semua sections & fields
submit_button()Output tombol submit standar WordPress
get_option()Ambil nilai dari database (auto-loaded, tanpa performa hit)
selected()Helper untuk <select> dropdown
checked()Helper untuk checkbox
esc_attr()Sanitasi output untuk atribut HTML
add_settings_error()Tampilkan pesan error