Cara Menambah Custom Field User Profile WordPress

Cara menambah Cutom FIeld atau kolom tambahan di User Profile atau user area WordPress. Sahabat Blogger yang menggunakan CMS wordpress pasti sudah sangat familiar dengan yang namanya User Profile area atau User Profile Gitulah.

Di Halaman User tersebut terdapat banyak pilihan diantaranya , Kolom Nama , Nickname , email dan lain- lain, apakah sahabat pernah berpikiran untuk menambah sebuah kolom atau kolom tambahan lagi ?
Maksudnya bagaimana menambah kolom lagi?lalu fungsinya apa?
Begini , dalam beberapa kasus atau sebuah pengoptimalan tampilan dan navigaasi Blogger kurang memperhatikan USer Profile Area ini padahal disanalah tempat kemanan kita dan Profile dari Member kita, password, dan lainnya. Disana kita dapat menentukan Role atau Hak akses atau ijin dari setiap member kita , mau dijadikan Subscriber / Contributor atau administrator mungkin?
dan disanalah kita dapat mengubah password kita 🙂

Cukup ya , penjelasan yang terlalu berbelit belit, saya akan memberikan sedikit informasi yang dapat membuat kolom baru di user area admin sahabat 🙂 , saya berikan screen Shotnya kalau bingung ,

User Area WordPress

 

Bisa di lihat pada Screenshot diatas , saya beri keterangan Custom Field. Custom Field diatas bisa diterapkan juga di Script PHP themes sahabat. 🙂

Langsung saja ke pokok permasalahan 😀

  • Saya disini menyarankan untuk membuat 1 file php baru, dan buat Folder “fungsi” , di Folder Themes / Tema Sahabat.
  • Jadi intinya adalah buat Folder Fungsi tempatnya di 1 barisan / di Folder yang sama dengan Script script utama themes sahabat.
  • setelah membuat folder fungsi sekarang sahabat buat baru file bernama : userbaru.php

    user baru script user profile

    userbaru.php

  • Disini saya akan memberikan sebuah Script tambahan untuk Twitter ID / Facebook ID dan GooglePlus URL , copy dan paste di userbaru.php , lalu upload ke dalam folder “fungsi“.
    <?php add_action( 'show_user_profile', 'my_show_extra_profile_fields' );
    add_action( 'edit_user_profile', 'my_show_extra_profile_fields' );
    
    function my_show_extra_profile_fields( $user ) { ?>
    
        <h3>Extra profile information</h3>
    
        <table>
    
            <tr>
                <th><label for="twitter">Twitter</label></th>
    
                <td>
                    <input type="text" name="twitter" id="twitter" value="<?php echo esc_attr( get_the_author_meta( 'twitter', $user->ID ) ); ?>" /><br />
                    <span>Please enter your Twitter username.</span>
                </td>
            </tr>
    
            <tr>
                <th><label for="googleplus">Google Plus</label></th>
    
                <td>
                    <input type="text" name="googleplus" id="googleplus" value="<?php echo esc_attr( get_the_author_meta( 'googleplus', $user->ID ) ); ?>" /><br />
                    <span>Please enter your Google Plus URL.</span>
                </td>            
            </tr>
            <tr>
                <th><label for="facebookid">Facebook</label></th>
    
                <td>
                    <input type="text" name="facebookid" id="facebookid" value="<?php echo esc_attr( get_the_author_meta( 'facebookid', $user->ID ) ); ?>" /><br />
                    <span>Please enter your Facebook ID.( just your ID ) </span>
                </td>
            </tr>
        </table>
    <?php }
    add_action( 'personal_options_update', 'my_save_extra_profile_fields' );
    add_action( 'edit_user_profile_update', 'my_save_extra_profile_fields' );
    
    function my_save_extra_profile_fields( $user_id ) {
    
        if ( !current_user_can( 'edit_user', $user_id ) )
            return false;
    
        /* Copy dan paste Kolom tambahan berikut. pastikan untuk mengubah 'twitter', 'facebookid', 'googleplus' Ke Field ID. */
        update_usermeta( $user_id, 'twitter', $_POST['twitter'] );
        update_usermeta( $user_id, 'facebookid', $_POST['facebookid'] );
        update_usermeta( $user_id, 'googleplus', $_POST['googleplus'] );
    }
    1. Warna Merah : sebagai header Field
    2. Warna Biru : sebagai Label Field
    3. Warna Hijau : sebagai desckripsi Field
    4. Warna Ungu : sebagai $user_id atau ID Field
  • NB : dimana Script berikut akan sedikit saya berikan penjelasan fungsi nya.
    <?php add_action( 'show_user_profile', 'my_show_extra_profile_fields' );
    add_action( 'edit_user_profile', 'my_show_extra_profile_fields' );
    
    function my_show_extra_profile_fields( $user ) { ?>

    akan sebagai registrasi , Kolom Extra / Custom Field di User Profile.

    Extra profile information

    Akan menjadi Header dari Kolom  Extra / Custom Field.

     <table>
    
            <tr>
                <th><label for="twitter">Twitter</label></th>
    
                <td>
                    <input type="text" name="twitter" id="twitter" value="<?php echo esc_attr( get_the_author_meta( 'twitter', $user->ID ) ); ?>" /><br />
                    <span>Please enter your Twitter username.</span>
                </td>
            </tr>
    
            <tr>
                <th><label for="googleplus">Google Plus</label></th>
    
                <td>
                    <input type="text" name="googleplus" id="googleplus" value="<?php echo esc_attr( get_the_author_meta( 'googleplus', $user->ID ) ); ?>" /><br />
                    <span>Please enter your Google Plus URL.</span>
                </td>            
            </tr>
            <tr>
                <th><label for="facebookid">Facebook</label></th>
    
                <td>
                    <input type="text" name="facebookid" id="facebookid" value="<?php echo esc_attr( get_the_author_meta( 'facebookid', $user->ID ) ); ?>" /><br />
                    <span>Please enter your Facebook ID.( just your ID ) </span>
                </td>
            </tr>
        </table>

    Sebagai Kolom , atau script table dan kolom yang ada di User Area.

    <?php }
    add_action( 'personal_options_update', 'my_save_extra_profile_fields' );
    add_action( 'edit_user_profile_update', 'my_save_extra_profile_fields' );
    
    function my_save_extra_profile_fields( $user_id ) {
    
        if ( !current_user_can( 'edit_user', $user_id ) )
            return false;
    
        /* Copy dan paste Kolom tambahan berikut. pastikan untuk mengubah 'twitter', 'facebookid', 'googleplus' Ke Field ID. */
        update_usermeta( $user_id, 'twitter', $_POST['twitter'] );
        update_usermeta( $user_id, 'facebookid', $_POST['facebookid'] );
        update_usermeta( $user_id, 'googleplus', $_POST['googleplus'] );
    }

    Dan sebagai scrfipt untuk dapat menyimpan / Update dari Kolom yang telah sahabat isi. apabila tidak ada script diatas maka tidak akan dapat tersimpan data yang ada di kolom tambahan / Custom Field.

  • Setelah sahabat mengupload userbaru.php ke folder fungsi , sekarang silahkan sahabat buka script function.php
    di folder themes sahabat. Dan tambahakan Code Berikut dimana saja sebelum penutup script  php ==>> “?>” :

    require_once(TEMPLATEPATH . '/fungsi/userbaru.php'); // untuk memanggil dan mengaktifkan userbaru.php

    Dimana script diatas diletakkan untuk memanggil userbaru.php , dan pastikan sahabat sudah mengupload File userbaru.php di folder fungsi

  • Lalu save , dan lihat hasilnya di user ==> Your Profile , dan sahabat akan melihat 3 kolom tambahan.
  • Untuk mengaplikasikan custopm field diatas sahabat dapat memanggil dengan script berikut dan letakkan di scipt script tema sahabat.
    <a href="http://www.facebook.com/<?php the_author_meta('facebookid') ?>Facebook</a>
    <a href="http://twitter.com/<?php the_author_meta('twitter') ?>Twitter</a>
    <a href="<?php the_author_meta('googleplus') ?>Google Plus</a>

    Dimana 3 script daiatas adalah sebagai cara untuk mengaplikasikan Custom Field dari 3 kolom sebelumnya.
    Dengan rincian dan pengaplikasian dasar yaitu :

    <?php the_author_meta(' $user_id ') ?> // user id ini adalah yang berwarna merah / id dari Meta name script php diatas.

    dan intinya kode author meta diatas adalah untuk memanggil code yang sahabat masukkan di kolom custom, dimana $user_id adalah code untuk meta name php.

 

Berikut contoh pengaplikasian dari script diatas :

diatas adalah pengaplikasian , script custom field dengan menggunakan css sprites.

 

<ul class="social_media">
    <li><a href="<?php the_author_meta('googleplus') ?>?rel=author" target="_blank&quot;">
<div class="gplus">&nbsp;</div></a></li>
    <li><a href="https://twitter.com/intent/follow?original_referer=<? the_permalink()?>/&region=follow_link&screen_name=<?php the_author_meta('twitter') ?>&source=followbutton&variant=2.0">
<div class="authortwitter">&nbsp;</div></a></li>
    <li><a href="http://www.facebook.com/<?php the_author_meta('facebookid') ?>" target="_blank">
<div class="authorfb"></div></a></li>
    <li><a href="<?php the_author_meta('user_url') ?>" target="_blank">
<div class="authorweb">&nbsp;</div></a></li>
</ul>

Dimana :

  1. <?php the_author_meta(‘googleplus’) ?> // untuk memanggil link custom field google plus
  2. <?php the_author_meta(‘twitter’) ?> // untuk memanggil user ID twitter ( diharuskan diberikan alamat twitter di depan url)
  3. <?php the_author_meta(‘facebookid’) ?> // untuk memanggil user ID facebook ( diharuskan diberikan alamat twitter di depan url )
  4. <?php the_author_meta(‘user_url’) ?> // untuk memanngil Main Field di user area profil kolom website

dan berikut Script CSS nya :

 

 

.social_media{list-style:none;float:left;width:100%;display:block;margin:10px 0 10px 0;}
.social_media li{float:left;display:block;margin-right:10px;}
.gplus{background: url('images/socialis.png');background-position: -0px -240px; width: 50px; height: 50px;}
.gplus:hover{background: url('images/socialis.png');background-position: -0px -300px; width: 50px; height: 50px;}
.authortwitter{background: url('images/socialis.png');background-position: -0px -120px; width: 50px; height: 50px}
.authortwitter:hover{background: url('images/socialis.png');background-position: -0px -180px; width: 50px; height: 50px}
.authorfb{background: url('images/socialis.png');background-position: -0px -0px; width: 50px; height: 50px}
.authorfb:hover{background: url('images/socialis.png');background-position: -0px -60px; width: 50px; height: 50px}
.authorweb{background: url('images/socialis.png');background-position: -0px -360px; width: 50px; height: 50px}
.authorweb:hover{background: url('images/socialis.png');background-position: -0px -420px; width: 50px; height: 50px}

Dan Gambar socialis.png adalah berikut :

Gambar CSS Sprites

Gambar CSS Sprites socialis.png

 

Happy Blogging 🙂