Broker Beach includes a few custom shortcodes that you can use in posts, pages, and text widgets.

Buttons

You can put custom buttons in your posts, pages, and widgets by using the button shortcode. Button shortcodes take 4 attributes: url, color, size, and block. All attributes are optional. The default button looks like this [button]Default Button[/button] and is rendered using the shortcode [[button]Default Button[/button]]. The text inside the [[button][/button]] tags can be anything you want. Buttons utilize CSS3 and will look great in modern browsers. In older browsers the buttons won’t look as good, but they will still work the same.

Valid properties/values for button attributes

size  - mini, small, large (mini is the default)
url   - Any valid url. You must include the "http://" prefix (e.g. http://agentevolution.com)
color - primary (blue), alt (green), none (default grey color)
block - 1 (button will be block level)

Button Shortcode in Action

[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 color=”primary” size=”large”]Primary[/button] [button color=”alt” size=”large”]Alt[/button]

[[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 color="primary" size="large"]Primary[/button]]
[[button color="alt" size="large"]Alt[/button]]

Block Level Buttons

By default buttons are displayed [button]inline[/button].
Giving a button an attribute of block=”1″ will make it break onto a new line and expand to the width of its container. [button block=”1″]Block Button[/button] Any text after the button will show on a new line like this.

[button block=”1″ size=”large” color=”alt”]Block Button[/button] 
[[button block="1" size="large" color="alt"]Block Button[/button]]

Columns

Column shortcode allows you to create responsive columns of content. You can have up to six columns. On smaller screen sizes columns will collapse under each other and form rows, making your content more readable. Column shortcodes take two attributes size and first. “size” determines the width of the column. “first” only accepts one value and that is “1”. Every column has a little space on its left side to keep the columns from touching. Setting first=”1″ on a column will tell that column not to add space to its left side. If you forget to set first=”1″ on your first column, the columns will not display correctly.

Valid properties/values for columns

size
five-sixths
four-fifths
four-sixths
one-fifth
one-fourth
one-half
one-sixth
one-third
three-fifths
three-fourths
three-sixths
two-fifths
two-fourths
two-sixths
two-third

first
1    - (the column will not add space to its left side)
none - (the column will add some space to its left side)

Column Shortcode in Action

[column size=”one-third” first=”1″]

This is column 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

[/column]

[column size=”one-third”]

This is column 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

[/column]

[column size=”one-third”]

This is column 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

[/column]

[html_ent]
[column size="one-third" first="1"]

This is column 1



	Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
	sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
	Ut enim ad minim veniam, quis nostrud exercitation ullamco 
	laboris nisi ut aliquip ex ea commodo consequat.


[/column]

[column size="one-third"]

This is column 2



	Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
	sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
	Ut enim ad minim veniam, quis nostrud exercitation ullamco 
	laboris nisi ut aliquip ex ea commodo consequat.


[/column]

[column size="one-third"]

This is column 3



	Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
	sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
	Ut enim ad minim veniam, quis nostrud exercitation ullamco 
	laboris nisi ut aliquip ex ea commodo consequat.


[/column]
[/html_ent]

Social Icons & Contact Info

If you navigate to Genesis > Theme Settings inside the WordPress admin you will find a section that allows you to put in the URL’s to your social accounts. With the [[social_icons]] shortcode your can automatically insert icons that link to your social accounts.

[social_icons]

[[social_icons]]

You can also insert your phone number or brokerage address with shortcode.
[agent_phone]
[agent_address] 

[[agent_phone]]
[[agent_address]]

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.