QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Carbon Ads Customizing WordPress Admin Profile Page

Customizing WordPress Admin Profile Page

customize-profile

This post is a part 13 of Creating a WordPress Admin Theme post series.

In this article I will show you how to add fields on WordPress admin profile page. And then how to retrieve the profile information for our customized fields on front-end.


Adding new field to WordPress profiles

To add markup for new fields to admin profile page you need to use show_user_profile and edit_user_profile actions. And then to save the field data when form is submitted you need to use personal_options_update and edit_user_profile_update actions.

update_user_meta is used to store custom profile data in WordPress database. And to retrieve custom profile data from database we need to use get_user_meta.

Displaying new fields

<?php
//$profileuser contains basic profile information about the currently logged in user. Basic profile info includes user id, email, username etc. We need the user id to retrieve profile data specific to a user
function add_profile_fields($profileuser)
{
    $facebook_url = get_user_meta($profileuser->ID, 'facebook_url', true);
    $twitter_url = get_user_meta($profileuser->ID, 'twitter_url', true);
        ?>
        <h3><?php _e('Social Information'); ?></h3>
        <table class="form-table">
            <tr>
                <th><label for="facebook_url"><?php _e('Facebook Profile URL'); ?></label></th>
                <td><input type="text" name="facebook_url" id="facebook_url" value="<?php if(isset($facebook_url)){ echo esc_attr($facebook_url); } ?>" class="regular-text" /></td>
            </tr>
            <tr>
                <th><label for="twitter_url"><?php _e('Twitter Profile URL'); ?></label></th>
                <td><input type="text" name="twitter_url" id="twitter_url" value="<?php if(isset($twitter_url)){ echo esc_attr($twitter_url); } ?>" class="regular-text" /></td>
            </tr>
        </table>
    <?php
}

//attach same callback to both actions
add_action('show_user_profile', 'add_profile_fields');
add_action('edit_user_profile', 'add_profile_fields');
?>

Saving fields when form is submitted

<?php
//$user_id is assigned to the id of currently logged in user. We need the user id to store profile data specific to a user
function update_profile_fields($user_id)
{
    if(!empty($_POST['facebook_url']))
    {
        update_user_meta($user_id, 'facebook_url', sanitize_text_field($_POST['facebook_url']));
    }

    if(!empty($_POST['twitter_url']))
    {
        update_user_meta($user_id, 'twitter_url', sanitize_text_field($_POST['twitter_url']));
    }
}

//attach same callback to both actions
add_action( 'personal_options_update', 'update_profile_fields');
add_action( 'edit_user_profile_update', 'update_profile_fields');
?>

Capture

You can also include advanced fields like file upload fields. They can be used for uploading profile images. Many themes use Gravatar to retrieve image of a user but having option to upload a profile pic in admin panel makes the theme stand out.

Displaying custom profile fields based on user role

If you want users with different roles to have different profile fields in the profile page then you can use the below code to retrieve the role of the currently logged in user and then display appropriate fields using conditionals.

function get_current_user_role() {
        global $wp_roles;
        $current_user = wp_get_current_user();
        $roles = $current_user->roles;
        $role = array_shift($roles);
        return isset($wp_roles->role_names[$role]) ? translate_user_role($wp_roles->role_names[$role] ) : false;
}

Retrieve profile information on front-end

Let’s see how to retrieve author’s profile information, use the function get_the_author_meta inside WordPress loop to retrieve basic information of the current page/post author. To retrieve custom profile fields values use the get_user_meta function supplied with the author id retrieved from get_the_author_meta function.

Let’s see how to retrieve logged in users profile information, first retrieve the user id of the logged in user using get_current_user_id function. Now use the function get_the_author_meta to retrieve basic profile information and use get_user_meta to retrieve custom profile information supplied with the user id.

Oct 10, 2014Narayan Prusty
Generating Image PlaceholdersDatabase Design for Analytics
Comments: 1
  1. Thomas
    5 years ago

    Hi,

    u didn’t say which files did u modify and where did u add the code. Could u pls precise it ?

    Thanks,k
    Thomas

    ReplyCancel

Leave a Reply Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

Image8 years ago 1 Comment WordPress
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
  • Adding new field to WordPress profiles
  • Displaying custom profile fields based on user role
  • Retrieve profile information on front-end
Related Articles
  • WordPress MySQL Database Table Structures
  • WordPress Multisite Database Table Structures
  • Customizing WordPress Admin Toolbar
  • Designing WordPress Posts UI For Post Formats
  • Database Design for Analytics
Our Sponsor
My Books

2014 - 2015 © QNimate
All tutorials MIT license