Documentation /

Themify Shortcodes

All Themify shortcodes are discontinued in all themes. You need to install Themify Shortcodes plugin if you want to use these shortcodes.

To insert a shortcode, simply paste the sample shortcode listed below in the post or page content editor. If you want to run the shortcodes in sidebar widget, drop in a Text widget and insert the shortcode in the Text box. This documentation lists all the shortcodes packed in the theme. You may configure the shortcode by changing/adding the parameters.

Button

Available parameters:

  • style= style of the button. You can combine the following options (eg style="large yellow rounded fa-bell"):
    • available colors: white, yellow, orange, blue, green, red, black, purple, gray, light-yellow, light-blue, light-green, pink, lavender
    • available sizes: small, large, xlarge
    • available styles: flat, rect, rounded, embossed, outline
    • available icons: FontAwesome
  • color = background color of the button (eg. color="#ddd")
  • link = link of the button (eg. link="https://themify.me")
  • text = font color of the button text (eg. text="#ccc")
  • target = link target (eg. target="_blank" will open link in a new window)

Sample usages


[themify_button link="url"]Text[/themify_button]

[themify_button link="url" style="large red rounded" target="_blank"]Text[/themify_button]

[themify_button link="url" color="#333" text="#fff"]Text[/themify_button]

To open the button link in a lightbox, add 'themify_lightbox' in the style parameter as follows:


[themify_button style="large purple themify_lightbox"  link="//www.youtube.com/watch?v=FJ8il9MUYac"] Button [/themify_button]

To load external sites in lightbox you need to add iframe=true to the URL as follows:


[themify_button style="large purple themify_lightbox"  link="https://themify.me?iframe=true&width=100%&height=100%"] Button [/themify_button]

Column

Available parameters:

  • grid= grid of the columns:
    • 4-1 = quarter width
    • 4-2 = half
    • 4-3 = three fourth
    • 3-1 = one third
    • 3-2 = two thirds
    • 2-1 = half
    • first = first column. It is used to clear the floating and margin space. You need to enter the first attribute in the grid parameter of every first column.

Sample usages


[themify_col grid="2-1 first"]content[/themify_col]

[themify_col grid="2-1"]content[/themify_col]


[themify_col grid="3-1 first"]content[/themify_col]

[themify_col grid="3-1"]content[/themify_col]

[themify_col grid="3-1"]content[/themify_col]


[themify_col grid="4-1 first"]content[/themify_col]

[themify_col grid="4-1"]content[/themify_col]

[themify_col grid="4-1"]content[/themify_col]

[themify_col grid="4-1"]content[/themify_col]


[themify_col grid="4-2 first"]content[/themify_col]

[themify_col grid="4-1"]content[/themify_col]

[themify_col grid="4-1"]content[/themify_col]

Nested columns

If you need to use columns nested inside another column, use the [themify_sub_col] shortcode instead. The parameters are the same than in the general [themify_col] shortcode.

Advanced: CSS classes for columns

Columns also support adding a custom CSS class that you can use to stylize them later in Custom CSS. This must be done with care because it can break the column layout if you have a class that is used for another purpose, so try using unique class names and use them to apply style only to these.
For example, you could use the column shortcodes to create a pricing table and add CSS classes to stylize later depending on the product offer:


[themify_col grid="3-1 product-pack entry-pack first-pack"]content[/themify_col]

[themify_col grid="3-1 product-pack standard-pack"]content[/themify_col]

[themify_col grid="3-1 product-pack advanced-pack"]content[/themify_col]

In this example, we could use .product-pack to apply a consistent style for columns, .entry-pack, .standard-pack and .advanced-pack to apply a different icon for the package and use .first-pack to add a specific style for the first pricing column. After we have our classes in place, we can use them to target the elements we want to stylize in Styling > Custom CSS.

Horizontal Rule (hr)

Available parameters:

  • color = color of the horizontal rule (pink, red, light-gray, dark-gray, black, orange, yellow, white)
  • width = horizontal width
  • border-width = ruler thickness

Sample usages


[themify_hr]

[themify_hr color="orange"]

[themify_hr color="red" width="100px" border_width="5px"]

[themify_hr color="yellow" width="50%" border_width="10px"]

Quote

To display your content in a blockquote, wrap the text with: [themify_quote] content here [/themify_quote]. It will output as <blockquote> content here </blockquote>

Is Logged In

To display a special message or specific content to logged in users of your site, you may use the is_logged_in shortcode:


[themify_is_logged_in] messge here [/themify_is_logged_in]

Is Guest

To display a special message or specific content to guests (someone not logged in) of your site, you can use the is_guest shortcode:


[themify_is_guest] messge here [/themify_is_guest]

Map

Use the map shortcode to display Google maps.

Available parameters:

  • address = location address (eg. 238 Street Ave., Toronto, Ontario, Canada)
  • width = width of the map container (px or % value)
  • height = height of the map container (px or % value)
  • zoom = map zoom level (1 - 16, default = 8)
  • type = map type (roadmap, satellite, hybrid, terrain, default = roadmap)
  • scroll_wheel = map scroll (yes, no, default= yes)
  • draggable = map dragging (yes, no, desktop, default= yes). Setting this parameter to "desktop" will disable it in mobile devices making it draggable only in desktop.

Sample usages:


[themify_map address="Yonge Street and Eglinton Ave. Toronto, Ontario, Canada" width=100% height=400px]

[themify_map address="12 Main St. Toronto, Ontario, Canada" width=300px height=200px zoom=16]

Twitter

To use the Twitter shortcode: you would need to create an access token from the Twitter site and then insert the access token code in Themify > Settings > Integration API > Twitter API Settings (refer to this tutorial for details).

Available parameters:

  • username = Twitter username (eg. themify). Required parameter.
  • show_count = Number of tweets to show (default = 5).
  • show_timestamp = Whether to show tweet date and time (default = true).
  • show_follow = Whether to show a link to your account (default = false).
  • follow_text = Text linked to your Twitter account (default = Follow me).

Sample usages:


[themify_twitter username="themify"]

[themify_twitter username="themify" show_count="3" show_follow="true" follow_text="Follow Themify"]

Post Slider

Use the post_slider shortcode to display a slider of posts.

Available parameters:

  • limit = number of post to query (default = 5)
  • category = category ID number or category name (default = all categories). Use minus number to exclude category (eg. category=-1 will exclude category 1)
  • image = show post image or not (yes, no, default = yes)
  • image_w = post image width (default 240px)
  • image_h = post image height (default 180px)
  • title = show post title (yes, no, default = yes)
  • unlink_image = remove the link on featured image (yes, no, default=no)
  • unlink_title = remove the link on the post title (yes, no, default=no)
  • display = display whether content, excerpt or none (content, excerpt, none, default = none)
  • post_meta = display post meta (yes, no, default = no)
  • post_type = post type to retrieve the slider items from. Defaults to "post" and can be configured to a custom post type
  • taxonomy = taxonomy ID to use for "category" parameter (default = "category")
  • more_text = more link text (note more text is only available if display=content and the post has more tag)
  • visible = number of post visible at the same time (default = 1)
  • scroll = number of item to scroll (default = 1)
  • effect = transition effect (slide, fade, crossfade, cover, cover-fade, uncover, uncover-fade, default = slide)
  • pause_hover = pause the slider animation when mouse is over it (default = no)
  • auto = auto play slider in number of seconds (default = 0 means off)
  • wrap = wrap the slider posts so it will loop back to the first item (yes, no, default = yes)
  • speed = animation speed (normal, slow, fast, default = normal)
  • slider_nav = show slider navigation (yes, no, default = yes)
  • width = width of the slider div tag (eg. <div id="slider" style="width: 500px;">)
  • height = height of the slider div (eg. <div id="slider" style="height: 300px;">)
  • class = custom css class name (eg. <div id="slider">)
  • pager = displays pagination below thumbnails (yes, no, default = yes)

Sample usages:


[themify_post_slider image="yes" image_w="300" image_h="200" visible="3" scroll="1"]

[themify_post_slider category="-1" limit="4" visible="1" scroll="1" auto="2" speed="fast" display="content" more_text="More Text"]

Slider

Use the slider shortcode to display a slider with custom content (any text or html tags).

Available parameters:

  • visible = number of post visible at the same time (default = 1)
  • scroll = number of item to scroll (default = 1)
  • effect = transition effect (slide, fade, crossfade, cover, cover-fade, uncover, uncover-fade, default = slide)
  • auto = auto play slider in number of seconds (default = 0 means off)
  • pause_hover = pause the slider animation when mouse is over it (default = no)
  • wrap = wrap the slider posts so it will loop back to the first item (yes, no, default = yes)
  • speed = animation speed (normal, slow, fast, default = normal)
  • slider_nav = show slider navigation (yes, no, default = yes)
  • class = custom css class name (eg. <div id="slider">)
  • pager = displays pagination below thumbnails (yes, no, default = yes)

Sample usages:

The slider shortcode works just like the <ul> and <li> tag. It requires the opening and closing tag. You would need the opening [themify_slider] and closing [/themify_slider] tag. Then each slide requires the opening [themify_slide] and [/themify_slide]. You may insert any HTML tags in the [themify_slide].


[themify_slider]
	[themify_slide] one [/themify_slide]
	[themify_slide] two [/themify_slide]
	[themify_slide] three [/themify_slide]
[/themify_slider]

[themify_slider auto="1" scroll="1" speed="fast"]
	[themify_slide] one [/themify_slide]
	[themify_slide] two [/themify_slide]
	[themify_slide] three [/themify_slide]
[/themify_slider]

List Posts

Use the list_posts shortcode to query any number of post from any categories.

Available parameters:

  • limit = number of post to query (default = 5). Enter -1 to query all posts (eg. limit=-1).
  • category = category ID number or category name (default = all categories). Use minus number to exclude category (eg. category=-1 will exclude category 1)
  • offset = number of posts to skip over (default = 0)
  • order = specifies ascendent or descendent order (ASC, DESC, default = DESC)
  • orderby = criteria used to order posts (author, comment_count, date, menu_order, rand, title, default = date)
  • post_type = creates the list using only posts with this type (default = post)
  • taxonomy = the taxonomy to retrieve posts from, affects the "category" parameter (default = category)
  • image = show post image or not (yes, no, default = yes)
  • image_w = post image width (default 240px)
  • image_h = post image height (default 180px)
  • title = show post title (yes, no, default = yes)
  • display = display whether content, excerpt or none (content, excerpt, none, default = none)
  • post_meta = display post meta (yes, no, default = no)
  • post_date = display post date (yes, no, default = no)
  • more_text = more link text (note more text is only available if display=content and the post has more tag)
  • style = layout style (list-post, grid4, grid3, grid2, grid2-thumb, list-thumb-image, default = list-post). You may also add custom css class in here (eg. style="grid4 custom-class").
  • unlink_image = remove the link on featured image (yes, no, default=no)
  • unlink_title = remove the link on the post title (yes, no, default=no)

Sample usages:


[themify_list_posts limit="4" image="yes" style="grid4"]

[themify_list_posts category="2,5,8,24" image="yes" style="grid4" post_date="yes"]

[themify_list_posts limit="-1" category="-1" image="yes" image_w="200" image_h="160" post_date="yes" post_meta="yes" display="content" more_text="More Text" style="grid3 custom-class"]

Box

Available parameters:

  • style= style of the box. You can combine the following options (eg style="yellow map rounded fa-bell")
    • available colors: blue, green, red, purple, yellow, orange, pink, lavender, gray, black, light-yellow, light-blue, light-green
    • available icons: announcement, comment, question, upload, download, highlight, map, warning, info, note, contact
    • available styles: rounded, shadow
    • available icons: FontAwesome

Sample usages:


[themify_box]
	content here
[/themify_box]

[themify_box style="blue map rounded shadow"]
	content here
[/themify_box]

Author Box

Author box is great for adding signature at the end of the post or page. It will display the author's profile.

Available parameters:

  • avatar = author profile's avatar (yes, no, default = yes)
  • avatar_size = avatar image size (default 48)
  • style= style of the author box
    • available colors: blue, green, red, purple, yellow, orange, pink, lavender, gray, black, light-yellow, light-blue, light-green
    • available styles: rounded, shadow
    • note you may also add your custom css class in style parameter (eg. style="yellow custom-class")
  • author_link = show author profile link (yes, no, default = no)

Sample usages:


[themify_author_box]

[themify_author_box style="light-yellow rounded shadow" avatar="yes" avatar_size="56" author_link="yes"]

Icon

The [themify_icon] shortcode allows you to display an icon and its label linked to a URL.

Available parameters:

  • icon= icon to display. Available icons: FontAwesome
  • label= text to show next to the icon.
  • link= URL to link the icon and label to.
  • style= style of the button. You can combine the following options (eg style="large yellow rounded fa-bell"):
    • available sizes: small, large, xlarge
    • available styles: rounded, squared
  • color = background color of the button (eg. color="#ddd")
  • link = link of the button (eg. link="https://themify.me")
  • text = font color of the button text (eg. text="#ccc")
  • target = link target (eg. target="_blank" will open link in a new window)
  • icon_color = icon color in hexadecimal format (eg. color="#ddd").
  • icon_bg = icon background color in hexadecimal format (eg. color="#fc9").

Sample usages

Show a Twitter icon and label linked to Themify profile, with light blue background, white icon in large size with rounded background shape.


[themify_icon label="Twitter" link="http://twitter.com/themify" icon="fa-twitter" icon_bg="#67C7E5" icon_color="#fff" style="large rounded"]

Show only icon linked to Themify page on Facebook with icon in blue.


[themify_icon link="http://facebook.com/themify" icon="fa-facebook" icon_color="#436EA5"]

Icon List

The [themify_list] shortcode allows you to display the unordered (bullet) list with an icon.

Available parameters:

  • icon= icon to display. Available icons: FontAwesome
  • icon_color = icon color in hexadecimal format (eg. color="#ddd").
  • icon_bg = icon background color in hexadecimal format (eg. color="#fc9").
  • style = Additional CSS classes that can be added to the list container.

Sample usages

Show an orange circle beside each list item:


[themify_list icon="fa-circle" icon_color="#fff" icon_bg="#ffa600" style="custom_class_name"]
<ul>
	<li>List item 1</li>
	<li>List item 2</li>
</ul>
[/themify_list]

Show a green checkmark beside each list item:


[themify_list icon="fa-check" icon_color="#00d419"]
<ul>
	<li>List item 1</li>
	<li>List item 2</li>
</ul>
[/themify_list]