How to use Hook Wordpress

Question

I am using One User Avatar to upload profile pictures from frontend. Link to plugin with documentation: https://github.com/onedesigns/one-user-avatar

In the documentation it says - If you're building your own profile edit page with other fields, One User Avatar is automatically added to the show_user_profile and edit_user_profile hooks. If you'd rather have One User Avatar in its own section, you could add another hook:

do_action( 'edit_user_avatar', $current_user );

Then, to add One User Avatar to that hook and remove it from the other hooks outside of the administration panel, you would add this code to the functions.php file of your theme:

function my_avatar_filter() {
    // Remove from show_user_profile hook
    remove_action( 'show_user_profile', array( 'wp_user_avatar', 'wpua_action_show_user_profile' ) );
    remove_action( 'show_user_profile', array( 'wp_user_avatar', 'wpua_media_upload_scripts' ) );

    // Remove from edit_user_profile hook
    remove_action( 'edit_user_profile', array( 'wp_user_avatar', 'wpua_action_show_user_profile' ) );
    remove_action( 'edit_user_profile', array( 'wp_user_avatar', 'wpua_media_upload_scripts' ) );

    // Add to edit_user_avatar hook
    add_action( 'edit_user_avatar', array( 'wp_user_avatar', 'wpua_action_show_user_profile' ) );
    add_action( 'edit_user_avatar', array( 'wp_user_avatar', 'wpua_media_upload_scripts' ) );
}

// Loads only outside of administration panel
if ( ! is_admin() ) {
    add_action( 'init','my_avatar_filter' );
}

What I'm trying to do is add One User Avatar to the user profile edit page but I don't have a clear idea of how to use the suggested hooks.

The idea would be to add One User Avatar to Advanced Custom Fields (ACF) fields: https://www.advancedcustomfields.com/resources/

or alternatively make it work with Profile Builder Pro: https://www.cozmoslabs.com/docs/profile-builder-2/

I have all the documentation, I have been looking for a solution for over 5 days and I have tried several times without success. As I'm relatively new to Wordpress and php, I don't have a clear idea of what steps to take.

Could someone give me a tip?

Answer 1

Well, let me explain the concept of hooks in WordPress. Generally, hooks are execution points in WordPress, where on those specific execution points, data can be manipulated or content can be attached. There are two types of hooks in WordPress i)Action Hook ii)Filter Hook

1. Action hooks are generally used to attach content or modify content without returning the content. Eg do_action('hook_tag_name', $data) -> This is how a hook is decalred in plugins for third party developers. Now if someone wants to modify the data on the 'hook_tag_name', then simply use this syntax here add_action('hook_tag_name', 'callback_function', 10, 1) . Inside this callback function 'callback_function', one can simply insert his/her own custom content like this eg -> function callback_function($data) {echo "Hello World;";} Similar to the syntax above you can modify the content without returning it, in the case of filter hooks, you have to use the keyword 'return' inside the callback function attached to the hook. Also, the number '10' -> is the priority, 1 -> is the number of parameters passed within the hook. In this case '$data' is the parameter which is actually 1 parameter. You can pass multiple parameters like this -> do_action('hook_tag_name', $data, $data2, ...)

2. For filters, this is the syntax apply_filters('hook_tag_name', $data) . To modify the data inside the 'hook_tag_name', simply use this syntax here -> add_filter('hook_tag_name', 'callback_function', 10, 1) , where '10' is the priority of the filter hook for execution '1' is the number of data passed inside the filter hook. But please note that in terms of filter hook if a 'data' is passed on the filter hook, it needs to be returned, if it is not returned then it will throw an error. Here is how it would look like -> function callback_function($data){ return $data; } function callback_function($data){ return $data; }

Now back to your point, in your case wpua_action_show_user_profile is the callback function. define this function like this function wpua_action_show_user_profile($current_user_object) . You need to modify the $current_user_object profile image url. In order for the avatar to change, let me know if you need anything else. Or You can use this code to change the src of the avatar. This hook will help you -> add_filter('get_avatar_data', function($user, $data){var_dump($user);return $user;},10, 2); . Make sure to var_dump the payload prior to applying any new-avatar link