Birch comes with simple to use shortcodes built right in, such as buttons and columns. To use the shortcodes, follow the instructions below.

Buttons

Button shortcode can be added to any page, post, or widget. To add, use the following:


[button url="http://bottomlessdesign.com/demos/birch/" label="Example Button" size="small" target="_blank"]

[button url=”http://bottomlessdesign.com/demos/birch/” size=”small” label=”Example Button”]

[button url="http://bottomlessdesign.com/demos/birch/" label="Example Button" size="medium" target="_blank"]

[button url=”http://bottomlessdesign.com/demos/birch/” size=”medium” label=”Example Button”]

[button url="http://bottomlessdesign.com/demos/birch/" label="Example Button" size="large" target="_blank"]

[button url=”http://bottomlessdesign.com/demos/birch/” size=”large” label=”Example Button”]

The button shortcode supports 5 attributes: url, label, color (optional), size (optional), and target (optional).

Columns

Columns shortcode can be added to any page, post, or widget. Columns can be created as one half, one third, two thirds, or one fourth of the content area’s width. To add, use the following:


[one_third]
Example content 1 here. Lorem ipsum dolor sit amet, qui ex civibus qualisque adversarium, ad sea iusto scripta adipiscing.
[/one_third]

[one_third]
Example content 2 here. Lorem ipsum dolor sit amet, qui ex civibus qualisque adversarium, ad sea iusto scripta adipiscing.
[/one_third]

[one_third_last]
Example content 3 here. Lorem ipsum dolor sit amet, qui ex civibus qualisque adversarium, ad sea iusto scripta adipiscing.
[/one_third_last]

[one_third]
Example content 1 here. Lorem ipsum dolor sit amet, qui ex civibus qualisque adversarium, ad sea iusto scripta adipiscing.
[/one_third]

[one_third]
Example content 2 here. Lorem ipsum dolor sit amet, qui ex civibus qualisque adversarium, ad sea iusto scripta adipiscing.
[/one_third]

[one_third_last]
Example content 3 here. Lorem ipsum dolor sit amet, qui ex civibus qualisque adversarium, ad sea iusto scripta adipiscing.
[/one_third_last]

Notice the addition of “_last” to the last column’s shorcode. This is necessary for the columns to display properly.

Images can be inserted into the column shortcode and HTML can also be used (such as links or bold/italic text).

Slideshow

Slideshow shortcode can be added to any page, post, or widget. Images can be any size, although it is recommended that they are all the same size. You can add as many images as you like to a slideshow–just place each image on a new line. The slideshow can also be wrapped inside of a column shortcode for further customization. To add, use the following:


[slideshow]
<img src="http://yourdomain.com/imageurl-1.jpg" />
<img src="http://yourdomain.com/imageurl-2.jpg" />
<img src="http://yourdomain.com/imageurl-3.jpg" />
<img src="http://yourdomain.com/imageurl-4.jpg" />
[/slideshow]

This slideshow requires JavaScript.