WordPress, Elrolumnews — Anda sudah bisa membuat Custom Post Type, Taxonomy, Shortcode, dan Widget. Tapi bagaimana jika Anda ingin menambahkan field kustom ke editor posting—seperti “Harga”, “Lokasi”, atau “Tanggal Acara”—yang muncul di bawah editor dan bisa diisi langsung?
Artikel ini cocok untuk: Anda yang sudah familiar dengan WordPress dan ingin naik level dengan Custom Meta Box—untuk menambahkan field kustom ke post type tanpa harus mengedit kode setiap saat.
Meta Box adalah kotak tambahan di editor yang menampilkan field kustom—seperti teks, dropdown, atau upload gambar . Ini adalah cara WordPress untuk memungkinkan Anda menambahkan metadata ke posting tanpa harus mengubah struktur database.
Di artikel ini, kita akan bahas dari nol: apa itu meta box, cara membuatnya, berbagai tipe field, sanitasi data, hingga contoh praktis yang bisa langsung dipakai.
Apa Itu Meta Box dan Mengapa Penting?
Meta Box adalah panel tambahan di editor WordPress yang berisi field kustom. Contoh paling umum: Yoast SEO dan Rank Math—keduanya menambahkan meta box di bawah editor untuk optimasi SEO.
Mengapa Membuat Meta Box Kustom?
| Alasan | Penjelasan |
|---|---|
| Kontrol penuh | Field sesuai kebutuhan—tidak terbatas pada editor standar |
| Struktur data | Metadata tersimpan rapi di wp_postmeta |
| User-friendly | Klien bisa mengisi field tanpa melihat kode |
| Fleksibel | Bisa untuk berbagai tipe konten—post, page, CPT |
💡 Analogi: Meta Box seperti formulir tambahan di halaman editor. Anda bisa menambahkan field apa pun—teks, angka, tanggal, gambar—sesuai kebutuhan.
Langkah 1: Membuat Meta Box Paling Sederhana
Mari mulai dari yang paling dasar: meta box dengan satu field teks.
Kode di functions.php
function elrolum_tambah_meta_box() { add_meta_box( 'elrolum_meta_box', // ID unik meta box 'Informasi Tambahan', // Judul yang muncul di editor 'elrolum_render_meta_box', // Fungsi untuk menampilkan form 'post', // Post type tempat meta box muncul 'normal', // Posisi: normal, side, advanced 'high' // Prioritas: high, default, low ); } add_action( 'add_meta_boxes', 'elrolum_tambah_meta_box' );
Penjelasan Parameter add_meta_box()
| Parameter | Fungsi |
|---|---|
| ID | Identifier unik—harus unik di halaman admin |
| Title | Judul yang muncul di atas meta box |
| Callback | Fungsi yang menampilkan form |
| Screen | Post type (post, page, atau CPT) |
| Context | Posisi: normal, side, advanced |
| Priority | Urutan: high, default, low |
Fungsi Render (Form)
function elrolum_render_meta_box( $post ) {
// Ambil nilai yang sudah ada
$nilai = get_post_meta( $post->ID, '_elrolum_field', true );
// Nonce untuk keamanan
wp_nonce_field( 'elrolum_save_meta', 'elrolum_meta_nonce' );
?>
<p>
<label for="elrolum_field">Nilai:</label>
<input type="text"
id="elrolum_field"
name="elrolum_field"
value="<?php echo esc_attr( $nilai ); ?>"
class="widefat">
</p>
<?php
}Fungsi Simpan Data
function elrolum_simpan_meta_box( $post_id ) { // 1. Verifikasi nonce if ( ! isset( $_POST['elrolum_meta_nonce'] ) ) return; if ( ! wp_verify_nonce( $_POST['elrolum_meta_nonce'], 'elrolum_save_meta' ) ) return; // 2. Cek autosave if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return; // 3. Cek izin user if ( ! current_user_can( 'edit_post', $post_id ) ) return; // 4. Sanitasi dan simpan if ( isset( $_POST['elrolum_field'] ) ) { $nilai = sanitize_text_field( $_POST['elrolum_field'] ); update_post_meta( $post_id, '_elrolum_field', $nilai ); } } add_action( 'save_post', 'elrolum_simpan_meta_box' );
Penjelasan Fungsi Simpan
| Langkah | Fungsi |
|---|---|
| Verifikasi nonce | Mencegah serangan CSRF |
| Cek autosave | Jangan simpan saat autosave |
| Cek izin | Pastikan user punya akses |
| Sanitasi | Bersihkan data sebelum disimpan |
| Update | Simpan ke wp_postmeta |
⚠️ Peringatan: Jangan lewatkan nonce dan sanitasi. Meta box tanpa keduanya rentan terhadap serangan .
Langkah 2: Meta Box dengan Berbagai Tipe Field
Sekarang kita buat meta box dengan berbagai tipe field: teks, textarea, dropdown, checkbox.
Kode
function elrolum_render_meta_box_lengkap( $post ) {
// Ambil nilai yang sudah ada
$nama = get_post_meta( $post->ID, '_elrolum_nama', true );
$deskripsi = get_post_meta( $post->ID, '_elrolum_deskripsi', true );
$kategori = get_post_meta( $post->ID, '_elrolum_kategori', true );
$featured = get_post_meta( $post->ID, '_elrolum_featured', true );
wp_nonce_field( 'elrolum_save_meta', 'elrolum_meta_nonce' );
?>
<p>
<label for="elrolum_nama"><strong>Nama:</strong></label>
<input type="text" id="elrolum_nama" name="elrolum_nama"
value="<?php echo esc_attr( $nama ); ?>" class="widefat">
</p>
<p>
<label for="elrolum_deskripsi"><strong>Deskripsi:</strong></label>
<textarea id="elrolum_deskripsi" name="elrolum_deskripsi"
class="widefat" rows="4"><?php echo esc_textarea( $deskripsi ); ?></textarea>
</p>
<p>
<label for="elrolum_kategori"><strong>Kategori:</strong></label>
<select id="elrolum_kategori" name="elrolum_kategori" class="widefat">
<option value="pemula" <?php selected( $kategori, 'pemula' ); ?>>Pemula</option>
<option value="menengah" <?php selected( $kategori, 'menengah' ); ?>>Menengah</option>
<option value="expert" <?php selected( $kategori, 'expert' ); ?>>Expert</option>
</select>
</p>
<p>
<label>
<input type="checkbox" name="elrolum_featured" value="1"
<?php checked( $featured, '1' ); ?>>
Tandai sebagai Featured
</label>
</p>
<?php
}Fungsi Simpan (Lengkap)
function elrolum_simpan_meta_box_lengkap( $post_id ) { if ( ! isset( $_POST['elrolum_meta_nonce'] ) ) return; if ( ! wp_verify_nonce( $_POST['elrolum_meta_nonce'], 'elrolum_save_meta' ) ) return; if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return; if ( ! current_user_can( 'edit_post', $post_id ) ) return; // Simpan nama if ( isset( $_POST['elrolum_nama'] ) ) { update_post_meta( $post_id, '_elrolum_nama', sanitize_text_field( $_POST['elrolum_nama'] ) ); } // Simpan deskripsi if ( isset( $_POST['elrolum_deskripsi'] ) ) { update_post_meta( $post_id, '_elrolum_deskripsi', sanitize_textarea_field( $_POST['elrolum_deskripsi'] ) ); } // Simpan kategori if ( isset( $_POST['elrolum_kategori'] ) ) { update_post_meta( $post_id, '_elrolum_kategori', sanitize_text_field( $_POST['elrolum_kategori'] ) ); } // Simpan checkbox (jika tidak dicentang, hapus) if ( isset( $_POST['elrolum_featured'] ) ) { update_post_meta( $post_id, '_elrolum_featured', '1' ); } else { delete_post_meta( $post_id, '_elrolum_featured' ); } } add_action( 'save_post', 'elrolum_simpan_meta_box_lengkap' );
Tabel Sanitasi per Tipe Field
| Tipe Field | Fungsi Sanitasi |
|---|---|
| Text | sanitize_text_field() |
| Textarea | sanitize_textarea_field() |
| Dropdown | sanitize_text_field() |
| Checkbox | '1' atau hapus |
| URL | esc_url_raw() |
sanitize_email() | |
| Angka | intval() atau floatval() |
Langkah 3: Meta Box untuk Custom Post Type
Jika Anda punya CPT, ganti parameter screen di add_meta_box().
add_meta_box( 'elrolum_meta_box', 'Informasi Produk', 'elrolum_render_meta_box', 'produk', // CPT slug 'normal', 'high' );
💡 Tips Pro: Untuk menampilkan meta box di beberapa post type, gunakan array:
'screen' => array( 'post', 'page', 'produk' )
Langkah 4: Menampilkan Data Meta Box di Frontend
Setelah data disimpan, tampilkan di website.
Kode
function elrolum_tampilkan_meta() { global $post; $nama = get_post_meta( $post->ID, '_elrolum_nama', true ); if ( ! empty( $nama ) ) { echo '<div class="meta-nama">'; echo '<strong>Nama:</strong> ' . esc_html( $nama ); echo '</div>'; } }
Cara pakai: Panggil di template single.php atau gunakan shortcode.
Tips Lanjutan untuk Level Expert
1. Meta Box dengan Media Uploader
Untuk field gambar, gunakan WordPress Media Uploader:
// Enqueue media scripts function elrolum_admin_scripts() { wp_enqueue_media(); } add_action( 'admin_enqueue_scripts', 'elrolum_admin_scripts' );
2. Meta Box dengan Multiple Fields
Simpan sebagai array untuk mengelompokkan data:
$data = array( 'nama' => sanitize_text_field( $_POST['elrolum_nama'] ), 'kategori' => sanitize_text_field( $_POST['elrolum_kategori'] ), ); update_post_meta( $post_id, '_elrolum_data', $data );
3. Gunakan ACF untuk Meta Box Kompleks
Untuk meta box yang sangat kompleks (repeater, flexible content, gallery), gunakan Advanced Custom Fields (ACF)—lebih cepat dan tidak perlu coding .
Kesalahan Umum dan Cara Menghindarinya
| Kesalahan | Akibat | Solusi |
|---|---|---|
| Tidak pakai nonce | Rentan CSRF | Selalu wp_nonce_field() |
| Tidak sanitasi | Rentan XSS | Gunakan sanitize_*() |
| Tidak cek autosave | Data kosong tersimpan | Cek DOING_AUTOSAVE |
| Tidak cek izin | User tanpa akses bisa edit | current_user_can() |
| Edit tema induk | Hilang saat update | Gunakan child theme |
Lupa wp_unslash() | Data aneh | Gunakan wp_unslash() sebelum sanitasi |
Custom Meta Box adalah cara WordPress untuk menambahkan field kustom ke editor posting—tanpa harus mengubah struktur database. Kuncinya:
Daftarkan meta box — dengan
add_meta_box()Buat form — dengan berbagai tipe field
Simpan data — dengan nonce, sanitasi, dan izin
Tampilkan di frontend — dengan
get_post_meta()Gunakan untuk CPT — ganti parameter
screenUntuk kompleks, gunakan ACF — lebih cepat dan rapi
Gunakan child theme — agar kode aman saat update
Dengan meta box kustom, Anda bisa membuat editor yang kaya dan terstruktur—sesuai kebutuhan konten Anda, tanpa bergantung pada plugin.
Ingat: Meta box adalah alat. Konten yang hebat tetap butuh struktur data yang rapi. Meta box membantu Anda mencapainya.
Sudah siap membuat meta box kustom pertama Anda?
💬 Punya pengalaman dengan meta box? Bagikan di kolom komentar!
(el)
