wa-profile

wa-profile

Description

Retrieves one contact profile from one or more Wild Apricot sites

Usage

[ wa-profile

< list of contact fields > (required, single or double-quoted)

sites="one or more configured Wild Apricot sites" (optional, uses first named site as default, comma seperated list)
]

Placement of shortcode

The wa-profile shortcode is placed on the page or post of the wa-contacts profile-url attribute.

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

An example use of the wa-profile shortcode

[ wa-profile'User ID' 'Last Name' 'First Name']

CSS Customization

The wa-profile shortcode returns a formatted HTML with CSS classes applied to a div tag that contains each element of the contact profile with its own CSS class. Each element of the contact record can be targeted with a CSS class.

The class for the contact is called wa-profile. Each attribute of the contact has a class name of the underlying attribute (eg first-name or city-network). Finally a user-friendly label of each attribute is stored in the data-wa-label HTML attribute. Empty results get an “empty” suffix in the class name. Here is an example:

<div class="wa-profile">
<div class="first-name" data-wa-label="First name">Alex</div>
<div class="last-name" data-wa-label="Last name">Sirota</div>
<div class="company" data-wa-label="Company">NewPath Consulting</div>
<div class="function" data-wa-label="Function">Director</div>
<div class="industry" data-wa-label="Industry">Information Technology</div>
<div class="city-network" data-wa-label="City network">Toronto</div>
<div class="gender" data-wa-label="Gender">Male</div>
<div class="short-bio" data-wa-label="Short Bio">I help organizations succeed.</div>
</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-profile {
	color: hsl(0, 0%, 20%);
}

.wa-profile > div {
	padding-bottom: 1rem;
}

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

.wa-profile >div::before
{
	content: attr(data-wa-label) ": ";
	font-weight:bold;
	margin-right:.4rem;
}

.wa-profile .first-name {
	font-weight: bolder;
	font-size:20px;
	display:inline;
	margin-right:.4rem;
}

.wa-profile .last-name {
	font-weight: bolder;
	font-size:20px;
	display:inline;
}

.wa-profile .last-name::before, .wa-profile .first-name::before {
	content: "";
}

.wa-profile .short-bio::before {
	content: attr(data-wa-label);
	font-weight:bold;
	display:block;
}

Examples