Adding tags and inputs to a user's profile

Question

I'm adding a number of items to the user profiles using this method in my functions.php

function modify_contact_methods($profile_fields) {

    // Add new fields
    $profile_fields['twitter'] = 'Twitter Username';
    $profile_fields['facebook'] = 'Facebook URL';
    $profile_fields['gplus'] = 'Google+ URL';

    return $profile_fields;
}
add_filter('user_contactmethods', 'modify_contact_methods');

The above seems ideal for adding text input under the contact area of the profile.

I'm also curious how I can add a text area or checkboxes to a user's profile? Additionally, is there a way to add tags from the blog as a field in the user profile?

Ideally, I'd have a field labeled "Specialties" or "Areas of Expertise" which would be blog tags. And when the tags are used on the front end, this particular user's profile will show up among those results.

Answer 1

This is a great plugin that allows you to easily add custom fields to Users (among other things).

http://www.advancedcustomfields.com/

This tutorial will help you retrieve the values from user: http://www.advancedcustomfields.com/resources/how-to/how-to-get-values-from-a-user/

Answer 2

I've seen a nice Tag auto-complete field in the plugin WordPress Admin Style, by Frank Bueltge (pretty essential to design admin pages). The list is hardcoded in JavaScript, we can use Ajax or wp_localize_script to get the real thing.

It goes like this in the markup:

<!-- Autocomplete -->
<h3 id="anker_autocomplete" class="demoAutocomplete">Autocomplete</h3>
<label for="autocomplete">Tags: </label>
<input id="autocomplete" type="text" />     

And the jQuery:

// autocomplete
var availableTags = [
    "ActionScript",
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    "C++",
    "Clojure",
    "COBOL",
    "ColdFusion",
    "Erlang",
    "Fortran",
    "Groovy",
    "Haskell",
    "etc..."
];
$( "#autocomplete" ).autocomplete({
    source: availableTags
});
$( "#autocomplete-core" ).autocomplete({
    source: availableTags,
    position: ( 'undefined' !== typeof isRtl && isRtl ) ? { my: 'right top', at: 'right bottom', offset: '0, -1' } : { offset: '0, -1' },
    open: function() { $(this).addClass('open'); },
    close: function() { $(this).removeClass('open'); }
});

And, finally, make this field repeatable:

• Arrange custom fields with drag and drop?

• Adding Widget form fields dynamically