Managing Custom Fields

Introduction

Custom fields are the heart of UPME for creating awesome user profiles with your own fields. UPME custom fields are similar to Custom Fields for posts and pages in WordPress. You can create unlimited number of custom fields for your user profiles. Each user will have access to all/part of the fields based on its permission levels. You can access the custom fields by navigating to UPME Settings -> Custom Fields section. Following screenshot previews the default custom fields screen.

1

Custom Field Types

There are 2 types of fields in UPME. First type is the Separator fields, which are used to separate group of fields. Profile fields are the second field type. We can use profile fields to construct the registration form or profile. UPME has 10 built-in custom fields in Profile Fields section, including the most basic form fields. You can create multiple fields from each field type to be used in registration and profile. Let’s take a look at the field types and their functionality.

  • Text Field

    Text field is used for default text based input from users. Currently there are no built-in validations for text fields.Works similar to normal HTML text field.

  • Image Upload Field

    Image upload field is used to upload images to user profiles. This field is also used to upload user profile picture, which is available as a built-in field. You can’t upload non-image file types using this field.

  • Textarea Field

    Textarea field is used to get text based descriptions from users. Works similar to normal HTML textarea field.

  • Select Dropdown Field

    Select field is used to capture user intput using dropdown values. It uses same value for both key and label. You can’t use different values for keys and labels at this stage.Works similar to normal HTML select field.

  • Radio Field

    Radio field is used to capture user intput using radio button values. It uses same value for both key and label. You can’t use different values for keys and labels at this stage.Works similar to normal HTML radio field.

  • Checkbox Field

    Checkbox field is used to capture user intput using checkboxes. It uses same value for both key and label. You can’t use different values for keys and labels at this stage.Works similar to normal HTML checkbox field.

  • Password Field

    Password field is used to capture the user password on registration and edit profile. UPME comes with built-in fields for password and confirm password. If needed, you can create your own password fields. However, it might not be necessary in general.Works similar to normal HTML password field.

  • Date Picker Field

    Date Picker field is used to capture the dates from users. Uses jQuery datepicker to generate the calendar. It works with default options. You can’t change settings without modifying the code.

  • Video Field

    Video fields lets users insert links for videos from Youtube and Vimeo. You need to insert the complete URL captured while watching the video. This field display either Youtube or Vimeo player inside the profile.

  • Soundcloud Field

    Souncloud field is used to add audios to your profiles. You can get a link to audio file from soundcloud and insert into this field. It will display the soundcloud audio player inside the profile

UPME provided these 10 field types within the core. Some of you may need advanced field types to cater additional requriemnts on your site like file uploading, google maps, lists etc. In such cases, you can prchase the UPME Custom Field Types addon for adding many new field types into UPME Custom fields section.

Built-In Custom Fields

UPME offers 17 built-in field types for user profiles. Some of these fields are mandatory while some of these fields are optional. So you need know about each and every default field for optimize the usage and prevent any conflicts. These 17 fields are separated into 4 sections using following separator fields.

  • Profile Info

  • Contact Info

  • Social Profiles

  • Account Info

These 4 separator fields are used to group the default profile fields into different sections. These fields doesnt offer any functionality other than displaying separator inside the profile and registration form. Let’s take a look at the profile fields and their functionality within these sections.

Profile Fields in Profile Info

There 6 profile fields within this section for managing personal information of user. These fields will be displayed under the Profile Info section inside the profile.

  • Profile Picture

    This field is used to upload the profile picture to the user profiles. Profile picture is a mandatory field and hence you shoudnt modify or delete this field. However, you have the option to use your own field for profile picture. In such cases, you should use user_pic as the meta key of your field. Otherwise, profile picture uploading doesnt work.

  • First Name

    This field is used to capture the first name of user. It’s an optional field and hence you can modify or delete this field.

  • Last Name

    This field is used to capture the last name of user. It’s an optional field and hence you can modify or delete this field.

  • Display Name

    This field is used display name of the user. It’s an optional field and hence you can modify or delete this field.

  • Author/Bio

    This field is used to capture the description about the user and hence considered optional. You can delete/modify this field or create your own description field.

  • Custom Photo 1

    This field is created to illustrate the image upload capabilities of UPME. This is entirely optional and you can modify/delete this field anytime.

Profile Fields in Contact Info

There are 2 profile fields within this section for managing contact information of user. These fields will be displayed under the Contact Info section inside the profile.

  • Email

    This field is created to capture the email of the user in registration and profile. This field mandatory and hence deleting/updating this field is not recommended. If you need to make changes to this field, please get the support from the UPME support forum.

  • Website

    This field is created to capture the website of the user in registration and profile. This field is optional and hence you can modify/delete this field.

Profile Fields in Social Profiles

There are 3 profile fields within this section for managing social profiles related information of user. These fields will be displayed on the header of the profile as icons.

  • Facebook

    This field is created to capture the Facebook ID of the user. This field is optional and hence you can delete/update this field. User need to insert the Facebook Id to this field and UPME will prefix it with the Facebook URL on profile. You are allowed to create your own field for capturing Facebook ID. However, Facebook URL will only be added to this field with facebook meta key. For custom fields, user will need to enter the full URL.

    Example – User enters themefluent as Facebook ID. Facebook icon on profile will link to http://www.facebook.com/themefluent.

  • Twitter Username

    This field is created to capture the Twitter username of the user. This field is optional and hence you can delete/update this field. User need to insert the Twitter username to this field and UPME will prefix it with the Twitter URL on profile. You are allowed to create your own field for capturing Twitter username. However, Twitter URL will only be added to this field with twitter meta key. For custom fields, user will need to enter the full URL.

    Example – User enters themefluent as Twitter username. Twitter icon on profile will link to http://www.twitter.com/themefluent.

  • Google+

    This field is created to capture the Google+ Id of the user. This field is optional and hence you can delete/update this field. User need to insert the Google+ Id to this field and UPME will prefix it with the Google+ URL on profile. You are allowed to create your own field for capturing Google+ Id. However, Google+ URL will only be added to this field with googleplus meta key. For custom fields, user will need to enter the full URL.

    Example – User enters themefluent as Google+ Id. Google+ icon on profile will link to https://plus.google.com/themefluent.

You can create your own custom fields for other sites such as LinkedIn, Instagram etc. However, you will have to enter the complete URL instead of username or ID. Alternative option is to use UPME filters are add URL prefix to the prefered social networking sites.

Profile Fields in Account Info

There are 2 profile fields within this section for managing account information of user. These fields will be displayed under the Account Info section inside the profile.

  • New Password

    This field is used to capture the password of user. This is a mandatory filed and hence you should not delete/modify this field at any stage. Removing this field will create major conflicts and you will have to reset all the fields to default.

  • Confirm Password

    This field is used to capture the password confirmation of the user.This is a mandatory filed and hence you should not delete/modify this field at any stage. Removing this field will create major conflicts and you will have to reset all the fields to default.

Most of these built-in fields types are created to give you an idea of how custom fields works and use UPME by default without changing any confgurations. So feel free to delete/modify the optional fields to see how it works. In the next section, we are going to look at how custom fields are created in UPME.

Creating Custom Fields

Custom field creation form is available on the top of the Custom Fields section. You can click on the Click here to add new field button to display the form as shown in the following screenshot.

2

There are number of settings available in the custom field creation form and its important to understand the funnctionality of each of these settings to make optimum use and prevent any conflicts. Let’s take a look at each setting in custom field creation screen.

  • Type

    This option defines whether the custom field is a profile field or separator.

  • Editor/ Input Type

    This option is enabled when you choose Profile Field for the Type setting. You can chooose from 10 built-in profile field types.

  • Label

    This option is used to specifiy the display label for the new custom field.

  • Exisitng Meta Key/ Field

    You need to specify a meta key for all the custom fields and the field value is saved on the usermeta table with respective meta key. When creating new custom fields, you can choose a new meta key or choose one from exisiting meta keys. We recommend you to use new meta keys whenever possible to prevent conflicts. However, you might need to use exisitng meta key, when you are importing a field created from another plugin.

  • New Custom Meta Key

    This is option is enabled when you select New Custom Meta Key for the Exisitng Meta Key/ Field option. You have to define a unique key to be used as the meta key for the new custom field.It is recommended to only use alphanumeric characters and underscores, for example my_custom_meta is a proper meta key.

  • Tooltip Text

    A tooltip text can be useful for social buttons on profile header.

  • This field is social

    This option is used to define a field as a social field. Social fields are only displayed in the head of your profile. Such as Facebook page, Twitter, etc.

  • User can edit

    Specifies whether profile owner can edit this field or not. If you select No as the value, this field will be used as an information field for users.

  • Allow HTML Content

    If yes, users will be able to write HTML code in this field.

  • User can hide

    Allow users to hide this profile field from public viewing or not. Selecting No will cause the field to always be publicly visible if you have public viewing of profiles enabled. Selecting Yes will give the user a choice if the field should be publicy visible or not. Private fields are not affected by this option.

  • This field is private

    Make this field Private. Only admins can see and edit private fields.

  • This field is required

    Selecting yes will force user to provide a value for this field at registeration and edit profile. Registration or profile edits will not be accepted if this field is left empty.

  • Show on Registration form

    Show this field on the registration form? If you choose no, this field will be shown on edit profile only and not on the registration form. Most users prefer fewer fields when registering, so use this option with care.

  • Display by User Role

    If no, this field will be displayed on profiles of all User Roles. Select yes to display this field only on profiles of specific User Roles.

  • Select User Roles

    This field will only be displayed on users of the selected User Roles.

  • Editable by Users of Role

    If yes, available user roles will be displayed for selection.

  • Select Roles that can Edit

    Selected user roles will have the permission to edit this field.

  • Help Text

    Show this help text under the profile field.

  • Icon for this field

    You can use this option to add an icon from Fontawesome icons set for the custom field

Once creation is completed, fields will be added to the bottom of the list.

Updating Custom Fields

You can update custom fields by clicking the edit icon inline with each field. It will open the edit field screen as shown in the following screenshot.

3

The edit screen will contain most of the options we used in creating the field. So you can modify these options as needed. You will also get some addtional options in edit field screen for some of the fields. Let’s identify the unique options for the edit screen.

  • Position

    This field contains numeric values for defining the position in the field. Fields with lower positions will be displayed on top while fields with higher positions will be displayed on the bottom of profile and registration screen. You can manually change the positions as you wish or use drag and drop fields to autmatically adjust the postions.

  • Available Choices

    This option is limited to dropdown, radio and checkbox fields. You will have to add the options for dropdowns, radio button or checkboxes into this field. Each option should be on one line of the Available Choices field. You should never use comma separated options here.

  • Enable Predefined Choices

    This option allows you to enable predefined list for dropdowns, radio buttons or checkboxes. Currently, UPME provides one predefined list for countries. When you enable predefined list, you dont need to define the Available Choices.

You can edit all the options from edit field screen except field type. However, I recommend you to check out Important Tips for Using Custom Fields section to learn how to use create and edit screens without causing any conflicts.

Resetting Custom Fields

You can use the Reset to Defaults button to remove your own fields and reset it to default fields with default settings. Resetting will remove your own fields from the UPME custom fields list. However, the data for these fields will be still available with repective meta keys in wp_usermeta table. If you decide to use these data in a later date, you can just create a new custom field with same meta key and it will work as before.

Deleting Custom Fields

Custom fields can be permenantly deleted using the cross icon in Trash column of custom fields list. Deleting the field will remove it from the UPME fields list. However, data for this field will be still available in wp_usermeta table. If you need to clear the data, you will have to use SQL query on your database to remove the records with meta key of that field from the wp_usermeta table.

Please keep in mind that deleting Email, Password, Confirm Password and Profile Picture field might create conflicts and cause some fetures to break. So contact support forum and get guidence before making such change.

Important Tips for Using Custom Fields

This section explains how to get the most out of UPME custom fields, without generating unnecessary conflicts.

  • UPME allows you to create unlimited fields. But the number of fields depends on the value of max_input_vars variable in your PHP installation. Generally, its set to 1000 and you can work with around 40-50 UPME Fields. If you want to create large number of fields, we recommend you to increase the value of max_input_vars variable to 2000/3000.
  • You can speed up custom field create and update by enabling the Use AJAX on Custom Fields setting from UPME General Settings section.
  • File upload fields are not allowed in registration and backend profiles. So don’t look for the Show on Registration setting for file uploads.
  • You should use drag and drop fields to change the order of the fields whenever possible. Use manual position assigning, only if you can’t get drag and drop to work.
  • You can change the meta key for custom fields using the edit screen. However, we recommend you to minimize the meta key changes from edit field screen.
  • You can change the input type for custom fields using the edit screen. However, we recommend you to minimize the input thype changes from edit field screen to prevent conflicts.
  • Drag and drop each field for change the ordering of fields. Keep in mind that you have to click Save Changes button to permenantly apply the fields order.
  • In some situations, many useres requested to get fields like first and last names before the fields like username and email. Please note that fields like username, email are mandatory and hence enabled within the UPME core files. So you can’t change the order of these fields. You can only change the order of dynamic fields aavailable after the fixed fields.

Import/Export Custom Fields

Custom fields and respective settings are stored in wp_options table with a key called upme_profile_fields. Currently, we dont have an import/export system for custom fields. If you need to backup custom fields, you can get the value of upme_profile_fields meta key in wp_options table and save it somewhere.

Import/Export for custom field will be available in near future.