Tutorial Membuat Custom Metabox di Wordpress - Code Pelajar

Code Pelajar - Haloo Sob, Kali ini saya akan sharing bagaimanasih, membuat custom metabox di wordpress? Jujur saya sangat senang masih banyak yang request tutorial dll kepada saya, tapi maaf jika request kalian tidak bisa saya penuhi semuanya, karena kesibukaan di tempat kuliah dan banyaknya kerjaan offline saya membuat saya jarang punya waktu luang untuk ngeblog lagi.



Sebelumnya kalian sudah tau apa itu metabox? Metabox sendiri adalah fitur dari wordpress yang memperbolehkan kita untuk menambahkan data selain title, post, taxonomy, thumbnail di dalam editor POST atau penjelasan kasarnya sih, pas kita mau membuat artikel baru. Saya kira cukup untuk penjelesan tentang metabox kita lanjut tutorial sekarang.

Require Plugin

Plugin-plugin yang dibutuhkan untuk membuat custom metabox adalah sebagai berikut;

  1. Metabox(Required)
  2. File Manager (Optional)
Untuk File Manager kenapa optional? karena fungsi dari file manager nanti hanya untuk membuat folder/file baru saja langsung di wp-admin nya. Sebenarnya, kalian juga tidak perlu install plugin File Manager karena kalian juga bisa membuat folder/file baru di dalam c-panel/FileManager kalian. Itupun jika kalian memiliki akses C-panel.

Refactoring Folder & File Themes

  1. Jika Kalian sudah menginstall & Mengaktifkan semua plugin termasuk File Manager, Sekarang kalian buka File managernya.
  2. Jika sudah kalian masuk kedalam folder themes yang kalian pakai(yang ingin di pasang metabox) Route Folder nya wp-content/themes/YourThemes!.
  3. Buat Folder baru didalam Folder Theme kalian, berinama inc
  4. Ketika kalian sudah berhasil membuat folder, maka buatlah File baru berinama meta.php
  5. Jika sudah save dan masuk kedalam editor themes kalian dan buka Folder & File yang telah berhasil kalian buat tadi.

Membuat & Memasang Script Metabox

  1. Salin dan Terapkan Script php Dibawah ini
  2. <?php
    
    /*
    @Metabox By Codepelajar
    @Author : Code Pelajar
    @AuthorURL : https://codepelajar.com
    */
    
    function cp_metabox( $meta_boxes ) {
        $prefix = 'cp_'; //cuman prefix aja biar kodenya lebih rapih
    
        $meta_boxes[] = array(
            'id' => 'cp_metabox_id', //penamaan ID bebas terserah kalian.
            'title' => esc_html__( 'Metabox Title', 'cp' ), //
            'post_types' => array( 'post' ), //sesuaikan dengan post_type kalian!
            'context' => 'after_editor', //penempatannya
            'priority' => 'default',
            'autosave' => true,
            'fields' => array(
                array(
                    'id' => $prefix . 'imginf', // id Field
                    'type' => 'file_input', // Menggunakan Tipe File_input
                    'name' => esc_html__( 'Gambar Poster' ), //ini untuk title/judul field
                    'desc' => esc_html__( 'URL REMOTE' ), //ini untuk Description field
                    'max_file_uploads' => '1',
                    'max_status' => false,
                ),
                array(
                    'id' => $prefix . 'title_info',
                    'type' => 'text', //menggunakan tipe text
                    'name' => esc_html__( 'Title Info', 'cp' ), //ini untuk title/judul field
                    'desc' => esc_html__( '(e.g. Title Info Movies/Cinemax dll)', 'cp' ), //ini untuk Description field
                ),
                //Ini adalah Contoh field Metabox untuk Tanggal
                array(
                    'id' => $prefix . 'aired',
                    'type' => 'date',
                    'name' => esc_html__( 'Aired', 'cp' ),
                    'desc' => esc_html__( '(e.g. Oct 3, 2017)', 'cp' ),
    
                    //ini dokumentasinya !
                    //https://docs.metabox.io/fields/date/
    
                    'js_options' => array(
                        'appendText'      => __( '(M dd, yyyy)', 'meta-box' ),
                        'dateFormat'      => __( 'M dd, yy', 'meta-box' ),
                        'changeMonth'     => true,
                        'changeYear'      => true,
                        'showButtonPanel' => true,
                    ),
                ),
    
            ),
        );
    
        return $meta_boxes;
    }
    //Menambahkan Custom Hooks dengan add_filter
    add_filter( 'rwmb_meta_boxes', 'cp_metabox' );
    Disini saya menambahkan 3 tipe metabox fields yang berbeda yaitu, file_input, data, text. ketiganya berbeda mohon dipelajari disana saya sudah sedikit memberikan comment, jika kalian bingung silahkan tanyakan di kolom komentar.
  3. Jika script di atas, Sudah di Salin dan di terapkan di dalam file meta.php maka hal selanjutnya adalah simpan.
  4. Buka function.php di themes kalian, lalu inlcude folder dan file tadi kedalam function.php.
  5. #External Function
    include 'inc/meta.php';
  6. Save dan lihat hasilnya.


Yang masih bingung dengan 'post_types' => array( 'post' ) , ini kalian bisa setting sesuai dengan post_type kalian. biasanya kalian yang memakai themes untuk fanshare developer menamai post_type info anime dengan nama anime. Maka hal yang perlu kalian lakukan adalah mengganti post menjadi anime seperti ini 'post_types' => array( 'anime' )

Oke Cukup sekian dulu ya, saya pikir ini sudah cukup jelas. Jika masih ada yang kurang mengerti silahkan tanyakan pada kolom komentar dan biasakan searching/cari dulu di google pertanyaan2 kalian siapa tau masalah-masalah yang sedang kalian alami sudah pernah di alami oleh orang lain :) selamat Ngoding Sob!



Table Of Content

    Contact Form

    Kirim