CSSIgniter Shortcodes is a shortcodes plugin. But different.
Sure, you can create a button with a shortcode using our plugin or any other plugin, but how do you know it will look nice with your brand new premium WordPress theme? How do you know it won’t overlap or even break other shortcodes defined by virtually almost every other plugin? That’s right. You don’t.
That’s why we took the matter into our hands and created a set of beautiful, hand-crafted shortcodes, that work well with our themes. And yours. Now you know. Now you have a choice. Not only you can select ready-made shortcode themes and change the look and feel of your elements instantaneously, but you can also have compatible shortcode names by the click of a button.
As of May 2015 the CSSIgniter Shortcodes plugin has been revamped and updated to version 2.0. The following post is updated with all the new features and shortcodes of the new version. You can find the new documentation here.
Button shortcode
A small buttonA medium button A large button
Download nowDownload nowDownload now
RefreshRefreshRefresh
RoundedRoundedRounded
[button url="https://www.cssigniter.com" size="small"]A small button[/button]
[button url="https://www.cssigniter.com" size="medium" scheme="red"]A medium button [/button]
[button url="https://www.cssigniter.com" size="large" scheme="yellow"]A large button[/button]
[button size="small" scheme="pink" border_color="#c9054f" border_width="2px" icon="fa-download"]Download now[/button]
[button size="small" scheme="yellow" border_color="#e5d35b" border_width="2px" icon="fa-download"]Download now[/button]
[button size="small" scheme="blue" border_color="#0e76b8" border_width="2px" icon="fa-download"]Download now[/button]
[button scheme="yellow" fg_color="rgb(10, 20, 30)" icon="fa-refresh" spin]Refresh[/button]
[button scheme="green" fg_color="rgb(10, 20, 30)" icon="fa-refresh" spin]Refresh[/button]
[button scheme="red" fg_color="rgb(10, 20, 30)" icon="fa-refresh" spin]Refresh[/button]
[button icon="fa-spinner" corners="5px" spin]Rounded[/button]
[button icon="fa-spinner" corners="5px" scheme="red" spin]Rounded[/button]
[button icon="fa-spinner" corners="5px" scheme="yellow" spin]Rounded[/button]
Examples
Box shortcode
Just a box with some content in it.
With a black border and icon
Rounded corners on a spinning icon.
[box]Just a box with some content in it.[/box]
[box scheme="red"]A red box[/box]
[box scheme="red" border_color="#000000" border_width="thick" icon="fa-download"]With a black border and icon[/box]
[box scheme="green" fg_color="rgb(255,255,255)" icon="fa-refresh" spin]Custom foreground color[/box]
[box icon="fa-spinner" corners="3px" spin]Rounded corners on a spinning icon.[/box]
Examples
Grid shortcodes
Two equal columns
Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia.
Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere.
Three equal columns
Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere.
Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere.
[row]
[col desktop="6" tablet="6"]
Two equal columns
Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia.
[/col]
[col desktop="6" tablet="6"]
Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere.
[/col]
[/row]
Example
Headings shortcodes
This is set from the options to be H2
A maroon H2 with globe
An H4 with a lemon
With a bottom border
[h level="2" scheme="green"]This is set from the options to be H2[/h]
[h level="2" icon="fa-globe" fg_color="maroon" spin]A maroon H2 with globe[/h]
[h3 icon="fa-lemon-o" scheme="yellow"]An H4 with a lemon[/h3][hr height="1px" color="rgba(0,0,0,0.2)"]
[h4 icon="fa-globe" border_width="0 0 4px 0" border_color="#444444"]With a bottom border[/h4]
Examples
List shortcode
You can replace those boring default HTML bullets by any icon you like. Just create a normal unordered (ul) list from within the WordPress editor, and wrap it in a [list][/list] shortcode.
#cisc-list-1 li:before{content:”f111″}
#cisc-list-2 li:before{content:”f00c”}
#cisc-list-3 li:before{content:”f00d”}#cisc-list-3 li:before{color:red}
[list scheme="green" icon="fa-check"]
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Item 2-1</li>
</ul>
</li>
<li>Item 3</li>
</ul>
[/list]
Example
Blockquote shortcode
Try not to become a man of success, but rather try to become a man of value.
Albert Einstein
Try not to become a man of success, but rather try to become a man of value.
Albert Einstein
[quote title="Albert Einstein"]Try not to become a man of success, but rather try to become a man of value.[/quote]
Example
Separator shortcodes
[separator /]
[hr type="dotted" scheme="red" width="50%" center /]
[hr type="dashed" scheme="green" height="10px" /]
[hr type="groove" scheme="blue" height="thick" width="80%" /]
[hr type="ridge" /]
Examples
Tooltip shortcode
Do you know what a CPU is?
Just a tooltip on the top.
How about an always on, right, tooltip?
[tooltip tip="I'm on top!" position="top"]on the top.[/tooltip]
Example
Map shortcodes
[map lat="40.7828649" lon="-73.9653549" title="New York" text="Central Park" /]
Example
Slider shortcode
[slider]
[slide]<img src="https://www.firstwp.com/wp-content/uploads/2020/05/slide1-1.jpg" alt="" />[/slide]
[slide]<img src="https://www.firstwp.com/wp-content/uploads/2020/05/slide2.jpg" alt="" />[/slide]
[slide]<img src="https://www.firstwp.com/wp-content/uploads/2020/05/slide3.jpg" alt="" />[/slide]
[/slider]
Example
Tabs shortcodes
Content 1 – Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam.
Content 2 – Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam.
[tabs]
[tab title="Tab 1"]Content 1[/tab]
[tab title="Tab 2"]Content 2[/tab]
[/tabs]
Example
Accordions shortcodes
Accordions’ syntax and attributes are exactly the same like the tabs shortcode. Only the actual names of the shortcode change. That way, you can easily swap from tabs to accordions and back, without touching any of the attributes.
[accordion]
[accordion_tab title="Tab 1"]Content 1[/accordion_tab]
[accordion_tab title="Tab 2"]Content 2[/accordion_tab]
[/accordion]
Example
Download the CSSIgniter Shortcodes plugin from the WordPress plugin repository. Read the full documentation here.
Compatibility Mode
It’s quite common for users to have installed more than one shortcodes plugins, or for themes to provide their own shortcodes. When this happens, chances are that some shortcodes overlap, and more often than not, you end up having shortcodes that you can’t be sure where are they getting their styles and markup from. That’s why we developed a compatibility feature into our own plugin. Just go into the plugin’s settings panel, check the Compatibility Mode checkbox and Save Changes. You’ve just future-proofed your posts! But keep reading…
It’s nothing fancy really. All shortcodes now get a prefix of “ci-“ minimizing the risk of collision with other shortcode providers. For example, instead of [button]Hello[/button] you should now write [ci-button]Hello[/button][/ci-nocode]
Happy ShortCoding!