Theme Shortcodes

This theme has 15 shortcodes available (except the WordPress default shortcodes), 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.

You should use the Shortcodes Generator to insert shortcodes, but these can also be added manually.

1. Accordion

[krown_accordion type="accordion" size="large" 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);
  • size - it can either be small or large, with a small difference in style.

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 size="medium" style="dar" label="Label" target="_self" href="#"]

This adds a special button. Properties:

  • size - the size, which can be small, medium or large;
  • style - the style, which can be dark, color or empty;
  • 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)://).

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. Contact Form

[krown_form label_name="Name" label_email="Email" label_subject="Subject" label_message="Message" label_send="Send" email="youremail@domain.com" success="Success Message" error="Error Message"]

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/.

It has several label properties, which basically control the labels adjacent to the proper field. These are label_name, label_email, label_subject, label_message & label_send. There is also the email field (see above if the form doesn’t work - also, try with a basic mail address if the email address associated with your domain doesn’t work out of the box). And there are two other properties to be displayed when a message was send (success) and when the fields are not properly completed (error).

6. 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/.

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

8. Posts Grid

[krown_latest_posts no="6"]

A really simple shortcode that will show up most recent blog posts in the form of a simple grid. It has only one property ( no), which controls the number of posts shown.

9. Projects Grid

[project_grid category="" author="" orderby="days_left" order="ASC" max="8" visible="3" style="carousel" pagination="no"]

This is not an original shortcode actually, but a refreshment of the IgnitionDeck grid shortcode. The difference between this and the original shortcode is that this one offers much more options for filtering and display. It also uses a custom grid design, so you won’t be able to use your own decks or skins in it - the concept of the project thumbnails is definitive. Properties:

  • category - project categories to display (write the ids here). If you want more than one category in a grid, separate them by a single comma (ex: 3,4,5). If not defined or blank, projects from all categories will be seen;
  • author - write the author’s slug - only one author can be added per grid;
  • orderby - the actual ordering system. Possible values are:
    • date - orders projects by creation date.
    • title - orders projects alphabetically.
    • days_left- orders by remaining days on project. Att! Expired projects (0 days left) will be shown first if ordering is done in desceding mode.
    • funds_raised- orders by funds (amount of money) raised by the project.
    • percent_raised - orders by the funding percentage (doesn’t have anything to do with the actual amount of money) of the project.
    • featured - shows featured projects.
  • order - the direction of the ordering. Can either be ASC or DESC;
  • max - the number of projects that will appear in the grid;
  • style - there are two possible styles for the shortcode: grid & carousel. The grid will display the projects in a regular masonry grid, while the carousel will only display a certain amount of projects and will give the user navigation arrows for displaying more.
  • visible - if you are using the carousel style, you can set a number of visible projects which will be shown at a time. This number needs to be lower than the max number of projects (for the navigation arrows to appear). For example, if you insert the shortcode inside a full width column, you should set this at 4, but if you insert the shortcode inside a 3/4 column, you should set the number of visible items at 3.
  • pagination - if you are using the masonry style you can also add pagination to the grid. This option is useful when you have lots of projects and want to divide them in separate pages. The number of projects per page is the number you set in the max property. To enable pagination, set the parameter value to “yes”.

10. Promo Box

[krown_box el_class="light-1"] Your content inside here [/krown_box]

It’s basically a boxed content shortcode, with any kind of content inside. The el_class property holds the style of the box, which can be light-1, light-2, dark or color.

11. Section

[krown_section background="#fff"] Your content inside here [/krown_section]

This shortcode should be used to insert a full width section inside a certain page template (don’t use it with sidebars). The background property can hold any CSS color, or even a full declaration such as url (path-to-image) no-repeat 0 0 red for example.

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

13. Tabs

[krown_tabs]
[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.

There are also two custom classes which can be added to the tabs shortcode, in order to improve it. These are:

  • fade - changes the tabs animation from a slide to a fade one
  • responsive-on - makes the tabs responsive, giving them an additional menu which will pop up on smaller displays. Use them like this:
[krown_tabs el_class="fade responsive-on"] ...

14. Twitter Feed

[krown_twitter user="yourusername" name="Your name" avatar="http://absolute_url_to_an_image.jpg" text_reply="Reply" text_retweet="Retweet" text_favorite="Favorite"]

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

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

MORE SHORTCODES

15. Widget Areas

If you want to use a certain widget area anywhere in the page (for example, if you want to insert the IgnitionDeck categories in the homepage), there is a shortcode which does this. Use it with the custom sidebars that you create in the theme options. But do not use the widget to replace actual sidebars - this is just to insert small widgets in various parts of your website.

[krown_widget_area id="unique-sidebar-id"]

16. Gallery

The gallery shortcode is a basic WordPress shortcode which in this theme translates into a slideshow. So the basic styling of the default shortcode will not work in this theme (such as columns or captions). But you can still order items, add only some pictures, by ids, etc..

17. Self Hosted Video & Audio

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.

18. 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.

19. 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!
UP NEXT: Widgets