0

I have been to trying to add one more column of mobile number field in the account page of a user in admin. So i found this good looking code from

https://coderwall.com/p/g72jfg/adding-a-phone-numer-field-to-wordpress-user-profile

Now what i am trying to do, is to build a custom widget for the dashboard so that the user will also have access to change his mobile number directly from there (So it must also be there an update button in the widget). You can see photos attached for the ideathis is what you can see in users account

this is how the widget should look like

-first image is how the widget should look like in the dashboad,

-second image is what you can see in users account now.

I know some simple examples to create a dashboard widget with echo like this

http://www.wpbeginner.com/wp-themes/how-to-add-custom-dashboard-widgets-in-wordpress/

, but until now i couldn't build it .

Any help would be appreciated.

  • OK and what is the problem? You don`t know how to add an save button to an dashboard widget? Did you read the documentation on wordpress.org Dashboard Widgets API? – user141080 Apr 24 '18 at 11:30
  • Hello user141080, Thank you for your reply, i managed to make just a basic widget like that premium.wpmudev.org/blog/… ,and then inside the echo i placed the form with the field and submit button, but nothing happens. Shouldn't it some how save the new field information? Sorry but i am newbie on this, and i couldn't get it working.Could you send me some example? – Honoluluman Apr 25 '18 at 7:34
1

i built an small/simple example and i hope it will help you.

Admin dashboard widget with an save button

Admin dashboard widget with an save button

First, we register a function which tells wordpress that we want to create an admin dashboard widget

/**
 * Registration of the Admin dashboard widget
 */
function ch_add_dashboard_widgets() {

    wp_add_dashboard_widget(
        'user_email_admin_dashboard_widget',      // Widget slug
        __('Extra profile information', 'ch_user_widget'),         // Title
        'ch_user_email_admin_dashboard_widget' // Display function
    );  
}

// hook to register the Admin dashboard widget
add_action( 'wp_dashboard_setup', 'ch_add_dashboard_widgets' );

Then we create the function that renders your widget

/**
 * Output the html content of the dashboard widget
 */
function ch_user_email_admin_dashboard_widget() {

  // detect the current user to get his phone number
  $user = wp_get_current_user();
  ?>


  <form id="ch_form" action="<?php echo esc_url( admin_url( 'admin-ajax.php' ) ); ?>" method="post" >

    <!-- controlls on which function the post will send -->
    <input type="hidden" name="cp_action" id="cp_action" value="ch_user_data">

    <?php wp_nonce_field( 'ch_nonce', 'ch_nonce_field' ); ?>

    <p>Please add your phone number</p>

    <p>
        <label for="phone">Phone Number</label>
        <input type="text" name="phone" id="cp_phone_number" value="<?php echo esc_attr( get_the_author_meta( 'phone', $user->ID ) ); ?>" class="regular-text" />
    </p>
    <p>

      <input name="save-data" id="save-data" class="button button-primary" value="Save" type="submit">  
      <br class="clear">
    </p>

</form>

<?php
}

Ok the next part is the saving. There are two ways to save your widget data.

The first one is to send the data via a normal "form-post-request". That the way how typical forms on websites works. Which means you have an form, you put your date in, hit the submit button and the data will send to the server. The server does someting with that data and than the user will redirect to onther page for instance an "Thank you"-page.

The second way is almost the same as the first but with one exception the "form-post-request" will send via AJAX (short for "Asynchronous JavaScript And XML"). The advantage of this way is, we stay on the same page (expressed in a very simple way).

To you use the second way we have to tell wordpress two thinks. First which function should be called by the ajax request and where your javascript file lies.

/**
 * Saves the data from the admin widget
 */
function ch_save_user_data() {

    $msg = '';
    if(array_key_exists('nonce', $_POST) AND  wp_verify_nonce( $_POST['nonce'], 'ch_nonce' ) ) 
    {   
       // detect the current user to get his phone number
       $user = wp_get_current_user();

       // change the phone number
       update_usermeta( $user->id, 'phone', $_POST['phone_number'] );

       // success message
       $msg = 'Phone number was saved';
    }
    else
    {   
       // error message
       $msg = 'Phone number was not saved';
    }

    wp_send_json( $msg );
}

/**
 * ajax hook for registered users
 */
 add_action( 'wp_ajax_ch_user_data', 'ch_save_user_data' );



/**
 * Add javascript file
 */
function ch_add_script($hook){

   // add JS-File only on the dashboard page
   if ('index.php' !== $hook) {
       return;
   }

   wp_enqueue_script( 'ch_widget_script', plugin_dir_url(__FILE__) ."/js/widget-script.js", array(), NULL, true );
}

/**
 * hook to add js
 */
add_action( 'admin_enqueue_scripts', 'ch_add_script' );

ok the last point this the content of the javascript file.

jQuery("#ch_form").submit(function(event) {

   /* stop form from submitting normally */
   event.preventDefault();

  /* get the action attribute from the form element */
  var url = jQuery( this ).attr( 'action' );

  /* Send the data using post */
  jQuery.ajax({
    type: 'POST',
    url: url,
    data: {
        action: jQuery('#cp_action').val(),
        phone_number: jQuery('#cp_phone_number').val(), 
        nonce: jQuery('#ch_nonce_field').val()
    },
    success: function (data, textStatus, XMLHttpRequest) {
        alert(data);
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
        alert(errorThrown);
    }
  });

});

Ok and to the end some usefull links:

"AJAX in Plugins" on wordpress.org

What is Ajax? Plugin Handbook on wordpress.org

Dashboard Widgets API on wordpress.org

Handling POST Requests the WordPress Way on sitepoint.com

EDIT:

I put the whole code into an plugin and published it on github.

Link: https://github.com/user141080/admindashboardwidget

0

Wooooow, thank you very much user141080,

To me it looks a lot of work what you did there! I can understand the html part for form, and most of the php saving the data part, but regarding the js i am totally out of the game :)

I confirm that i tested your plugin and works perfectly fine! I was even able to add more fields by just adding in the js in the area of the code

data: {
        action: jQuery('#cp_action').val(),
        phone_number: jQuery('#cp_phone_number').val(),
        city_area: jQuery('#cp_city').val(),  
        nonce: jQuery('#ch_nonce_field').val()
    },

aside with the appropriate fields.

The only issue that i have noticed is that, since i want this plugin to run aside with the code that i used (https://coderwall.com/p/g72jfg/adding-a-phone-numer-field-to-wordpress-user-profile) for saving also the fields in the users profile page, when i save the data from the dashboard widget then after a simple refresh page on the users profile page,i can see the new updated data, but if i save the data from the users profile page then after a simple refresh page on the dashboard i don't have the new updated data. If i logout and login the user, then i get them. I suppose this have to do with something like this command?

// detect the current user to get his phone number
$user = wp_get_current_user();

Thank you for your effort, i guess i would never be able to go so far and built it as you did :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.