In the following tutorial we will create a directory with regions. Each region will have 2 custom fields: to store a link and population count. Click on a region on the map or click on the same region in directory would redirect a user by a link.
We'll use geo-calibrated map of USA but the same task could be done with any other map.
First let's switch to Regions
tab and click on Edit fields
button in the toolbar.
Let's add the next custom Region fields:
Text
to store URL. Give it a name "Link"
Text
to store a population count. Give it a name "Population"After you have added 2 fields, click Save fields
button and switch back to the list of regions
by clicking List
button in the toolbar.
Go through all Regions by clicking on them and enter links and population numbers.
Switch to Directory
tab.
Change settings as follows:
On
Regions
Switch to Actions
tab.
Change settings as follows:
select checkbox
Region.link
field from drop-down listOff
select checkbox
Region.link
field from drop-down list
Switch to Templates
tab, choose the Directory item
template from drop-down list.
Add the following code into the template textarea field:
<b>{{title}}</b><br />
{{#if data.population}}
{{data.population}}
{{/if}}
{{#unless data.population}}
unknown
{{/unless}}
Let's go step by step through our template. On the first line:
<b>{{title}}</b><br />
We show Region title
which is state name in case of USA map.
We wrapped state name with <b></b>
tag to make it bold.
Then goes <br />
tag which is "go to the next line" tag in HTML.
Then we check if population field is non-empty, and if it's not then we show population number.
Custom region fields are accessible via data
property so if we want to get our custom population field then we need to write data.population
:
{{#if data.population}}
{{data.population}}
{{/if}}
And if population number isn't defined then just show the word "unknown":
{{#unless data.population}}
unknown
{{/unless}}
Save the map, add a new page in WordPress Admin, insert the map shorcode and see what we've done! Try to click on any item in directory or on a region and you will be redirected by the link which you've added for that region.