How to modify the listing address format?

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

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:

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

If you want to display the city name and the country, you need to start creating your own code by:

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

2. Adding 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 ) ;

The last step is to add it to your website by copying the code to the functions.php file.

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, in 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; }

For example, before you did any changes to the code, 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 (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>

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>

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

Note: The code edits should be added on your site via the child theme, inside the functions.php file, at the very bottom of it. The CSS code needs to be added in Appearance → Customize → Additional CSS. If you want, you can use the following plugin to add custom code to your theme more easily — My Custom Functions.

Updated on March 7, 2022

Can't find what you’re looking for? Ask a human.

We're a small team of real people providing real help. Send us an email at hello@pixelgrade.com and we will give you a helping hand.