This guide explains the functionality and customization options for the Developer List and Agency List templates in the WpResidence theme. These templates are responsible for displaying lists of developers and agencies in a grid format.

Template Files

1. Developer List: page-templates/developers_list.php
2. Agency List: page-templates/agency_list.php

Both templates share similar structures and functionalities, with minor differences specific to developers and agencies.

Template Structure

1. Header and Functionality Check

Both templates start by loading the header and checking for required functionality:

<?php
get_header();
if(!function_exists('wpestate_residence_functionality')) {
esc_html_e('This page requires the WpResidence Core Plugin. Please activate it from the plugins menu.','wpresidence');
exit();
}


The wpestate_residence_functionality function is typically defined in the WpResidence Core Plugin.

2. Page Layout

The templates use a common layout structure:

<div class="row wpresidence_page_content_wrapper">
<?php get_template_part('templates/breadcrumbs'); ?>
<div class="<?php echo esc_attr($wpestate_options['content_class']); ?>">
<?php get_template_part('templates/ajax_container'); ?>
<!-- Page title and content -->
<!-- Listing container -->
</div>
<?php include get_theme_file_path('sidebar.php'); ?>
</div>


The $wpestate_options['content_class'] variable is typically set in the theme’s options panel and controls the width of the main content area.

3. Query Setup

Both templates use WP_Query to fetch and display developers or agencies:

$args = array(
'post_type' => 'estate_developer', // or 'estate_agency' for agency list
'paged' => get_query_var('paged') ? get_query_var('paged') : 1,
'posts_per_page' => 10,
'cache_results' => false
);
$developer_query = new WP_Query($args);


4. Developer/Agency Loop

The templates loop through the query results to display individual developer or agency cards:

while ($developer_query->have_posts()): $developer_query->the_post();
echo '<div class="dev_unit_wrapper">'; // or 'agency_unit_wrap' for agencies
get_template_part('templates/agency__developers_cards_templates/agency_developer_unit');
echo '</div>';
endwhile;


The agency_developer_unit.php template (located in templates/agency__developers_cards_templates/) is responsible for rendering individual developer or agency cards.

5. Pagination

After the loop, both templates display pagination:

<?php wpestate_pagination($developer_query->max_num_pages, $range = 2); ?>


The wpestate_pagination function is typically defined in the theme’s functions file or a separate pagination functions file.

Customization and Extension

1. Modifying Query Arguments

You can customize the query by modifying the $args array. For example, to change the number of items per page:

$args = array(
'post_type' => 'estate_developer',
'paged' => get_query_var('paged') ? get_query_var('paged') : 1,
'posts_per_page' => 12, // Changed from 10 to 12
'cache_results' => false
);


2. Adding Custom Fields

To display additional information for each developer or agency, you can modify the agency_developer_unit.php template. For example, to add a custom field:

<?php
$custom_field = get_post_meta(get_the_ID(), 'custom_field_key', true);
if (!empty($custom_field)) {
echo '<div class="custom-field">' . esc_html($custom_field) . '</div>';
}
?>


3. Modifying Layout

To change the layout of the developer/agency cards, you can edit the CSS classes. The main classes used are:

• .dev_unit_wrapper (for developers)
• .agency_unit_wrap (for agencies)
• .agency_unit

These classes can be found in the scss/agency_developer_cards/_agency_developer_cards.scss file.

4. Adding Filters

You can add filtering options to the template by creating a form and modifying the query based on user input. For example:

<form id="developer-filter" method="get">
<select name="developer_category">
<option value="">All Categories</option>
<?php
$categories = get_terms('developer_category');
foreach ($categories as $category) {
echo '<option value="' . esc_attr($category->slug) . '">' . esc_html($category->name) . '</option>';
}
?>
</select>
<input type="submit" value="Filter">
</form>

<?php
// Modify query args based on filter
if (isset($_GET[‘developer_category’]) && !empty($_GET[‘developer_category’])) {
$args[‘tax_query’] = array(
array(
‘taxonomy’ => ‘developer_category’,
‘field’ => ‘slug’,
‘terms’ => sanitize_text_field($_GET[‘developer_category’]),
),
);
}
?>

The Developer List and Agency List templates in WpResidence provide a flexible foundation for displaying developer and agency information. By understanding their structure and the various customization points, you can tailor these templates to meet specific requirements and enhance the user experience on your real estate website.