Example 1 – Full-Width as per Page Layout

the page is a full-width layout, using gutenberg editor we will output the shortcode directly which sits literally inside the page layout.
It’s therefore “naturally” full width.
This is considered “abnormal” because most pages will not use this layout. As it doesn’t contain the contents properly.

// shortcode used: 

⟦ advanced-search nopaging=1 fullwidth=0 ⟧

Multiple maps on a single page are not permitted; based on the design of parent themes Google Maps integration.
Therefore, the below maps will render a spinning grey circle, nothing more.

Example 2 – “Normal” contained layout

Normally the page is contained, as can be seen, the shortcode cannot render itself full-width inside a container

// shortcode used: 

⟦ advanced-search fullwidth=0⟧

Example 3 – Contained but forced full

We are still within the normal contained page layout.
However now we will use the “fullwidth=1” flag on the shortcode, which uses some fancy CSS to force itself full-width.
The shortcode also has a “bgcolor=#efefef ” flag set, for handling the background coloring (if desired).
So the available options are:

  • fullwidth = 1 // default is now ‘1’. set to ‘0’ to keep it in current container
  • bgcolor = #<hexcode> || literal color
  • fontcolor = #<hexcode> || literal color

    // default off. set to ‘1’ to apply the bgcolor and fontoclor to the advanced search bar
    // (make container background match advanced bar)
  • applystyletosearch = 0

    // apply padding on vertical aspect (top/bottom). 40 or 60 px is what is generally used. Affix is required (“60px” ; not “60”).
  • vpadding = 0px
  • showmap = 1 // default is 1, shows map right below it. set to 0 to disable map output.
  • mapfilter = “” // default is empty string, meaning it’ll attain the most recent 10 (page size) listings. It’s not a live-map.
  • nopaging = 0 // default is off. ‘1’ enables showing all listings on map output.
// shortcode used: 

⟦ advanced-search bgcolor=#efefef fontcolor=white vpadding=60px nopaging=1 ⟧

As can be seen by this text, the page continues within the container block, but the rendered shortcode forces itself out of bounds.

Example 4 – map only

There’s also now a map-only shortcode using the same features as above.

// shortcode used: 

⟦ listings-map⟧

CXRE » sample – shortcodes for search