CSSIgniter Shortcodes plugin

February 3, 2012 - by Anastis Sourgoutsidis | Posted under: Freebies, Plugins

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.

Shortcodes preview & Reference

The following coloring options are available using the default theme. More (or less) options may be available, depending on the theme you choose.

Buttons

Buttons support three options, url, type and color. Their defaults are #, normal and grey respectively. You can use any option you need, and leave out the ones that you don’t want to change from the default.

[button]Button Text[/button]
or
[button url="#"]Button Text[/button]
or
[button url="#" type="normal" color="grey"]Button Text[/button]
etc… all give you:
Button Text

E.g., a button that links to CSSIgniter:
[button url="http://www.cssigniter.com"]Button Text[/button]
Button Text

Button Colors

[button color="grey"]Button Text[/button]
Button Text
[button color="white"]Button Text[/button]
Button Text
[button color="blue"]Button Text[/button]
Button Text
[button color="yellow"]Button Text[/button]
Button Text
[button color="green"]Button Text[/button]
Button Text
[button color="red"]Button Text[/button]
Button Text
[button color="black"]Button Text[/button]
Button Text
[button color="purple"]Button Text[/button]
Button Text

Button Types

[button type="normal"]Button Text[/button]
Button Text
[button type="download"]Button Text[/button]
Button Text
[button type="check" ]Button Text[/button]
Button Text
[button type="envelope"]Button Text[/button]
Button Text
[button type="cancel"]Button Text[/button]
Button Text
[button type="cart"]Button Text[/button]
Button Text

Combine types and colors for unique results:

[button type="download" color="red"]Button Text[/button]
Button Text
[button type="check" color="yellow"]Button Text[/button]
Button Text
[button type="envelope" color="green"]Button Text[/button]
Button Text
[button type="cancel" color="blue"]Button Text[/button]
Button Text
[button type="cart" color="purple"]Button Text[/button]
Button Text

Tooltips

Tooltips are a great way to provide supplemental information where and when needed, without the need to squeeze it along with the rest of the content. Just wrap your content with the tooltip and add the text you want to appear as the tip’s content. It’s that easy.

[tooltip contents="Test Tooltip"]Hover over me[/tooltip]
Hover over me

Tooltips are implemented using Brian Cray’s excellent tooltipsy plugin for jQuery.

Columns

Sometimes it’s useful to display stuff side by side, to either compare or make more readable. Currently, there is no easy way in WordPress that you can achieve such an effect, without manually writing HTML markup and styling it with CSS. Messy. With our columns shortcodes, you can do it as easy as one-two-three. Just remember that your last column is the last. You’ll see what we mean in a minute.

Half width columns

Half width columns are what the name suggests. Take up half the available space’s width. Therefore, you can only have two side by side. Use [one_half] and [one_half_last] to wrap your first and second columns’ content. E.g.:

[one_half]Praesent vitae augue at lacus posuere…[/one_half][one_half_last]Duis vulputate cursus urna et vulputate…[/one_half_last]

will give you:

Thirds columns

Just like half width columns, you wrap your content with the appropriate shortcodes. Only this time, the available options are [one_third], [one_third_last], [two_thirds], [two_thirds_last]. Mixing these shortcodes appropriately, you can achieve three distinctively different effects.

One, one and one thirds

[one_third]Praesent vitae augue at lacus posuere…[/one_third][one_third]Praesent vitae augue at lacus posuere…[/one_third][one_third_last]Praesent vitae augue at lacus posuere…[/one_third_last]

One and two thirds

[one_third]Praesent vitae augue at lacus posuere…[/one_third][two_thirds_last]Praesent vitae augue at lacus posuere…[/two_thirds_last]

Two and one thirds

[two_thirds]Praesent vitae augue at lacus posuere…[/two_thirds][one_third_last]Praesent vitae augue at lacus posuere…[/one_third_last]

Separators and Blockquotes

Separators, as the name suggests, separate logically or structurally your content. There are three separators that you can use:

[separator] or [separator type="normal"]

[separator type="double"]

[separator type="lightning"]

Quotes

The quote shortcode takes two parameters. A title and a float. Float may be either left or right.

Somewhere in your content, write:
[quote title="A Quote" float="left"]This is my favorite quote by Mr. Smith [/quote]
or
[quote title="A Quote" float="right"]This is my favorite quote by Mr. Smith [/quote]

A QuoteThis is my favorite quote by Mr. Smith

Praesent vitae augue at lacus posuere placerat id in mauris. Praesent libero odio, malesuada eu luctus pretium, dictum sit amet leo. Integer auctor nisl ac sem condimentum ornare. Nullam tempus felis nulla, eu tempus ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer ante justo, pharetra id malesuada id, posuere sed metus. Cras venenatis consectetur libero eget bibendum. Duis vulputate cursus urna et vulputate. Nullam a tellus nibh, vitae sodales tortor.

A QuoteThis is my favorite quote by Mr. Smith

Praesent vitae augue at lacus posuere placerat id in mauris. Praesent libero odio, malesuada eu luctus pretium, dictum sit amet leo. Integer auctor nisl ac sem condimentum ornare. Nullam tempus felis nulla, eu tempus ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer ante justo, pharetra id malesuada id, posuere sed metus. Cras venenatis consectetur libero eget bibendum. Duis vulputate cursus urna et vulputate. Nullam a tellus nibh, vitae sodales tortor.

Boxes

Boxes can greatly enhance you website, by providing focus on solid positions. The box shortcode has only one parameter, type, which can be one of: normal, info, warning, download, error and success. Each type of box, comes with its own icon.

[box]Hello there, this is the default box[/box]
or
[box type="normal"]Hello there, this is the default box[/box]

[box type="info"]Hello there, this is an info box[/box]

[box type="warning"]Hello there, this is a warning box[/box]

[box type="download"]Hello there, this is a download box[/box]

[box type="error"]Hello there, this is an error box[/box]

[box type="success"]Hello there, this is a success box[/box]

Lists

Tired of the default lists that come with WordPress? No problem. You can re-style them, without having to change a thing. Just create a list from the WordPress editor (unless you already have one ready) and wrap it with [list type="check"] [/list] or [list type="check"] [/list]

Google Maps

Yes. It’s finally easy to integrate a map into a post. All you need is the googlemap shortcode. Go to Google Maps, find the place you want, copy the URL and paste it into the src parameter. That’s it. You may optionally set a width and a height in pixels.

[googlemap width="250" height="200" src="http://maps.google.com/?ll=40.653425,22.930012&spn=0.091814,0.222988&hnear=Thessalonika,+Greece&t=m&z=13"]

 

[googlemap src="http://maps.google.com/?ll=40.653425,22.930012&spn=0.091814,0.222988&hnear=Thessalonika,+Greece&t=m&z=13"]

No Shortcode

This one is mostly for developers / tutorial writers. Just like we did above, you may need to write the words [button]Button[/button] without actually becoming a Button . What do you do? You use [nocode][/nocode] shortcode. Just wrap the shortcode you don’t want to process into the nocode shortcode, and you are set. E.g.:

[nocode][button]Button[/button][/nocode]
will display:
[button]Button[/button]

Note: There is a way, native to WordPress, to escape your shortcodes, by enclosing them in an extra set of square brackets, e.g. [[button]Hello[/button]]. It has been reported by some users that this way of escaping doesn’t work for them, and this is why we decided to include this extra, utility shortcode. After all, that’s what this plugin is all about. Giving you shortcodes!

Themes

You (or anyone else confident with CSS) can create themes for use with the plugin. This is a powerful feature, as it allows you to differentiate your blog from the rest, or customize the resulting elements to match the look and feel of your website. Imagine you switch themes and your company redesigns its website, you wouldn’t want to also switch plugins and manually converting shortcodes. Would you?

Selecting a theme

Just log into your admin panel, go to Settings -> CSSIgniter Shortcodes, and select any available theme from the Theme name drop-down box. Click Save Changes and you’re done. Enjoy the new look.

Creating a theme

Creating themes for CSSIgniter Shortcodes is very easy. Navigate inside the themes directory located inside the plugin, wp-content/plugins/ci-shortcodes/themes/ and create a new directory. This will be your theme’s name (filename restrictions apply according to your operating system). In there, create a css folder where you must place all your css files. Note that all .css files in the css sub-directory are loaded automatically.

You can now start customizing your theme. To kick-start your theme, you can just duplicate the default theme and start working from there. Just don’t forget to select your theme from the settings panel!

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]

Need to explain more? I don’t think so.

Happy ShortCoding!