wa-contacts

wa-contacts

Description

Retrieves contacts from one or more Wild Apricot sites.

Usage

[ wa-contacts
< list of contact fields > (required, single or double-quoted)
class="classname" (optional)
sites="one or more configured Wild Apricot sites" (optional, uses first named site as default, comma seperated list)
search (optional)
dropdown (optional)
profile-url="page-name" (optional) ]

Selecting Contact and Membership Fields

The <list of contact fields> attributes selects the Wild Apricot contact and membership fields that are returned to the browser. The fields should be single quoted (‘) to eliminate any parsing issues for fields that have spaces or unusual characters.

Getting Contacts from Multiple Wild Apricot Websites

The <list of contact fields> attributes selects the Wild Apricot contact and membership fields that are returned to the browser. The fields should be single quoted (‘) to eliminate any parsing issues for fields that have spaces or unusual characters.

Getting Contacts from Multiple Wild Apricot Websites

The wa-contacts short code can use one or more Wild Apricot sites as the source of data. The sites attribute enumerates which configured Wild Apricot sites will be used as sources of data. Each site must have the contact or membership field identified in the <list of contact fields> attribute. If it does not the short code will simply ignore that field for a particular Wild Apricot website. Named Wild Apricot sites are configured in the plugin settings.

WA4WP plugin settings
Wild Apricot for WordPress Plugin Settings

Adding a Search Bar

The resulting list of records can be searched with the optional search attribute. This allows the user to search the resulting records with one or more keywords.

Adding a Dropdown of Sites

To filter contacts by a configured Wild Apricot website, the optional dropdown attribute can be used. This attribute creates a drop down which displays the site name of each configured Wild Apricot website (see the configuration screen shot above).

Navigation to a Full Contact Profile

To enable a “more info” link next to each resulting profile the optional profile-url attribute can be used to identify the page or post for displaying the full profile. The target page must contain a short code to display the profile.

Example Multi-Site wa-contacts short code:

[ wa-contacts 'First name' 'Last name' 'Company'
sites='Site 1, Site 2'
search
dropdown
profile-url='single-profile-page' ]
[ /wa-contacts ]

Filtering Results with Criteria

The <filter criteria> is composed of the identical filtering capability of the Wild Apricot Contacts API.

An example filter criteria in the wa-contacts short code filtering on Last Name=Smith and User ID=12345678:

[ wa-contacts 'User ID' 'Last Name' 'First Name']
'Last Name' eq 'Smith' AND 'User ID' eq 12345678
[ /wa-contacts]

CSS Customization

The wa-contacts shortcode returns a formatted HTML list with CSS classes applied to a div tag that contain an unordered list for each contact returned. Each contact and each attribute of every row also can be targeted with a CSS class.

The class for the contact result set is called wa-contacts, and each contact has the class wa-contact. Each attribute of the contact has a class name of the underlying attribute (eg my-first-name or renewal-due). Finally a user-friendly label of each attribute is stored in the data-wa-label attribute of the unordered list. Empty results get an “empty” suffix in the class name. Here is an example of a result containing just 1 contact:

<div class="wa-contacts">

<div class="wa-contacts-items">

<ul class="wa-contact">

<li class="my-first-name" data-wa-label="My First name">Patrick</li><li class="last-name" data-wa-label="Last name">McNeill</li>
<li class="phone empty" data-wa-label="Phone"></li>
<li class="renewal-due" data-wa-label="Renewal due">2018-05-23T00:00:00</li>

<a class="wa-more-info" href="/single-profile-page?user-id=12345678">More info</a>
</ul>
</div>

Here is an example set of standard wa-contacts CSS styles that can be formatted to style the result in a variety of ways:

.wa-contacts-items {
	padding-top:2rem
}

.wa-contact li {
	list-style:none;
}

.wa-contact .wa-more-info {
	text-transform:uppercase;
	font-size:14px;
	color: hsl(327, 56%, 56%);
}
.wa-contact .first-name, .wa-contact .last-name  {
	font-weight:bold;
	display:inline-block;
	margin-right:1rem;
}

.wa-contact .company {
	    color: hsl(104, 72%, 33%);
    font-weight: bolder;
}

.wa-contact .city-network {
	color: hsl(327, 56%, 56%);
  margin-top: 10px;
	font-weight:bolder;
}

Examples