Add custom fields for job, request and user

To add custom fields to a job (edit Post new or edit job page), to a request (edit Post new or edit request page) or to user’s profile (edit Settings page (and Authentication - Register page if you want the field on registration page)) the next steps have to be followed.

1. Write a shortcode

Go on the page (Admin Dashboard > Pages) where you want to add one or multiple custom field(s) and add a new Gutenberg shortcode element.

Type: Input 

Shortcode:
[input name=input_name_written_without_spaces_or_symbols_except_underscore  type=text  placeholder="Insert your placeholder"]

[input name=input_name type=checkbox values="Option 1, Options 2, Option 3"]

[input name=input_name labeled=yes label_content="I will" label_alignment=left]

[input name=input_name labeled=yes label_left_content="I will" label_right_content="USD" label_alignment=both]

[input name=input_name with_icon=yes icon_alignment=right icon_class="bell"]

Attributes:
  • type - the type of the input
  • name - the name of your input, written without spaces, numbers or symbols, except the underscore
    • required field: yes
  • placeholder - specifies a short hint that describes the expected value
  • id - the id of the input
  • class - the class of the input
  • value - the default value of your input
  • values - this attribute is only available for checkboxes and radio types and specifies input options; the options must be separated by commas
  • min - specifies a minimum value
  • max - specifies the maximum value
  • maxlength - specifies the maximum number of characters allowed
  • step - specifies the interval between legal numbers
  • size - specifies the width, in characters
  • pattern - specifies a short hint that describes the expected value
  • labeled - specifies the input label; label_content and label_alignment must be set to use this attribute
    • values: yes, no
    • default: no
  • label_content - the text of the label; labeled must be set to yes to use this attribute
  • label_left_content - the left text of the label; labeled must be set to yes and label_alignment to left to use this attribute
  • label_right_content- the right text of the label; labeled must be set to yes and label_alignment to right to use this attribute
  • label_alignment - specifies the alignment of the label
    • values: left, right, both (label_left_content and label_right_content must be set)
    • default: left
  • with_icon - specifies the input icon; icon_alignment and icon_class must be set to use this attribute
    • values: yes, no
    • default: no
  • icon_alignment - specifies the alignment of the icon
    • values: left, right
    • default: left
  • icon_class - Semantic UI class for the icon
  • required - specifies that an input field must be filled out before submitting the form
    • values: 1, 0
    • default: 0
  • disabled - specifies that the element should be disabled
    • values: 1, 0
    • default: 0
  • dial_code - display an input, with the country flag in front, for phone numbers
    • values: yes, no
    • default: no


Type: Textarea

Shortcode:
[textarea name=input_name_written_without_spaces_or_symbols_except_underscore  type=text  placeholder="Insert your placeholder"]
Attributes:
  • name - the name of your textarea, written without spaces, numbers or symbols, except the underscore
    • required field: yes

  • placeholder - specifies a short hint that describes the expected value
  • id - the id of the textarea
  • class - the class of the textarea
  • value - the default value of your textarea
  • maxlength - specifies the maximum number of characters allowed
  • wrap - specifies how the text in a textarea is to be wrapped when submitted in a form
    • value: hard, soft
  • cols - specifies the visible width of a textarea
  • rows - specifies the visible number of lines in a textarea
  • resizable - can be used to alter the size of the element on the page
    • values: 1, 0
    • default: 1
  • required - specifies that the textarea field must be filled out before submitting the form
    • values: 1, 0
    • default: 0
  • disabled - specifies that the element should be disabled
    • values: 1, 0
    • default: 0


Type: Select

Shortcode:

[select name=input_name values="Option 1, Option 2, Option 3"]

[select select_search=yes multiple=yes name=input_name values="Option 1, Option 2, Option 3"]

Attributes:
  • name - the name of your dropdown, written without spaces, numbers or symbols, except the underscore
    • required field: yes
  • id - the id of the input
  • class - the class of the input
  • values - specifies input options; the options must be separated by commas
  • multiple - specifies whether multiple options can be selected
    • values: yes, no
    • default: no
  • select_search - specifies whether the dropdown contains a section for finding options
    • values: yes, no
    • default: no
  • required - specifies that the select field must be filled out before submitting the form
    • values: 1, 0
    • default: 0
  • disabled - specifies that the element should be disabled
    • values: 1, 0
    • default: 0


Type: Tag

Shortcode:

[tag name=input_name]

Attributes:
  • name - the name of your tags input, written without spaces, numbers or symbols, except the underscore
    • required field: yes

  • id - the id of the tags input
  • class - the class of the tags input
  • value - the default value of your tags input
  • required - specifies that the tags input field must be filled out before submitting the form
    • values: 1, 0
    • default: 0
  • disabled - specifies that the element should be disabled
    • values: 1, 0
    • default: 0

2. Display the shortcode

To display a field, use the same name that you typed in step one.

To display the value for a certain post ID or user ID, use the 'id' attribute, after the name.

Example: [user_custom_field name=user_age id=1]

Attributes:

  • name - the name of the field used in step one
  • id - the id of the post or user for whom you want to display the value
  • type - the output type

Shortcodes:

  • Shortcode for Job presentation page: [job_custom_field name=input_name_written_without_spaces_or_symbols_except_underscore]
  • Shortcode for Request presentation page: [request_custom_field type=tag name=input_name_written_without_spaces_or_symbols_except_underscore]
  • Shortcode for User Profile page: [user_custom_field name=input_name_written_without_spaces_or_symbols_except_underscore]