Want to auto detect the user’s country based on their IP?  Maybe you want to have the phone field type default to a specific country?  What about putting preferred countries at the top of the dropdown list?  You can do all of this and more with the new filter added in WP Job Manager Field Editor version 1.2.6.

Overview

The open source jQuery plugin used for the phone field type is called International Telephone Input, and you can find all the information you would need about it (including details on the available configuration and options) on GitHub:

https://github.com/Bluefieldscom/intl-tel-input

As the latest version from above is newer than the current version included with the field editor, please see this URL for documentation on the version included with the field editor:

https://github.com/jackocnr/intl-tel-input/tree/8a2364bc0459fce934d7cf04a82823db63e7944b

In order to modify any of the default options you will need to use a WordPress Filter that is placed in your theme’s functions.php  file.  The filter you will need to use to override the default arguments is:

job_manager_field_editor_phone_args

Below you will see the code directly from the plugin that shows the currently supported options/configurations:

$phone_args = apply_filters( 'job_manager_field_editor_phone_args', array(
	'allowExtensions'    => false,
	'autoFormat'         => true,
	'autoHideDialCode'   => true,
	'autoPlaceholder'    => true,
	'defaultCountry'     => '',
	'ipinfoToken'        => '',
	'nationalMode'       => false,
	'numberType'         => 'MOBILE',
	'preferredCountries' => array('us', 'gb'),
	'utilsScript'        => WPJM_FIELD_EDITOR_PLUGIN_URL . '/assets/js/phoneutils.min.js'
	)
);

You should never need to modify the utilsScript value (unless you really know what you’re doing).  Make sure to read the GitHub page for specific details on the values before changing them.

Example Configuration

Note: any options that take country codes should be ISO 3166-1 alpha-2 codes

For this example we will be changing the phone field type to automatically detect and select the user’s country based on their IP.  If the location can not be determined by IP, we will have it default to France.  We will also set the countries to show at the top of the dropdown list to France, and Germany.

If you read the documentation from the GitHub page, you will see that if we set the value of defaultCountry to auto it will automatically attempt to detect the user’s location based on their IP.  That is why in the example screenshot above you can see the country shows USA, but the other countries at the top are France and Germany.  This is because my IP address is located in the USA and it automatically set it to USA.

To set the countries at the top of the dropdown list, we will use preferredCountries

This would be the final code you would need to add to your functions.php file, I will go over each part below.

add_filter( 'job_manager_field_editor_phone_args', 'my_custom_phone_args' );

function my_custom_phone_args( $args ){

	$args['preferredCountries'] = array( 'fr', 'de' );
	$args['defaultCountry'] = 'auto';

	return $args;
}

 Example Breakdown

So the first code we need to add is the add_filter  which tells WordPress to run our custom function so we are able to modify the values:

add_filter( 'job_manager_field_editor_phone_args', 'my_custom_phone_args' );

The code above adds a hook to the field editor filter, and then runs my_custom_phone_args  function whenever the filter is called from the plugin.

The next code added is the function that is called:

function my_custom_phone_args( $args ){

	$args['preferredCountries'] = array( 'fr', 'de' );
	$args['defaultCountry'] = 'auto';

	return $args;
}

As you can see in the function above, $args  is passed to the function which includes all of the default arguments.  Using standard PHP we can modify those values as needed, and as you see at the bottom, then return the $args  back to the hook.  You MUST return the $args  otherwise you will have issues.  Using the country codes obtained from the ISO 3166-1 alpha-2 codes, the possibilities are endless!

This same method can be used to override any of the other default configuration values, but PLEASE make sure to read the documentation on the GitHub page to make sure you use the right values.

If you change any of the boolean values (true or false), do not place them in quotes, they should be just like the values you see above in the default configuration.