Overview
Partner Custom Templates (PCT) allow IDX Broker Dev Partners to create fully customized IDX page templates using the Twig templating language.
Custom templates can be used to modify:
- Property Details Pages
- Search Results Pages
- Map Search Pages
- Roster Pages
- Search Forms
- Address Searches
- Listing ID Searches
- Advanced Search Pages
Partner Custom Templates provide a reusable framework for building branded, scalable IDX experiences across multiple client accounts.
What Are Partner Custom Templates?
Partner Custom Templates use the Twig template engine for PHP, allowing developers to create dynamic IDX page layouts without requiring deep PHP expertise.
Templates can include:
- Twig logic
- HTML
- CSS
- JavaScript
This allows developers to:
- Create reusable IDX layouts
- Customize search experiences
- Extend default IDX functionality
- Standardize designs across client sites
- Save development time on future projects
Note: There is currently no drag-and-drop editor or template wizard available.
IDX Broker provides starter example templates that can be customized and expanded.
Requirements
Before using Partner Custom Templates, ensure the following requirements are met.
General Requirements
- This feature is available to IDX Broker Partners only.
- Client-level users cannot create templates.
- HTTPS is required on any account used for previewing templates.
- Templates are shared across all client accounts associated with your Dev Partner code.
- Template versioning support is currently limited.
Support Expectations
IDX Broker supports the underlying templating system itself.
However:
- Custom code created by partners is not supported by IDX Broker.
- Developers are responsible for supporting their own templates.
- Client questions regarding custom template functionality are directed to the template developer.
- Bugs related to the underlying IDX system may still be reported through standard developer support channels.
Why Use Custom Templates?
Custom templates allow developers to create highly customized IDX experiences while improving development efficiency.
Benefits include:
- Reusable designs
- Faster deployment across multiple clients
- Consistent branding
- Expanded functionality beyond default IDX layouts
- Greater control over HTML structure and styling
Template Resources
Twig Documentation
Twig syntax documentation:
- Variables
- Logic statements
- Includes
- Imports
- Filters
- Blocks
Twig is the primary templating language used by Partner Custom Templates.
Twig Fiddle
Twig Fiddle can be used to experiment with Twig syntax and logic before implementing templates in IDX Broker.
Quick Variable References
IDX Broker provides variable references for multiple template types including:
- Details Pages
- Map Search Pages
- Address Search Pages
- Listing ID Search Pages
- Basic Search Pages
- Advanced Search Pages
- Roster Pages
Starting a Custom Template
Using a Starter Template
Custom templates can be built from scratch, but many developers begin by importing and modifying an existing starter template.
One of the simplest starter templates is the mobile-first Listing ID Search template.
This template demonstrates:
- Twig imports
- Variables
- Includes
- Conditional logic
- Form structure
- Macro usage
Example Listing ID Search Template
{% import "forms-1.001.twig" as form %}
{% import "searchTools-1.001.twig" as tools %}
{% block idxContent %}
{% spaceless %}
<div id="IDX-searchPageWrapper" class="IDX-pageContainer">
{# only include the search nav on the frontend #}
{% include 'navbar-1.000.twig' %}
<form action="{{ formAction }}"
method="get"
name="IDXsearchForm"
id="IDX-searchForm"
class="IDX-searchForm IDX-searchForm-{{ currentScript }}
{% if v1searchMarkup %}IDX-v1searchMarkup{% endif %}
{% if emailUpdateSignup %}IDX-emailUpdateSignupForm{% endif %}"
{% if middleware %} target="_blank"{% endif %}
data-pageid="{{ pageID }}"
data-middleware="{{ middleware }}"
data-advfields="{{ advancedFields }}">
{% if customNewSearch %}
<input type="hidden" name="idxsrp" value="{{ pageID }}" />
{% endif %}
<div id="IDX-coreSearchFields" class="IDX-row-content">
{{ tools.listingID }}
</div>
<div id="IDX-action-buttons" class="IDX-row-content">
<button type="reset"
id="IDX-formReset"
class="IDX-btn IDX-btn-default">
Reset
</button>
<button type="submit"
id="IDX-formSubmit"
class="IDX-btn IDX-btn-primary">
Search
</button>
</div>
</form>
<br class="IDX-clear" />
{% if not middleware %}
<div id="IDX-editSavedSearch" class="IDX-hide">
<div style="text-align:center;"
id="IDX-editSavedSearchMessage"></div>
</div>
{% include 'multipleMlsDisclaimers-1.000.twig' %}
{% endif %}
{% if queryArray %}
<div id="IDX-modifySearchData"
style="display:none !important;">
{{ queryArray|raw }}
</div>
{% endif %}
{% if ssQueryArray %}
<div id="IDX-editSavedSearchData"
style="display:none !important;">
{{ ssQueryArray|raw }}
</div>
{% endif %}
<div id="IDX-defaultPriceData"
style="display:none !important;">
{{ defaultPriceData|raw }}
</div>
</div>
{% endspaceless %}
{% endblock %}Understanding Twig Syntax
Twig syntax uses different delimiter types depending on functionality.
| Syntax | Purpose |
|---|---|
{% %} | Logic statements |
{{ }} | Output variables |
{# #} | Comments |
Twig Imports
Example:
{% import "forms-1.001.twig" as form %}
{% import "searchTools-1.001.twig" as tools %}Imports allow reusable Twig macros to be loaded similarly to a programming library.
Aliases such as form and tools shorten future references.
Example usage:
{{ tools.listingID }}Twig Blocks
Example:
{% block idxContent %}Blocks define sections that can be overridden by child templates.
Blocks must be closed using:
{% endblock %}Twig Includes
Example:
{% include 'navbar-1.000.twig' %}Includes insert another template file into the current template.
Common uses include:
- Navigation bars
- Disclaimers
- Shared layout components
Twig Variables
Example:
action="{{ formAction }}"Variables output dynamic data into HTML.
Twig Logic Statements
Example:
{% if customNewSearch %}Conditional logic works similarly to PHP conditionals.
All conditionals must be closed with:
{% endif %}Custom Template Options
Template Categories
IDX Broker supports several template types.
Available Template Types
- Search Pages
- Map Pages
- Results Pages
- Details Pages
- Roster Pages
Each category includes:
- Default starter templates
- Editable Twig templates
- Associated CSS and JavaScript files
Code Editor Layout
The editor includes:
- Twig/HTML editor pane
- CSS editor pane
- JavaScript editor pane
Developers can directly edit code within the browser.
Inline HTML, CSS, and JavaScript are also supported within Twig files.
My Library
Overview
Custom templates must be saved into My Library before they can be edited or published.
Importing a Template
To import a template:
- Open a template from the available IDX Templates.
- Click Save to Library.
- Assign:
- Template name
- Folder
- Tags
- Description
Once imported, the template becomes editable.
My Library Actions
Edit Details
Modify:
- Name
- Folder
- Tags
- Description
Duplicate
Creates a copy of the template.
Save
Saves changes without pushing them live to client accounts.
Publish
Makes the current saved version available to client accounts.
Delete
Removes the template from My Library.
Revert
Discards unsaved edits and restores the previous saved version.
Close
Closes the editor without saving changes.
Customizing a Template
Example: Modifying the Listing ID Search Template
In this example, the existing Listing ID Search template is customized while maintaining core functionality.
Removing the Default Navigation
Remove the following section:
{# only include the search nav on the frontend #}
{% include 'navbar-1.000.twig' %}Adding a Geolocation Search Button
Add a custom button below the Listing ID search form.
Example HTML
<button onclick="geolocation()">
Find Properties Near My Current Location
</button>
<div id="location"></div>This should be placed outside any Twig conditional statements so it always displays.
Adding Custom JavaScript
Switch to the JavaScript editor pane and add the following script.
Example Geolocation Script
// IDX search results page
var searchPage =
'http://mySubDomain.myDomain.com/idx/results/listings?';
// Geolocation requires HTTPS
function geolocation() {
var output = document.getElementById("location");
if (!navigator.geolocation) {
output.innerHTML =
"<p>Geolocation is not supported by your browser</p>";
}
function success(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var poly =
'pgon=' + latitude + '+' + longitude +
'&radius=3.0961' +
'&layerType=circle' +
'&clat=' + latitude +
'&clng=' + longitude +
'&zoom=13' +
'&idxID=all' +
'&pt=sfr' +
'&srt=prd';
output.innerHTML =
'<a href="' + searchPage + poly + '">' +
'Search by your Location</a>';
}
function error() {
output.innerHTML =
"Unable to retrieve your location";
}
output.innerHTML = "<p>Locating…</p>";
navigator.geolocation.getCurrentPosition(
success,
error
);
}Important Notes
- Geolocation functionality requires HTTPS.
- Custom JavaScript is fully supported within Partner Custom Templates.
- Developers can combine:
- Twig
- HTML
- CSS
- JavaScript
into a single custom IDX experience.
Additional Notes
- Template options and editor capabilities may evolve over time.
- New functionality may be added to My Library as the Partner Custom Template system matures.
- Always test templates on preview-enabled HTTPS accounts before publishing to production environments.