Built-In Shortcodes

Shortcodes are a great way to insert dynamic content into a page simply by adding a token or (short) code.

There are several shortcodes included with Flexr.

Box Shortcode

Outputs a colored box containing specified content. There are two optional arguments for text color and background color. These can either be a hexadecimal code or valid HTML color name.

Usage:
[box]This will be displayed inside the rendered box.[/box]

[box color="snow" bgcolor="cornflowerblue"]This is a box with bgcolor set to 'cornflowerblue' and color set to 'snow'.[/box]

Example Output:

This is the default box with no optional arguments specified.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi enim mauris, faucibus nec gravida nec, pretium at tortor. Donec vehicula blandit augue in semper. Duis magna sapien, sagittis at eros ut, sodales rhoncus arcu.

This is a box with bgcolor set to 'cornflowerblue' and color set to 'snow'.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi enim mauris, faucibus nec gravida nec, pretium at tortor. Donec vehicula blandit augue in semper. Duis magna sapien, sagittis at eros ut, sodales rhoncus arcu.

  • This is an example of a warning box with icon. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi blandit nulla feugiat, velit eu ultrices quisque rutrum, lorem ut fermentum ullamcorper.

  • This is an example of a success box with icon. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi blandit nulla feugiat, velit eu ultrices quisque rutrum, lorem ut fermentum ullamcorper.

  • This is an example of an introduction box with icon. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi blandit nulla feugiat, velit eu ultrices quisque rutrum, lorem ut fermentum ullamcorper.

  • This is an example of an error box with icon. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi blandit nulla feugiat, velit eu ultrices quisque rutrum, lorem ut fermentum ullamcorper.

Button Shortcode

Outputs a colored button containing specified content which can include an icon. There are several optional arguments to control text links, and custom styling. As for the box shortcode the button colors can either be a hexadecimal code or valid HTML color name.

Usage: [button]Click Me![/button]

Example Output:

Default Button

 

Large Button

 

Secure Checkout

 

Enter

 

Cloud Nine

 

Show Image

 

Delete

 

Button With Border

 

Icon Left

 

Icon Right

 

 Rounded Corners 

 

Square Corners

 

Transparent Button

 

Inline Button 1 Inline Button 2

There are many more icons you can include too. Click here for the full list.

Testimonial Shortcode

Display testimonials on any page using the [tml] shortcode. These can even be random. Refresh the page to see different testimonials each time! You can now also display testimonial groups as a grid.

Usage: [tml group="123"] or [tml id="321"]

Output:

Lauren Michelin

This is an example of a 40% (or 2 out of 5) star rating. Duis tellus urna, interdum et luctus quis, congue non dui. Curabitur nunc turpis, dapibus sed purus eu.

David Gwyer

This is an example of a 100% (or 5 out of 5) star rating! 🙂
Flexr is a wonderfully flexible theme. It’s so easy to customize and the support is fantastic!

Terri Fisher

This is an example of a 90% (or 4.5 out of 5) star rating. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mollis sodales.

Jayne Murphy

This is an example of a 70% (or 3.5 out of 5) star rating. Consectetur adipiscing elit. Pellentesque mollis sodales.

Over the Rainbow

Submit Testimonials

You can now even allow testimonial submission from the front end of your site! Simply add the [tml-submit] shortcode anywhere on your site and users will be able to submit a testimonial. You can add a shortcode attribute to automatically publish a testimonial as soon as it is submitted, or mark it as pending, to be later moderated by admin.

Usage: [tml-submit]

*(required)

Column Layout Shortcode

Display two, three, or four column content layouts with ease!

Usage:

[one_half]First of 2 columns[/one_half][one_half_last]Second of 2 columns[/one_half_last]

[one_third]First of 3 columns[/one_third][one_third]Second of 3 columns[/one_third][one_third_last]Third of 3 columns[/one_third_last]

[one_fourth]First of 4 columns[/one_fourth][one_fourth]Second of 4 columns[/one_fourth][one_fourth]Third of 4 columns[/one_fourth][one_fourth_last]Fourth of 4 columns[/one_fourth_last]

[one_third]1/3 width[/one_third][two_thirds_last]2/3 width[/two_thirds_last]

[three_fourths]3/4 width[/three_fourths][one_fourth_last]1/4 width[/one_fourth_last]

[one_half]1/2 width[/one_half][one_fourth]1/4 width[/one_fourth][one_fourth_last]1/4 width[/one_fourth_last]

Example Output:

One Half

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tincidunt.

One Half

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tincidunt.



One Fourth

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tincidunt.

One Fourth

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tincidunt.

One Fourth

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tincidunt.

One Fourth

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tincidunt.


Two Thirds

Lorem ipsum dolor sit amet, consectetur adipiscing. Lorem ipsum dolor sit amet, consectetur adipiscing elit.


Three Fourths

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

One Fourth

Lorem ipsum dolor sit amet, consectetur adipiscing elit.


One Half

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

One Fourth

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

One Fourth

Lorem ipsum dolor sit amet, consectetur adipiscing elit.


Year Shortcode

Outputs the current year.

Usage: [year]

Example Output: 2017

Week-Dates Shortcode

Outputs the current month and start/end day numbers of the current week.

Usage: [week-dates]

Example Output: August 13th – 19th

Site-URL Shortcode

Outputs a link to the homepage of your current site. The link text is your site title as set in General > Settings in the WordPress admin.

Usage: [site-url]

Example Output: Flexr

Login or Logout Shortcode

Handy shortcode that shows a ‘Login’ link if you are not currently logged in. If you are logged in then a ‘Logout’ link is displayed.

Usage: [loginout]

Example Output: Log In

Vertical Gap Shortcode

Provides an easy way to manually insert vertical spacing into your content. Enter a height in pixels you want the gap to be. You can also add CSS class names to the gap container.

Usage:
[vgap] (height defaults to 30px)
[vgap height="100" class="one two three"]

Example Output:

Here is some text before we insert the gap shortcode.


And here is some text after the gap shortcode. View the page source code for yourself to verify the gap has been inserted!