In a recent PSD > WP project that I completed, the requirement for the Contact page was to display an image showing various locations below the navigation. When a visitor clicks on a location the corresponding contact details incl. a Google Map field's value should be displayed below the image.
In this article I share details of how I set this up. Be prepared for a long ride of HTML + PHP + jQuery + CSS all working in a perfect symphony for the end result (not yet live).
Below are the full inputs:
The contact page has the global graphic where a user can click on the brand for each city to display the contact details and map. This should be created as an imagemap and inserted into the theme using a shortcode [dma_show_map]. The items that are clickable should be the brand logo, not the names of the cities. Clicking Ambition on Brisbane for example will show the ambition contact details for Brisbane
This shortcode should output all the code required to generate the content for this page
• imagemap HTMLcode
• Divs that display depending on the city clicked
Below the map show the contact for Sydney by default when the page loads.
Then as the user clicks each city replace that with the correct data.
All of the address data has been added to the site using ACF. There is a “flexible content” field that’s been added and assign to the contact page.
All of the addresses have been entered inside this flexible content field.
Most locations have all fields. Where they don’t though, eg if a location is missing a fax field, do no simply that row of data.
Screenshot of Advanced Custom Field Pro's "Contact Group" Flexible Content group:
Set the image as Featured image for the Contact Page, grabbed the URL, created a new HTML document in Dreamweaver, inserted the image and added hotspots for the various locations.
Created a file named page-contact.php template which will automatically be used by Contact Page with opening PHP tag and closing
Displayed the featured image below nav along with the code for image map like so:
To view the full content, please sign up for the membership.
Already a member? Log in below or here.