DEV Community

Cover image for How to display extra fields in the profile section of wordpress
kennethnnah
kennethnnah

Posted on • Edited on

How to display extra fields in the profile section of wordpress

Wordpress has several hooks which help developers write custom code that can modify various parts of internal data at runtime. In this short read, I am going to use a hook to add a new column to the worpress profile page.

  1. I generated the extra field code from this useful website Link, you can do same or copy the code here. 
<?php /* Plugin Name: #Extra Plugin Plugin URI: https://www.sufyan.in/ Description: This plugin code is generated by Sufyan Code Generator. Version: 1.0.0 Author: Sufyan Author URI: https://www.sufyan.in/code-generator/ License: GPLv2 or later Text Domain: sufyan */ add_action( 'personal_options_update', 'save_extra_user_profile_fields_eaq' ); add_action( 'edit_user_profile_update', 'save_extra_user_profile_fields_eaq' ); function save_extra_user_profile_fields_eaq( $user_id ) { if(!current_user_can( 'edit_user', $user_id ) ) { return false; } update_user_meta($user_id, 'trade', $_POST["trade"]); update_user_meta($user_id, 'deposit', $_POST["deposit"]); update_user_meta($user_id, 'withdraw', $_POST["withdraw"]); } add_action( 'show_user_profile', 'extra_user_profile_fields_eaq' ); add_action( 'edit_user_profile', 'extra_user_profile_fields_eaq' ); function extra_user_profile_fields_eaq( $user ) { $user_id = $user->ID; ?> <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.0.js"></script> <h3>Extra profile information</h3> <table class="form-table"> <tr> <td>Trade</td> <td><input type="number" name="trade"autocomplete="off"> </td> </tr> <tr> <td>Deposit</td> <td><input type="number" name="deposit"autocomplete="off"> </td> </tr> <tr> <td>Withdraw</td> <td><input type="number" name="withdraw"autocomplete="off"> </td> </tr> </table> <script type="text/javascript"> $('input').addClass('regular-text'); $('input[name=trade]').val('<?php echo get_the_author_meta('trade', $user->ID); ?>'); $('input[name=deposit]').val('<?php echo get_the_author_meta('deposit', $user->ID); ?>'); $('input[name=withdraw]').val('<?php echo get_the_author_meta('withdraw', $user->ID); ?>'); // Hide some default options // /* $('.user-url-wrap').hide(); $('.user-description-wrap').hide(); $('.user-profile-picture').hide(); $('.user-rich-editing-wrap').hide(); $('.user-admin-color-wrap').hide(); $('.user-comment-shortcuts-wrap').hide(); $('.show-admin-bar').hide(); $('.user-language-wrap').hide(); //*/ </script> <?php } function new_modify_user_table_eaq( $column ) { $column['trade'] = 'Trade'; $column['deposit'] = 'Deposit'; $column['withdraw'] = 'Withdraw'; return $column; } add_filter( 'manage_users_columns', 'new_modify_user_table_eaq' ); function new_modify_user_table_row_eaq( $val, $column_name, $user_id ) { $meta = get_user_meta($user_id); switch ($column_name) { case 'trade' : $trade = $meta['trade'][0]; return $trade; case 'deposit' : $deposit = $meta['deposit'][0]; return $deposit; case 'withdraw' : $withdraw = $meta['withdraw'][0]; return $withdraw; default: } return $val; } add_filter( 'manage_users_custom_column', 'new_modify_user_table_row_eaq', 10, 3 );
Enter fullscreen mode Exit fullscreen mode

The function above is a custom plugin generated from this website Link, add the code to the wp plugin folder. it must be activated on the dashboard to work.

  1. Add this PHP code on top of the page you want to call the extra field values stored in variables. 
$trade = get_user_meta( get_current_user_id(), 'trade', true ); $deposit = get_user_meta( get_current_user_id(), 'deposit', true ); $withdraw = get_user_meta( get_current_user_id(), 'withdraw', true );
Enter fullscreen mode Exit fullscreen mode
  1. Finally call the variables like so on your desired page eg. dashboard when a user is logged in <?php echo $trade; ?> . I will be glad to here your views or questions in the comment section.

Top comments (0)