Theme Shortcodes

A preview of the Krown Shortcodes plugin from the Huge theme.

This theme has 13 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)://)

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

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

9. Promo Box

[krown_box] Your content inside here [/krown_box]

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

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

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

12. Testimonial

[krown_testimonial client="Title" position="Subtitle"]

Testimonial content goes inside!

[/krown_testimonial]

The testimonials have a client and a position, both of which will appear at the bottom of it. Inside the shortcode you can have whatever kind of content you would like, but it’s good to keep it minimal.

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

Just one last thought.. This theme doesn’t offer any special widgets, because all of the shortcodes can be used as widgets in the blog’s sidebar you use with the theme. Just put the plain shortcode into a Text Widget in the blog’s sidebar and the shortcodes will function as widgets.

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

UP NEXT: Sidebar Widgets