Theme Shortcodes

This theme is full of shortcodes! Inside the custom page builder you can achieve whatever you want, as everything is easy to use, customize and understand.

It uses a slightly modified version of the popular Visual Composer plugin, with some default shortcodes and custom build ones as well.

Note 1: Not all of the original VC shortcodes are available in this theme, but everything what you see in the online demo can be achieved with shortcodes.

Note 2: The front editor of the Visual Composer plugin doesn’t work well with the theme (there are a couple of big bugs and conflicts). This means that until a fix will be found (if ever), you will only be able to use the backend editor.

Before reading more about each shortcode, please watch this video as an introduction of the page builder:


1. Row

The row is the base of everything in the Visual Composer.

2. Text Block

This is the most basic shortcode of them all. Whenever you need some text or add a custom shortcode (not available in here), or an iframe, or anything which uses text / HTML, use this shortcode.

3. Separator

For whenever you feel that there is too much or too less space on the page. It can be used both with positive and negative values. And it also features the ability to insert a border.

4. Separator with Text

This is the most loved shortcode in the theme. It is needed to define sections within pages and to get the user’s attention. All titles are wrapped inside h3 elements and you can use also icons in the title.

5. Message Box

A simple text box with four style options.

6. Single Image

If you’re looking to add an image in your text block, please use the WordPress default media uploader for this purpose (see this article for more info: http://codex.wordpress.org/Inserting_Images_into_Posts_and_Pages). If you’re looking for standalone images which open more complex links and allow for size definement, use this shortcode.

7. Tabs

This is a simple tabs shortcode, available in two different styles.

8. Accordion

This shortcode can be used for a lot of purposes, such as small accordions or toggles used in little areas or as a large accordion used as a FAQ or a basic large accordion type. You can select the opened section and change it’s behavior choosing between a toggle type or an accordion type. Each section is another shortcode within the content window.

9. Posts Carousel

This shortcode allows you to build up a custom posts carousel. You can choose how many items to appear in the list and also the number of columns. It’s a complex shortcode, which can also mimic the functionality of the modern blog portfolio. If you’re using the classic blog display, you should either put featured images for all the posts or no featured images at all. This is because posts don’t look good in combinations of the both.

With the “build query” option you can also build a complex query in order to create unlimited blogs on your theme. You should only work with the post type, because portfolios have their own shortcode. You can choose categories, tags, individual posts, authors, etc.. Using this builder you can really divide your blog posts into custom blogs, each with it’s own functionality.

10. Widgetised Sidebar

If you have some awesome WordPress widgets that can’t be embedded in any place other than a sidebar, you can use this shortcode to choose a custom sidebar (which you create in the Theme Options).

11. Button

This adds a button. All kinds of options such as style, size & attribute properties are available for this shortcode.

12. Raw HTML

If you want to add raw html code to the site this is the way to do it (although you can add simple stuff like iframes and tables into the text blocks).

13. Raw JS

I can’t think why would you need javascript added in the body of the site, because of such purposes you should use plugins, hooks and external files, but if you want to go wild with this shortcode, here you go.

14. Flickr Widget

As the title suggests, it is a basic feed from a user’s latest flickr stream.

15. Progress Bars

This shortcode inserts a set of up to six animated progress bars.

16. Pie Charts

This shortcode inserts a set of up to six animated pie charts (as a slider). If your value is larger, you should add the class smaller to the shortcode.

17. Revolution Slider

Insert a Revolution Slider, which can also be done in the Text Box, via the shortcodes provided by the plugin.

18. Icon Text Block

The same as the normal text block, but this one also features an icon, either above or near the text.

19. Contact Info

A little bit of contact information that will display along some cool icons.

20. Contact Form

This is a basic contact form, which can be used in a larger or a smaller container. It is protected against spam and it also uses the wp_mail() function, so if your hosting provider doesn’t support the php mail() function, you can use a plugin like: http://wordpress.org/extend/plugins/wp-smtp/.

21. Lightbox

A simple lightbox, which can become complicated because it allows all kinds of settings, such as thumbnail alignment or lightbox custom content types like HTML or IFRAMES. You can even create galleries with this shortcode (by inserting many lightbox shortcodes into a page), however this is not recommended for images, since for this purpose there already is the WordPress Gallery Shortcode.

22. Posts Widget

This is not the same as the latest posts shortcode. This is a much smaller shortcode and it’s basically a widget that displays all kind of posts: popular, recent, most commented or random, and it displays them in a list.

23. Promo Box

It’s basically a boxed content shortcode, the promo word being only for fuzz.

24. Promo Line

It’s basically a type of tagline with a call to action button but only one type of heading text.

25. Tagline

Similar to the promo line. It allows two lines of text (a h1 and a h2) and an icon.

26. Team Member

Simply adds a team member. Note that the picture of the user should be 150x150 or 300x300 for retina support.

27. Testimonials

Adds a testimonial text block.

28. Twitter Feed

A simple twitter feed widget. The widget is simple, but the process of using it is a bit complicated because of twitter and their recent API changes. The thing is, you can’t display twitter feeds on your site now without an API key. But it’s not impossible to get this key either... If you go to Settings > Twitter Feed Auth you’ll notice some weird fields. Those are the fields that you actually need to complete and if you give a read to the description you’ll understand what you have to do. I’ve found this discussion on the Twitter forums and i thought that it’s a good resource on this topic: https://dev.twitter.com/discussions/631

But more than this, you also have some shortcodes which are not available in the composer, but can be added easily as regular shortcodes via a Text Block or the classic editor.

All these shortcodes have the ability to select a custom class. This class can be useful for extra editing (there are already some classes available, but you can create custom CSS code and apply it to certain shortcodes by using the custom class field).

29. Gallery

The gallery shortcode is a basic WordPress shortcode which in this theme translates into a slideshow or a grid. You can add a gallery by hitting the “Add Media button” and following the instructions there. The columns do work with this theme, so you can style the gallery exactly like you want.

Another cool feature of this theme is that you can turn a WP gallery into a shortcode, so you can easily insert sliders absolutely everywhere you want! To change a grid gallery into a slider, go to the “Classic Editor” and you’ll see the gallery shortcode like this (just an example):

[gallery ids="1,2,3"]
	

You need to simply add type=”slider” as a parameter, like this:

[gallery ids="1,2,3" type="slider"]
	

If you want to add captions either to the galleries or sliders, simply caption the images that you want to have a caption in the WordPress gallery creator. All images with a caption added in the backend will feature a caption on the site.

30. Self Hosted Video & Audio

While embedded videos (or maps) can be added via iframes (all these sites such as YouTube, Vimeo, Google Maps, offer embedding options via iframes, so there’s no need for custom built shortcodes). So while embedded videos have their own method, you can also add custom videos using the WordPress video shortcode. More info here: https://codex.wordpress.org/Video_Shortcode &https://codex.wordpress.org/Audio_Shortcode

31. Social Icons

The social icons are an easy shortcode which can be added manually like the shortcodes above.

[vc_social_links twitter="http://twitter.com/yourprofile/" facebook="http://facebook.com/yourprofile/" 
target="_blank"]

Each new attribute represents an url, and these are the possible values: twitter, facebook, dribbble, vimeo, linkedin, behance, pinterest, delicious, digg, youtube, cloud, github, flickr, gplus, tumblr, stumbleupon, lastfm, evernote, picasa, googlecircles, skype, instagram, xing, soundcloud, aim, steam, dropbox, mail, rss. All these social icons are available for use in this theme.

Don’t forget the target property which can be either _blank (opens links in new windows) or _self (opens links in the same window, default).

32. Lightboxes

To create a ligthbox gallery use WordPress galleries and configure the gallery exactly like you wish. To create a lightbox image, simply put an image linked to the large version and it will transform into a lightbox.

To create an iframe which loads an iframe or use a button to open an image into a lightbox, use these codes:

A. Iframe wrapped in a thumbnail:

<a href="//player.vimeo.com/video/90480436?title=0&byline=0&portrait=0&color=e5493a" data-fancybox-type="iframe"><img alt="" src="http://yourwebsite.com/path_to_thumbnail_img.jpg" /></a>

B. Iframe wrapped in a button:

<a href="//player.vimeo.com/video/90480436?title=0&byline=0&portrait=0&color=e5493a" data-fancybox-type="iframe">Your Label</a>

C. Iframe wrapped in a text link:

<a data-fancybox-type="iframe" href="//player.vimeo.com/video/90444206?title=0&byline=0&portrait=0&color=e5493a">Your Text</a>

D. Image wrapped in a button:

<a  href="http://yourwebsite.com/path_to_thumbnail_img.jpg">Your Text</a>

E. Image wrapped in a text link

<a  href="http://yourwebsite.com/path_to_thumbnail_img.jpg">Your Text</a>

Using this method above you can use the ligthbox exactly as you wish. These are the available options.

Make sure than when embedding content from video sites and such, you only take the href or src from the embedding code. Don’t put everything in there!

33. Video / audio playlists

Just as you add a video or an audio file to any page, you can now add full media playlists as content. When inserting media, along with the old gallery button you can now see two other buttons, which will guide you through an easy way to add the playlists on your pages.

UP NEXT: Widgets