How to modify the listing address format?

For the time being, the address for a listing is displayed in two different locations, as follows:

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

There are 6 elements that you can display on the address side:

  • address street;
  • address street number;
  • address city;
  • postal code;
  • address region;
  • address country;

All those values are given by WP Job Manager plugin, from the address that the user adds to his listing. However, currently there’s a specific order that we are using by default, but maybe you’d like to change it.

Here’s the function 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 presented 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 display each element. Follow this table in order to display each element correctly:

Element Code
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 country <span class=“address__country-short” itemprop=“addressCountry”>{geolocation_country_short}</span>

To create your particular address format just play with the 6 code sections mentioned above..

Here’s an example to make it easier: if you want to display the city name and the address country, you just need to start creating your own code by copying 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 mentioned 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 elements you wanted to display might be hidden, but no worries. You can easily get them by creating a CSS like this one:

  1. get the class of each element, in our example, you will get:
    • address__city;
    • address__country‐short.
  2. create a CSS for them but adding a point before each class and a comma between then, resulting in this code:CSS
    .address__city, .address__country-short {
    	display: inline;
    }

For example, if you enter “66 Knightsbridge London, SW1X 7LA” the system will convert it to “Knightsbridge 66, London, SW1X 7LA, GB, United Kingdom”. This will generate the following HTML markup code (note the CSS classes 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 example, this is the final markup and elements that will be visible on your website:

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

displaying on the page just “London, United Kingdom”.

Note: The code part should be added on your side through the child theme, inside functions.php file, at the very bottom of it. You can find some more details about it right here and the CSS that you found on the second part can be added in Appearance → Customize → CSS Editor area.

Updated on June 28, 2017

Was this article helpful?