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.

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:

1. Open a template from the available IDX Templates.
2. Click Save to Library.
3. 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.