Using the ThemeTrust Shortcodes Plugin

Installing and Activating

After downloading the Shortcodes Plugin, you’re ready to install and activate it. Begin by hovering over the Plugins link on the main menu and clicking on Add New, as shown.

Locate and click the Upload link underneath the Install Plugins header. Click on the Choose File button and find the TTShortCode1.0.zip file you downloaded early. Click Install Now to begin uploading the file. When WordPress has finished uploading the file, click the Activate Plugin link.

Using Shortcodes

Shortcodes are quick and easy tags you can use to add special elements to your page. These elements include columns, tabs, toggles and other neat and useful bits of code– all without writing a single line of HTML.

Shortcodes require you to be very strict about how you write them and what options you use. If, for example, I create a set of tabs, using the [ssc][tabgroup][/ssc] shortcode and tell it to give me an accordion, by entering [ssc][tabgroup type="acordion"][/ssc], I will not get the desired result because I misspelled “accordion.”

Slideshow Shortcode

This plugin comes with a special slideshow built-in that scales with the fluid layout which is all part of the responsive design. All you have to do to turn a set of images in your content into a slideshow is wrap them in this shortcode:

[ssc][slideshow][/slideshow][/ssc]

See the example below:

[ssc][slideshow]
<img src="http://domain/imageurl-1.jpg" />
<img src="http://domain/imageurl-2.jpg" />
[/slideshow][/ssc]

It’s important to note that images in a slideshow can not be linked.

Column Shortcodes

This plugin comes with column shortcodes, which allows you to easily create columns within your content. You can create columns that are one third, two thirds, or one half of the content area’s width. Here’s an example. Notice the additon of “_last” to the name of the last column’s shorcode. This is important.

[ssc][one_third]

...your content here

[/one_third]

[one_third]

...your content here

[/one_third]

[one_third_last]

...your content here

[/one_third_last][/ssc]

Here are the available column shortcodes: one_third, two_third, one_half. Use these in the format demonstrated above.

Button Shortcode

You can easily create buttons like so:

[ssc][button label="Button Label" url="http://themetrust.com/" color="#5eafb0" target="_blank" ptag=true][/ssc]

Tabs Shortcodes

Tabs are a great way to allow your users to switch between product options or browse different kinds of information depending on what’s relevant for them. You may, for example, choose to show a product and leave the specifications, testimonials, and other detailed information in separate tabs.

The tabs shortcode accepts two style options, “tabs” (the default) and “pills”, shown with the corresponding code below.

Tabs:

[tab_group nav=”tabs”]
[tab title=”Tab 1″] Tab 1 content. [/tab]
[tab title=”Tab 2″] Tab 2 content. [/tab]
[/tab_group]

Which we created using this code:

[ssc][tab_group nav="tabs"]
[tab title="Tab 1"] Tab content. [/tab]
[tab title="Tab n"] Tab content. [/tab]
[/tab_group][/ssc]

Toggles Shortcodes

Toggles can be used to allow users to choose what information they want to see instead of having to scroll through a lot of content to find it. We use toggles here at ThemeTrust on our Knowledge Base articles.

The toggles shortcode accepts two style options, “panel” (the default) and “accordion”, shown with the corresponding code below.

Plain Toggles:

[toggle_group]
[toggle title=”Toggle 1″] Toggle 1 content. [/toggle]
[toggle title=”Toggle 2″] Toggle 2 content. [/toggle]
[/toggle_group]

Which we created using this code:

[ssc][toggle_group]
[toggle title="Toggle 1"] Toggle 1 content. [/toggle]
[toggle title="Toggle 2"] Toggle 2 content. [/toggle]
[/toggle_group][/ssc]

And the accordion:

[toggle_group type=”accordion”]
[toggle title=”Accordion Toggle 1″] Accordion toggle 1 content. [/toggle]
[toggle title=”Accordion Toggle 2″] Accordion toggle 2 content. [/toggle]
[/toggle_group]

Which we created using this code:

[ssc][toggle_group type="accordion"]
[toggle title="Accordion 1"] Toggle 1 content. [/toggle]
[toggle title="Accordion 2"] Toggle 2 content. [/toggle]
[/toggle_group][/ssc]