Shortcodes

Shortcodes

Knowledge Base > Curb Appeal > Prime Location > Open Floor Plan > Picture Perfect > Move-in Ready > Equity Framework > Must See > Timeless > Shortcodes

Content Shortcodes

ICON BOXES

Icon boxes are an elegant way to present short calls to action. With 5 styles to choose from, and hundreds of icons, use them to get noticed!

Parameters

  • type – 1,2,3,4,5 (1 is default)
  • url – Not required. Any valid url. You must include the “http://” or “https://” prefix (e.g. http://agentevolution.com)
  • newtab – true (if url is entered this will open in a new window)
  • heading – the heading to show
  • icon – the icon to show (choose from all the Font Awesome icons)

Example Shortcodes

[iconbox type="1" icon="fa-truck" heading="Type 1 iconbox"]This is an example of the iconbox type 1 shortcode.[/iconbox]
[iconbox type="1" newtab="true" icon="fa-phone" url="http://learn.agentevolution.com" heading="Type 1 iconbox"]This is an example of the iconbox type 1 shortcode.[/iconbox]
[iconbox type="2" icon="fa-key" heading="Type 2 iconbox"]This is an example of the iconbox type 2 shortcode.[/iconbox]
[iconbox type="2" newtab="0" icon="fa-star" url="http://learn.agentevolution.com" heading="Type 2 iconbox"]This is an example of the iconbox type 2 shortcode.[/iconbox]
[iconbox type="3" icon="fa-key" heading="Type 3 iconbox"]This is an example of the iconbox type 3 shortcode.[/iconbox]
[iconbox type="3" newtab="0" icon="fa-star" url="http://learn.agentevolution.com" heading="Type 3 iconbox"]This is an example of the iconbox type 3 shortcode.[/iconbox]
[iconbox type="4" icon="fa-truck" heading="Type 4 iconbox"]This is an example of the iconbox type 4 shortcode.[/iconbox]
[iconbox type="4" newtab="0" icon="fa-phone" url="http://learn.agentevolution.com" heading="Type 4 iconbox"]This is an example of the iconbox type 4 shortcode.[/iconbox]
[iconbox type="5" icon="fa-truck" heading="Type 5 iconbox"]This is an example of the iconbox type 5 shortcode.[/iconbox]
[iconbox type="5" newtab="0" icon="fa-phone" url="http://learn.agentevolution.com" heading="Type 5 iconbox"]This is an example of the iconbox type 5 shortcode.[/iconbox]

icon12
icon34
icon5

 

BUTTONS

You can put custom buttons in your posts, pages, and widgets by using the button shortcode. Button shortcodes take 5 attributes: url, color, size, block, and newtab. All attributes are optional.

Parameters

  • size – tiny, small, large (small is the default)
  • url – Any valid url. You must include the “http://” or “https://” prefix (e.g. http://agentevolution.com)
  • color – any color hex code starting with #
  • expand – true (button will fill container width)
  • newtab – true (button link will open in new tab/window)

Example Shortcodes

[button url="http://agentevolution.com" size="mini"]Mini[/button]
[button url="http://agentevolution.com" size="small"]Small[/button]
[button url="http://agentevolution.com" size="large"]Large[/button]
[button url="http://agentevolution.com" size="large" color="#26BB44"]Custom color[/button]
[button url="http://agentevolution.com" size="large" newtab="true"]New tab[/button]

buttons

Expanded Buttons

By default buttons are displayed inline.
Giving a button an attribute of expand=”true” will make it break onto a new line and expand to the width of its container. Any text after the button will show on a new line.

Example Shortcode

[[button expand=”true” size=”large” color=”alt” url=”http://agentevolution.com”]Block Button[/button]]
block

 

ALERT BOXES

Alert boxes are to show notices, warnings, or other info you want to call out.

Box types are: success, warning, info, alert, and secondary
Also accepts a parameter of allowclose set to true to allow the box to be closed.
Boxes can have a straight border (default) or using the border parameter you can have a round or radius box.

Example Shortcodes

[alert_box type="success"]This is the success alert box[/alert_box]
[alert_box type="warning"]This is the warning alert box[/alert_box]
[alert_box type="info"]This is the info alert box[/alert_box]
[alert_box type="alert"]This is the alert alert box[/alert_box]
[alert_box type="secondary"]This is the secondary alert box[/alert_box]
[alert_box type="success" allowclose="true"]This is the success alert box that allows closing[/alert_box]
[alert_box type="warning" allowclose="true"]This is the warning alert box that allows closing[/alert_box]
[alert_box type="info" border="round"]This is the info alert box with a rounded border[/alert_box]
[alert_box type="info" border="radius"]This is the info alert box with a border radius[/alert_box]

alerts

AGENT SOCIAL ICONS & INFO

With the [social_icons] shortcode your can automatically insert icons that link to your social accounts. Use the newtab parameter set to true to open them in a new window.

Example Shortcode

[social_icons newtab="true"]

social-shortcode

You can also insert your phone number, email, or brokerage address with shortcode.
The email shortcode includes an antispambot function that disguises your email in the source code to prevent spambots.

Example Shortcodes

[agent_phone]
[agent_email]
[agent_address]

contact-shortcode

FLEX VIDEO

Flex Video is a simple shortcode that will make your videos responsive. To use, just wrap your video embed code in the [flex_video] … [/flex_video] shortcode.

Example Shortcode

[flex_video]YouTube embed code here[/flex_video]

 

TESTIMONIALS

Testimonials is a simple shortcode that allows you to add client testimonials to pages, posts and widgets without having to install a testimonials plugin. To use, just wrap your testimonial in the [[testimonial] … [/testimonial]] shortcode.
The shortcode accepts two parameters:

  • name=the client’s name to be displayed
  • image=URL of image to display

Example Shortcode

[[testimonial name=”John Doe” image=”http://image-url-from-media-library”]Add the text of the testimonial between the opening and closing testimonial shortcodes[/testimonial]]
testimonial

Column Shortcodes

Columns are based on the Foundation Grid. This is a flexible grid system, based on 12 columns, that allows you to customize the size of columns for small, medium, or large screens.

ROWS

All columns must be placed in rows. So each group of columns should be wrapped in the [[row] shortcode like so:

[row] … [/row]

COLUMNS

Columns are defined based on the screen size:

  • Small (e.g. mobile phones)
  • Medium (e.g. tablets)
  • Large (e.g. desktop)

Each screen size is comprised of 12 columns. So your column sizes for each row should add up to 12 (e.g. 6 and 6, 5 and 7, or 4, 4 and 4).
[column small=”12″ medium=”6″ large=”6″] [/column]

Only one size parameter is required and we suggest using the large parameter, as it will collapse to full width (12 columns) on smaller screens.
[column large=”6″] [/column]
[column large=”6″] [/column]

Example Shortcodes

[row]
[column large="4"]Large - 4 columns[/column]
[column large="4"]Large - 4 columns[/column]
[column large="4"]Large - 4 columns[/column]
[/row]

[row]
[column small="12" large="4"]Small - 12 columns, Large - 4 columns[/column]
[column small="6" large="4"]Small - 6 columns, Large - 4 columns[/column]
[column small="6" large="4"]Small - 6 columns, Large - 4 columns[/column]
[/row]

[row]
[column small="12" large="3"]Small - 12 columns, Large - 3 columns[/column]
[column small="12" large="9"]Small - 12 columns, Large - 9 columns[/column]
[/row]

[row]
[column small="12" medium="6" large="4"]Small - 12 columns, Medium - 6 columns, Large - 4 columns[/column]
[column small="12" medium="6" large="8"]Small - 12 columns, Medium - 6 columns, Large - 8 columns[/column]
[/row]

columns

Font Awesome Icons

Use the following shortcode to insert one of the many available Font Awesome icons. View the available icons at http://fortawesome.github.io/Font-Awesome/icons/ to grab the class for your desired icon. Each one starts with “fa-“.

The shortcode accepts three parameters:

  • icon=”fa-ICON-NAME”
  • size=”SIZE-IN-PIXELS” (integer)
  • color=”#000000″ (color hex code)

Example Shortcode

[icon icon="fa-thumbs-up" size="30" color="#be5353"]

thumbsup

 

Properticons

Use the following shortcode to insert one of the available Properticons. View the available icons at http://agentevolution.github.io/properticons/ to grab the class for your desired icon. Each one starts with “properticons-“.

The shortcode accepts three parameters:

  • icon=”properticons-ICON-NAME”
  • size=”SIZE-IN-PIXELS” (integer)
  • color=”#000000″ (color hex code)

Example Shortcode

[properticon icon="properticons-beds" size="70" color="#be5353"]

properticon

Footer Shortcodes

The following shortcodes can be used anywhere on your site, but are ideally suited for the Footer section in the Admin:

[footer_copyright first="2014"]

Outputs a copyright symbol and year

[footer_equity_link]

Outputs a link to to Agent Evolution

[footer_loginout]

Outputs link to login/out of WordPress

[idx_sitemap]

Outputs link to the IDX sitemap URL entered in Theme Settings (applies only to IDX Broker customers)