{"id":928,"date":"2025-03-24T14:28:03","date_gmt":"2025-03-24T14:28:03","guid":{"rendered":"https:\/\/wpgeodirectory.com\/documentation\/article\/create-a-custom-input-field\/"},"modified":"2025-04-03T15:24:23","modified_gmt":"2025-04-03T14:24:23","slug":"create-a-custom-input-field","status":"publish","type":"gd_place","link":"https:\/\/wpgeodirectory.com\/documentation\/article\/code-snippets\/create-a-custom-input-field\/","title":{"rendered":"Create a custom input field"},"content":{"rendered":"\n

\n\tYou can add your own custom field types to GD and have then output as you wish.  The below example adds a “date range” input field.<\/p>\n\n\n\n

Add the field to the custom field settings<\/h3>\n\n\n\n

\n\tThe below code will add the field to the custom field settings so that you can add it to your add listing page.  The “field_type” is the custom key that we will use for other hooks, in this case it is: daterange<\/strong><\/p>\n\n\n\n

add_filter('geodir_custom_fields_custom','_my_gd_custom_field_date_range',10,2);\nfunction _my_gd_custom_field_date_range($custom_fields, $post_type ){\n\t\n\t\/\/ Date range\n\t$custom_fields['date_range'] = array( \/\/ The key value should be unique and not contain any spaces.\n\t\t'field_type'  => 'daterange', \/\/ this is our new field type\n\t\t'class'       => 'gd-date-range',\n\t\t'icon'        => 'fas fa-calendar-alt',\n\t\t'name'        => __( 'Date Range', 'geodirectory' ),\n\t\t'description' => __( 'Adds a date range input', 'geodirectory' ),\n\t\t'defaults'    => array(\n\t\t\t'data_type'          => 'TEXT',\n\t\t\t'admin_title'        => 'Date range',\n\t\t\t'frontend_title'     => 'Dates',\n\t\t\t'frontend_desc'      => 'Enter the start and end dates.',\n\t\t\t'htmlvar_name'       => 'date_range',\n\t\t\t'is_active'          => true,\n\t\t\t'for_admin_use'      => false,\n\t\t\t'default_value'      => '',\n\t\t\t'show_in'            => '[detail]',\n\t\t\t'is_required'        => false,\n\t\t\t'option_values'      => '',\n\t\t\t'validation_pattern' => '',\n\t\t\t'validation_msg'     => '',\n\t\t\t'required_msg'       => '',\n\t\t\t'field_icon'         => 'fas fa-calendar-alt',\n\t\t\t'css_class'          => '',\n\t\t\t'cat_sort'           => false,\n\t\t\t'cat_filter'         => false,\n\t\t\t\t\n\t\t)\n\t);\n\t\n\treturn $custom_fields;\n}\n<\/code><\/pre>\n\n\n\n
\n\tIt will then show in your Places > Settings > Custom Fields settings.<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
<\/p>\n\n\n\n
Add the field input code<\/h3>\n\n\n\n
\n\tFor it to appear in the add listing page we need to tell the system what type of input we should show, if we simply wanted a text input we could add a single line such as:  add_filter(‘geodir_custom_field_input_daterange<\/strong>‘,’geodir_cfi_text<\/em>‘,10,2);  <\/em>
\n\tThe Standard GD input function “geodir_cfi_text” would deal with the type of input, you can find all the default input types in this file: https:\/\/github.com\/AyeCode\/geodirectory\/blob\/master\/includes\/custom-fields\/input-functions-aui.php<\/a><\/p>\n\n\n\n
\n\tIn our case we want to setup a new type of input that includes a date range, we can save some time by copying the geodir_cfi_datepicker function and renaming it.<\/p>\n\n\n\n
add_filter('geodir_custom_field_input_daterange','_my_geodir_cfi_daterange',10,2);\n\n\n\/**\n * Get the html input for the custom field: daterange\n *\n * @param string $html The html to be filtered.\n * @param array $cf The custom field array details.\n * @since 1.6.6\n *\n * @return string The html to output for the custom field.\n *\/\nfunction _my_geodir_cfi_daterange($html,$cf){\n\n\n    $html_var = $cf['htmlvar_name'];\n\n\n    \/\/ Check if there is a custom field specific filter.\n    if(has_filter("geodir_custom_field_input_datepicker_{$html_var}")){\n        \/**\n         * Filter the datepicker html by individual custom field.\n         *\n         * @param string $html The html to filter.\n         * @param array $cf The custom field array.\n         * @since 1.6.6\n         *\/\n        $html = apply_filters("geodir_custom_field_input_datepicker_{$html_var}",$html,$cf);\n    }\n\n\n    \/\/ If no html then we run the standard output.\n    if(empty($html)) {\n        global $geodir_label_type;\n\n\n        $extra_attributes = array();\n        $title = '';\n        $value = geodir_get_cf_value($cf);\n\n\n        $name = $cf['name'];\n        $extra_fields = ! empty( $cf['extra_fields'] ) ? maybe_unserialize( $cf['extra_fields'] ) : NULL;\n        $date_format = ! empty( $extra_fields['date_format'] ) ? $extra_fields['date_format'] : 'yy-mm-dd';\n        $jquery_date_format = $date_format;\n\n\n        \/\/ Check if we need to change the format or not\n        $date_format_len = strlen( str_replace( ' ', '', $date_format ) );\n\n\n        \/\/ If greater then 5 then it's the old style format.\n        if ( $date_format_len > 5 ) {\n            $search = array( 'dd', 'd', 'DD', 'mm', 'm', 'MM', 'yy' ); \/\/ jQuery UI datepicker format.\n            $replace = array( 'd', 'j', 'l', 'm', 'n', 'F', 'Y' ); \/\/ PHP date format\n\n\n            $date_format = str_replace( $search, $replace, $date_format );\n        } else {\n            $jquery_date_format = geodir_date_format_php_to_aui( $jquery_date_format );\n        }\n\n\n        if ( $value == '0000-00-00' ) {\n            $value = ''; \/\/ If date not set, then mark it empty.\n        }\n\n\n        \/\/validation\n        if(isset($cf['validation_pattern']) && $cf['validation_pattern']){\n            $extra_attributes['pattern'] = $cf['validation_pattern'];\n        }\n\n\n        \/\/ validation message\n        if(isset($cf['validation_msg']) && $cf['validation_msg']){\n            $title = $cf['validation_msg'];\n        }\n\n\n        \/\/ field type (used for validation)\n        $extra_attributes['field_type'] = $cf['type'];\n\n\n        \/\/ flatpickr attributes\n        $extra_attributes['data-alt-input'] = 'true';\n        $extra_attributes['data-alt-format'] = $date_format;\n        $extra_attributes['data-date-format'] = 'Y-m-d';\n        $extra_attributes['data-mode'] = 'range';\n\n\n        \/\/ minDate \/ maxDate\n        if ( ! empty( $extra_fields['date_range'] ) ) {\n            $year_range = geodir_input_parse_year_range( $extra_fields['date_range'] );\n\n\n            \/\/ minDate\n            if ( ! empty( $year_range['min_year'] ) ) {\n                $extra_attributes['data-min-date'] = $year_range['min_year'] . '-01-01';\n            }\n\n\n            \/\/ maxDate\n            if ( ! empty( $year_range['max_year'] ) ) {\n                $extra_attributes['data-max-date'] = $year_range['max_year'] . '-12-31';\n            }\n        }\n\n\n        \/**\n         * Filter datepicker field extra attributes.\n         *\n         * @since 2.1.1.11\n         *\n         * @param array $extra_attributes Field attributes.\n         * @param array $cf The custom field array.\n         *\/\n        $extra_attributes = apply_filters( 'geodir_cfi_daterange_extra_attrs', $extra_attributes, $cf );\n\n\n        \/\/ required\n        $required = !empty($cf['is_required']) ? ' <span class="text-danger">*<\/span>' : '';\n\n\n        \/\/ admin only\n        $admin_only = geodir_cfi_admin_only($cf);\n\n\n        $conditional_attrs = geodir_conditional_field_attrs( $cf );\n\n\n        $html = aui()->input(\n            array(\n                'id'                => $cf['name'],\n                'name'              => $cf['name'],\n                'required'          => !empty($cf['is_required']) ? true : false,\n                'label'              => __($cf['frontend_title'], 'geodirectory').$admin_only . $required,\n                'label_show'       => true,\n                'label_type'       => !empty($geodir_label_type) ? $geodir_label_type : 'horizontal',\n                'type'              => 'datepicker',\n                'title'             =>  $title,\n                'placeholder'       => esc_html__( $cf['placeholder_value'], 'geodirectory'),\n                'class'             => '',\n                'value'             => $value, \/\/ esc_attr(stripslashes($value))\n                'help_text'         => __($cf['desc'], 'geodirectory'),\n                'extra_attributes'  => $extra_attributes,\n                'wrap_attributes'   => $conditional_attrs\n            )\n        );\n\n\n    }\n\n\n    return $html;\n}\n<\/code><\/pre>\n\n\n\n
\n\tThis will then show on the add listing page.<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
<\/p>\n\n\n\n
Output the custom field value<\/h3>\n\n\n\n
\n\tLastly, we need to tell it how it should be output, in this case we can use a default field such as a text field output.<\/p>\n\n\n\n
add_filter('geodir_custom_field_output_daterange','geodir_cf_text',10,5);<\/code><\/pre>\n\n\n\n

The default GD function “geodir_cf_text” will output the value as simple text.\u00a0 If we wanted it to output something more than simple text or in a different format we could add a custom function.<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
You can add your own custom field types to GD and have then output as you wish.  The below example adds a “date range” input field. Add the field to the custom field settings The below code will add the field to the custom field settings so that you can add it to your add […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"article\/tags":[],"article\/categories":[211,432,433],"class_list":["post-928","gd_place","type-gd_place","status-publish","hentry","gd_placecategory-tips-tricks-more","gd_placecategory-how-tos","gd_placecategory-code-snippets"],"_links":{"self":[{"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/article\/928","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/types\/gd_place"}],"author":[{"embeddable":true,"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/comments?post=928"}],"version-history":[{"count":0,"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/article\/928\/revisions"}],"wp:attachment":[{"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/media?parent=928"}],"wp:term":[{"taxonomy":"gd_place_tags","embeddable":true,"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/article\/tags?post=928"},{"taxonomy":"gd_placecategory","embeddable":true,"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/article\/categories?post=928"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}