How to modify the listing address format?

For the time being, the address for a list­ing is dis­played in two dif­fer­ent loca­tions, as follows:

  • on the card (from the archive, for example);
  • under the map, on the right side, inside the listing.

There are 6 ele­ments that you can dis­play on the address side:

  • address street;
  • address street number;
  • address city;
  • postal code;
  • address region;
  • address coun­try;

All those val­ues are giv­en by WP Job Man­ag­er plu­g­in, from the address that the user adds to his list­ing. How­ev­er, cur­rent­ly there’s a spe­cif­ic order that we are using by default, but maybe you’d like to change it.

Here’s the func­tion that is used right now:

function my_custom_listing_address($formats) {
	$formats = array(
		'default' => '<div itemprop="streetAddress">
					<span class="address__street">{geolocation_street}</span>
					<span class="address__street-no">{geolocation_street_number}</span>
				</div>
				<span class="address__city" itemprop="addressLocality">{geolocation_city}</span>
				<span class="address__postcode" itemprop="postalCode">{geolocation_postcode}</span>
				<span class="address__state-short" itemprop="addressRegion">{geolocation_state_short}</span>
				<span class="address__country-short" itemprop="addressCountry">{geolocation_country_short}</span>');
	return $formats;
}
add_filter('listable_localisation_address_formats', 'my_custom_listing_address', 15);

This is the code that you need to change on the pre­sent­ed part:

HTML

<div itemprop="streetAddress">
	<span class="address__street">{geolocation_street}</span>
	<span class="address__street-no">{geolocation_street_number}</span>
</div>
<span class="address__city" itemprop="addressLocality">{geolocation_city}</span>
<span class="address__postcode" itemprop="postalCode">{geolocation_postcode}</span>
<span class="address__state-short" itemprop="addressRegion">{geolocation_state_short}</span>
<span class="address__country-short" itemprop="addressCountry">{geolocation_country_short}</span>

Here’s a table with the code that you need to use in order to dis­play each ele­ment. Fol­low this table in order to dis­play each ele­ment correctly:

Ele­mentCode
address street<span class=“address__street”>{geolocation_street}</span>
address street number<span class=“address__street-no”>{geolocation_street_number}</span>
address city<span class=“address__city” itemprop=“addressLocality”>{geolocation_city}</span>
postal code<span class=“address__postcode” itemprop=“postalCode”>{geolocation_postcode}</span>
address region<span class=“address__state-short” itemprop=“addressRegion”>{geolocation_state_short}</span>
address coun­try<span class=“address__country-short” itemprop=“addressCountry”>{geolocation_country_short}</span>

To cre­ate your par­tic­u­lar address for­mat just play with the 6 code sec­tions men­tioned above..

Here’s an exam­ple to make it eas­i­er: if you want to dis­play the city name and the address coun­try, you just need to start cre­at­ing your own code by copy­ing this part:

function my_custom_listing_address ( $formats ) {
	$formats = array(
		'default' => '
				');
	return $formats;
}
add_filter( 'listable_localisation_address_formats', 'my_custom_listing_address', 15 ) ;

and, as men­tioned before, put inside the code for the city:

<span class="address__city" itemprop="addressLocality">{geolocation_city}</span>

and for the country:

<span class="address__country-short" itemprop="addressCountry">{geolocation_country_short}</span>

and this is the final code:

function my_custom_listing_address ( $formats ) {
	$formats = array(
		'default' => '<span class="address__city" itemprop="addressLocality">{geolocation_city}</span>
				<span class="address__country-short" itemprop="addressCountry">{geolocation_country_short}</span>');
	return $formats;
}
add_filter( 'listable_localisation_address_formats', 'my_custom_listing_address', 15 ) ;

The last step to make it happen.

The ele­ments you want­ed to dis­play might be hid­den, but no wor­ries. You can eas­i­ly get them by cre­at­ing a CSS like this one:

  1. get the class of each ele­ment, in our exam­ple, you will get: 
    • address__city;
    • address__­coun­try-short.
  2. cre­ate a CSS for them but adding a point before each class and a com­ma between then, result­ing in this code:CSS
    .address__city, .address__country-short {
    	display: inline;
    }

For exam­ple, if you enter “66 Knights­bridge Lon­don, SW1X 7LA” the sys­tem will con­vert it to “Knights­bridge 66, Lon­don, SW1X 7LA, GB, Unit­ed King­dom”. This will gen­er­ate the fol­low­ing HTML markup code (note the CSS class­es that you may need to use later):

<div itemprop="streetAddress">
	<span class="address__street">Knightsbridge</span>
	<span class="address__street-no">66</span>
</div>
<span class="address__city">London</span>
<span class="address__postcode">SW1X 7LA</span>
<span class="address__country-short">GB</span>
<span class="address__country">United Kingdom</span>

After you apply the code changes explained as an exam­ple, this is the final markup and ele­ments that will be vis­i­ble on your website:

<span class="address__city">London</span>
<span class="address__country">United Kingdom</span>

dis­play­ing on the page just “Lon­don, Unit­ed King­dom”.

Note: The code part should be added on your side through the child theme, inside functions.php file, at the very bot­tom of it. You can find some more details about it right here and the CSS that you found on the sec­ond part can be added in Appear­ance → Cus­tomize → CSS Edi­tor area.

Updated on June 28, 2017

Was this article helpful?