Documentation · Integration Guide

Page Builder Integration

This document explains how to use the ADP Car Market Hub plugin within page builder workflows, how to place shortcodes on pages built with any page editor, and what to validate on the front end after placement.

When to use this document

Use this document if you are:

Embedding vehicle listings, search filters, or the comparison tool on pages built with a page builder such as Elementor, WPBakery, Divi, Beaver Builder, or the WordPress block editor (Gutenberg).
Creating a custom homepage or landing page that should show a filtered subset of the vehicle inventory.
Placing a standalone search filter on a page so visitors can start filtering before navigating to the results page.
Diagnosing issues where plugin assets do not load correctly on a page builder page.

The audience is a WordPress administrator or site builder. No PHP or CSS knowledge is required for basic shortcode placement.

Overview

The plugin provides three front-end shortcodes that you can place on any WordPress page, including pages built with third-party page builders:

Shortcode	What it renders
`[as24ci_archive]`	Full vehicle listing with search filters, sort controls, status tabs, and pagination. Equivalent to the vehicle archive page.
`[as24ci_search_filter]`	Standalone search filter form without results. Submits to the vehicle archive or to any results page you specify.
`[as24ci_compare]`	Vehicle comparison table. Depends on vehicles having been added to the comparison list by the visitor.

Additional shortcodes are available for secondary features:

Shortcode	What it renders
`[as24ci_favorites]`	List of vehicles the visitor has marked as favourites.
`[as24ci_location_box post_id=""]`	Dealer location card for the specified Location post.
`[as24ci_hours_box post_id=""]`	Opening hours card for the specified Location post.

These shortcodes work in any page builder that supports standard WordPress shortcodes. The output is the same as the corresponding plugin-managed pages.

Prerequisites

Before placing shortcodes:

The plugin is installed and activated.
At least one vehicle has been imported (for [as24ci_archive] and [as24ci_search_filter]).
Pretty permalinks are enabled (Settings → Permalinks). Without pretty permalinks the vehicle archive URL may not resolve correctly when [as24ci_search_filter] redirects a visitor to the results page.
If you are using the Block Editor (Gutenberg), no additional setup is needed. If you are using a third-party page builder, verify that it preserves WordPress shortcodes without encoding or escaping the square brackets.

Step by step instructions

Embedding the vehicle archive on a page

Create a new page or open an existing page in your page builder.
Add a shortcode block (or its equivalent in your page builder — Elementor has a Shortcode widget, WPBakery has a Single Image → Shortcode element, Divi has a Code module, and so on).
Paste the shortcode:

   [as24ci_archive]

To pre-filter the listing — for example to show only electric vehicles — use the optional shortcode attributes:

   [as24ci_archive fuel="electric" per_page="24"]

Supported attributes:

Attribute	Values	Description
`make`	Any make slug (e.g. `bmw`)	Pre-selects a make.
`model`	Any model slug (e.g. `3-series`)	Pre-selects a model (use with `make`).
`price_min`	Integer	Minimum price filter.
`price_max`	Integer	Maximum price filter.
`fuel`	Any fuel type slug	Pre-selects a fuel type.
`body`	Any body type slug	Pre-selects a body type.
`order_by`	`price`, `mileage`, `date`	Default sort field.
`order`	`asc`, `desc`	Sort direction. Default `asc`.
`per_page`	`12`, `24`, `48`, `72`, `all`	Results per page. Default `24`.

Shortcode attributes set the default values. Visitors can still override them by interacting with the on-page filters. URL query parameters always take precedence over shortcode attributes.

Publish or preview the page and confirm that the vehicle listing appears.

Place [as24ci_search_filter] anywhere on a page — for example on the homepage — to let visitors set their criteria before being taken to the results page.

[as24ci_search_filter results_url="/cars/"]

The results_url attribute specifies where the form submits. It defaults to the vehicle archive URL. Set it to the URL of any page that contains [as24ci_archive].
If the plugin cannot determine the archive URL automatically and results_url is not set, the form defaults to /cars/.

Using the compare page as a template

The compare page is a special WordPress page template (page-as24ci_compare.php). The plugin can create a Compare page automatically during installation. You can also place [as24ci_compare] in a shortcode block on any regular page to embed the comparison table inline.

Configuration reference

All shortcodes use settings already defined in the plugin administration. There are no separate configuration fields for page builder mode.

Shortcode attribute	Where the underlying options come from
Which filters appear in `[as24ci_archive]` and `[as24ci_search_filter]`	The active filter layout configured in the Filters tab of the plugin admin.
Visual design of all shortcodes	Car Market Hub → Design — colors, typography, border radius, etc.
Feature flags (favorites, compare, search agent)	Car Market Hub → Settings (and the Setup Wizard). If a feature is disabled, the corresponding shortcode renders nothing or renders a message.

Asset loading

The plugin detects whether a shortcode is present on the current page using WordPress's has_shortcode() function, and enqueues the appropriate CSS and JavaScript files automatically. You do not need to manually configure asset loading.

On pages using [as24ci_archive] or [as24ci_compare], the following stylesheets are enqueued:

as24ci-archive.css — for [as24ci_archive]
as24ci-compare.css — for [as24ci_compare] and for the compare toggle on archive and single pages
as24ci-search-agent.css — when the Search Agent feature is enabled

The dynamic design CSS block (<style id="as24ci-dynamic-styles">) is output in <head> on every front-end page, not only on plugin-specific pages.

Operational notes

Pagination on shortcode pages. The [as24ci_archive] shortcode reads the ?paged= and ?page= query parameters for pagination. When a page builder or theme uses those parameters for its own purposes, there may be a conflict. Test pagination on the page in its final context.
Plain permalinks. With plain (query-string) permalinks enabled, is_post_type_archive() returns false for the plugin's archive. The plugin falls back to has_shortcode() detection, so CSS and JavaScript are still loaded. However, the results_url for [as24ci_search_filter] may not resolve correctly — prefer pretty permalinks in production.
Page builder content rendering. Some page builders render shortcodes on the server (standard do_shortcode) and some render them via Ajax or on the client. The plugin's shortcodes rely on standard server-side rendering. If a page builder defers rendering to the client side, the output may appear empty in the builder preview but should display correctly on the published front end.
Nested shortcodes. Do not nest plugin shortcodes inside each other. Each shortcode manages its own WP_Query and global state.
Full-width layout. Like the plugin's own archive and single templates, shortcode output wraps everything inside .as24ci-page.alignfull. On block themes this causes the listing to span full width. If the page builder restricts the page to a narrower container, the shortcode content will be constrained by that container. See Theme Integration for details.
Search filter position. The [as24ci_search_filter] shortcode renders the filter form but not a results list. When placed on the homepage, the form action should point to a separate page that contains [as24ci_archive].

Troubleshooting

Symptom	Likely cause	What to check
Shortcode renders as literal text (`[as24ci_archive]`).	The page builder is escaping or encoding the shortcode instead of executing it.	Use the page builder's dedicated Shortcode widget or Code block rather than a plain-text block.
Archive shortcode shows no vehicles.	No vehicles have been imported yet, or the pre-filter attributes in the shortcode match no vehicles.	Import vehicles first. Check the attribute values against the actual data in Car Market Hub → Cars.
CSS not applied on the shortcode page.	The page builder strips or defers the plugin stylesheets.	Check the browser's developer tools → Network tab for the `as24ci-archive` or `as24ci-single` stylesheet. If it is missing, check whether the page builder has an option to preserve third-party assets.
Dynamic CSS (`as24ci-dynamic-styles`) is missing.	A caching or optimisation plugin is removing inline `<style>` blocks from `<head>`.	Exclude `as24ci-dynamic-styles` from the optimisation rule, or whitelist the `as24ci-*` handles.
Pagination does not work on the archive shortcode page.	The `?paged=` parameter is being consumed or rewritten by the theme or page builder.	Test with plain URL navigation. Check whether the theme or page builder intercepts query parameters.
`[as24ci_search_filter]` submits to the wrong URL.	The `results_url` attribute is missing or points to a page without `[as24ci_archive]`.	Add `results_url="/cars/"` (or the correct path) to the shortcode.