WpResidence Agent Card Templates Guide

Introduction

WpResidence theme offers multiple agent card templates to display agent information in various styles. This guide covers four main templates: agent_unit.php, agent_unit_v2.php, agent_unit_v3.php, and agent_unit_v4.php. Each template is located in the templates/agent_card_templates/ directory of the theme.

1. agent_unit.php

This is the default agent card template. It displays a comprehensive view of the agent, including their image, name, position, and contact details.

Key CSS Classes:

• .wpresidence_agent_unit_wrapper: Main wrapper for the agent card. Styles found in scss/agent_cards/_agent_unit.scss.
• .agent_unit: Container for the agent information. Styles in scss/agent_cards/_agent_unit.scss.
• .agent-unit-img-wrapper: Wrapper for the agent’s image. Styles in scss/agent_cards/_agent_unit.scss.
• .agent_unit_social: Container for social media icons. Styles in scss/agent_cards/_agent_unit.scss.
• .agent_position: Agent’s job position. Styles in scss/agent_cards/_agent_unit.scss.
• .agent_detail: Container for each detail (phone, email, etc.). Styles in scss/agent_cards/_agent_unit.scss.

Example of customizing the agent card:


// Add to your child theme's style.css
.agent_unit {
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.agent_position {
font-style: italic;
color: #888;
}


2. agent_unit_v2.php

This template provides a more compact view, focusing on the agent’s image with overlaid text.

Key CSS Classes:

• .agent_card_2: Main wrapper for this card style. Styles found in scss/agent_cards/_agent_unit_v2.scss.
• .property_listing.places_listing: Container for the agent information. Styles in scss/agent_cards/_agent_unit_v2.scss.
• .realtor_position: Agent’s job position. Styles in scss/agent_cards/_agent_unit_v2.scss.
• .realtor_name: Agent’s name. Styles in scss/agent_cards/_agent_unit_v2.scss.

Example of customizing the v2 agent card:


// Add to your child theme's style.css
.agent_card_2 .property_listing.places_listing {
height: 400px; // Increase card height
}
.agent_card_2 .realtor_name {
font-size: 24px;
text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
}


3. agent_unit_v3.php

This template offers a more detailed view, including a “My Listings” button and featured agent notes.

Key CSS Classes:

• .agent_card_3: Main wrapper for this card style. Styles found in scss/agent_cards/_agent_unit_v3.scss.
• .agent_unit_featured: Container for featured agent information. Styles in scss/agent_cards/_agent_unit_v3.scss.
• .featured_agent_notes: Container for agent notes. Styles in scss/agent_cards/_agent_unit_v3.scss.
• .featured_agent_listings.wpresidence_button: “My Listings” button. Styles in scss/agent_cards/_agent_unit_v3.scss.

Example of customizing the v3 agent card:


// Add to your child theme's style.css
.agent_card_3 .agent_unit_featured {
border: 1px solid #ddd;
border-radius: 15px;
overflow: hidden;
}
.agent_card_3 .featured_agent_listings.wpresidence_button {
background-color: #4CAF50;
color: white;
}


4. agent_unit_v4.php

This template provides a minimalist design, focusing on essential information with a clean layout.

Key CSS Classes:

• .agent_card_4: Main wrapper for this card style. Styles found in scss/agent_cards/_agent_unit_v4.scss.
• .agent_unit.agent_unit_type_4: Container for agent information. Styles in scss/agent_cards/_agent_unit_v4.scss.
• .agent-unit-img-wrapper: Wrapper for the agent’s image. Styles in scss/agent_cards/_agent_unit_v4.scss.
• .agent_position: Agent’s job position. Styles in scss/agent_cards/_agent_unit_v4.scss.

Example of customizing the v4 agent card:


// Add to your child theme's style.css
.agent_card_4 .agent_unit.agent_unit_type_4 {
text-align: center;
padding: 20px;
background-color: #f9f9f9;
}
.agent_card_4 .agent-unit-img-wrapper img {
border: 3px solid #fff;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}


Extending Functionality

To customize these templates, you can copy them to your child theme and modify as needed. Here’s an example of how to add a custom field to the agent card:


<?php
// Add this to your copied template file
$custom_field = get_post_meta(get_the_ID(), 'agent_custom_field', true);
if (!empty($custom_field)) {
echo '<div class="agent_custom_field">' . esc_html($custom_field) . '</div>';
}
?>


Then, add the corresponding CSS to your child theme’s style.css:


.agent_custom_field {
margin-top: 10px;
font-style: italic;
color: #666;
}


Selecting Different Card Styles

The card style used is determined by the wpestate_agent_card_selector() function in libs/agent_functions.php. You can override this function in your child theme to always use a specific card style:


function custom_agent_card_selector() {
return 'templates/agent_card_templates/agent_unit_v3.php';
}
add_filter('wpestate_agent_card_selector', 'custom_agent_card_selector');


This example always uses the v3 card style. Adjust the template path as needed for other versions.