CSSIgniter Shortcodes plugin

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.

A red box

With a black border and icon

Custom foreground color

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.

Three equal columns

[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″}

Item 1
Item 2
- Item 2-1
Item 3

#cisc-list-2 li:before{content:”f00c”}

Item 1
Item 2
- Item 2-1
Item 3

#cisc-list-3 li:before{content:”f00d”}#cisc-list-3 li:before{color:red}

Item 1
Item 2
- Item 2-1
Item 3

[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

[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

Tab 1
Tab 2

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.

Tab 1

Content 1

Tab 2

Content 2

[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!