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 (in the archive);
• 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;

The WP Job Manager plugin gets all those values from the address that the user adds to his listing. However, there’s a specific order that we are using by default, one that you might want to change.

Here’s the function 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 piece of code that you need to change:

<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 to display each element. Follow this table 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, play with the 6 code sections mentioned above.

Here’s an example to make it easier

Let’s say you want to display the city name and the country.

Step 1. Create the necessary PHP code

1. Copy this part:

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

2. Add the code for the city in this area 'default' => ' add city code here ');

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

3. Just next to the code above, add the code for the country:

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

Repeat this process for all the location fields you want to add.

In the end, your code should look like this:

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 ) ;

4. Add the code to your website by copying it to the functions.php file.

To do that, navigate to Appearance → Theme File Editor → and select the functions.php file from the right sidebar.

Step 2: Add the CSS code

Some of the elements you wanted to display might be hidden, but no worries. You can easily display them by creating a CSS code like this one:

1. get the class of each element —from our example, you will get:
   • address__city
   • address__country-short
2. create the CSS code by adding a point before each class and a comma between them, resulting in this code:

   .address__city, .address__country-short { display: inline; }

The CSS code needs to be added in Appearance → Customize → Additional CSS.

For example, before any code changes, if you entered “66 Knightsbridge London, SW1X 7LA” the system would convert it to “Knightsbridge 66, London, SW1X 7LA, GB, United Kingdom.” This will generate the following HTML markup code:

<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>

But after you apply the code changes explained in the example above, you will get this final markup and elements that will be visible on your website:

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

This results in displaying “London, United Kingdom” on the page instead of “Knightsbridge 66, London, SW1X 7LA, GB, United Kingdom.”