Themes Shortcodes

Here is a video with the Shorcodes generator & page settings:

This theme has 10 + 3 shortcodes available, each with it’s own purpose of giving you the right tools to create awesome content with ease! Shortcodes can be used anywhere in the theme (in regular pages, blog posts and even portfolio projects).

You should use the Shortcodes Generator to insert shortcodes, but these can also be added manually (as detailed before).

1. Accordion

[krown_accordion type="accordion" opened="1"] [krown_accordion_section title="Title"] 

Content for a section goes here!  

[/krown_accordion_section] [/krown_accordion]

This is the accordion shortcode and it is composed from several sections, as you see above (there’s only one section in the example above, but of course you can add as many as you want). Properties:

  • type - it can be either an accordion or a toggle. An accordion has only a section opened at one time, while the toggle can allow all the sections to be opened or closed.
  • opened - you can choose what section you want to be opened by default (-1 means that the accordion will be initially closed)

2. Alert Message

[krown_alert type="error"]

This adds an alert box. It has four types available: error, success, info and notice.

3. Buttons

[krown_button label="Label" target="_self" href="#"]

This adds a special button. Properties:

  • label - the label of the button
  • target - the target, which can be _self (the same window), _blank (new window),  _parent or _top
  • href - any valid url, don’t forget the protocol (http(s)://)
  • color - can be either light or dark
  • style - can be either default or arrow (makes the button an arrow)

4. Columns

[krown_column width="1/3" el_position="first"]  Your content here!  [/krown_column]

This is how columns are made within the theme. Don’t forget to close the shortcode once you’ve put your content inside it. Properties:

  • width - possible values are: 1/3, 1/2, 1/4, 2/3, 3/4, 1/1
  • el_position - please be sure that you mark the first or last element (or both if you have a full width column) in a row by using this property, otherwise your layout will break apart.

5. Flickr Feed

[krown_flickr id="0524" no="6"]

As the title suggests, it is a basic feed from a user’s latest flickr stream. The no sets the number of images, while the id is the id of album, which can be taken from here:  http://idgettr.com/

6. Icons

[krown_icon size="small" type="name" color="red" break="float"]

It simply adds an icon to your design. There are three sizes available (tiny, small, medium & large) and the color can be any  css color name or css color value. The break property can be either float or break, meaning the way the icon will wrap against the text. A floating icon will wrap, while a breaking icon will stand on top of the text. For a full list of icons names see this.

7. Promo Box

[krown_box] Your content inside here [/krown_box]

It’s basically a boxed content shortcode, with any kind of content inside.

8. Social Icons

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

This is simply a list of social icons with links to your social profiles. 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, 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).

9. Tabs

[krown_tabs type="horizontal"]  [krown_tabs_section title="Title" icon="name"]  

Content for a section goes here!

[/krown_tabs_section] [/krown_tabs]

This one’s similar with the accordion shortcode, but it doesn’t have other properties, then the content. You can add as many tabs as you wish. You can also configure the tabs to be either horizontal or vertical and you can even add icons in the vertical tabs.

10. Team member

[krown_team title="Title" subtitle="Subtitle" image="http://image.jpg"]

Content goes inside!

[/krown_testimonial]

Custom class

Each shortcode has another property available, called el_class. This property adds a unique class set by you to the element, so that you can modify it’s style easily and properly through css. For example:

[krown_box el_class="my-class"] Your content inside here [/krown_box]

Will add a my-class to the promo box DOM container, so you can target it through CSS selectors, like this: .my-class

There are also other shortcodes which can be used but aren’t available through the Krown Shortcodes Plugin.

11. Gallery

The gallery shortcode is a basic WordPress shortcode. Hitting the Add Media button and creating a gallery will output a nicely looking gallery which opens it’s larger images into lightboxes. You can choose the number of columns, order items, add only some pictures by ids, etc..

12. 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!

13. Custom lists

Not quite a shortcode, but if you want your lists to display funky styles as seen in the online preview of the theme, you need to go in the HTML editor and on the list that you have created (ul tag) add a certain class, like this:

<ul class="krown-list arrow">   etc.

The possible values for styles (write instead of arrow) are:

  • arrow
  • circle
  • check
  • star
  • dash
  • plus
  • special
UP NEXT: Widgets