CSSIgniter Shortcodes plugin

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

Download CSSIgniter Shortcodes from the WordPress Plugin Directory.

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:

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.

Duis vulputate cursus urna et vulputate.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.

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]

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.

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.

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.

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]

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.

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

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]

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

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.

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]

Hello there, this is the default box

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

Hello there, this is an info box

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

Hello there, this is a warning box

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

Hello there, this is a download box

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

Hello there, this is an error box

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

Hello there, this is a success 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]

  • List Item
  • List Item
  • List Item
    • List Sub Item
    • List Sub Item
  • List Item
  • List Item

  • List Item
  • List Item
  • List Item
    • List Sub Item
    • List Sub Item
  • List Item
  • List Item

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!

39 thoughts on “CSSIgniter Shortcodes plugin

    • This is not an issue of the plugin. It’s up to the widget to decide whether it will interpret shortcodes or not. For the text widget, you can add this to your functions.php:
      add_filter('widget_text', 'do_shortcode');

  1. I’d like to use button shortcode to open an url in new tab/window, but target=”_blank” won’t work. Is there a way to do that?

  2. Great plugin thanks for sharing. A few suggestions

    1. It would be nice to have a link to this page in plugin’s settings page.

    2. It would be nice if we can adjust the width of boxes and float them to left or right along with content, just like quotes.

    3. It would be nice if there was a size element to buttons to create large call of action buttons like:
    [button color="blue" size="large"]Button Text[/button]

    Again its a very nice plugin. Thanks

      • I have the same configuration. The problem is that the buttons are the entire width of the surrounding container — too wide.

        • Works fine for me.
          Some more specific info would definitely help.
          Is the shortcode on a post? On a widget? Can you paste me the actual code that you use? Is there a live URL that I could take a look at?

  3. I have two problems, I am using WP 3.5.1.

    *The title on the homepage of old gallery posts are being overlapped. Because of this problem I can’t enter the post by clicking on the title.

    *the blockqoute style isn’t working properly in a post, but it does work on a page.

    Love the theme!

    • Hi there,
      no there isn’t one. This is usually better left on tables, as it’s really tabular data displayed.

  4. trying to add a map of the the clinic in the post for the feature slider on the homepage but only comes up as the link and not the actual map. please help. Thanks

  5. can’t seem to generate the map for the googlemap shortcode. i am trying to put it in a post to show up in the feature slider please help

    • Hi there,
      I can’t really help as I don’t know what slider and what theme you may be referring to, but what you can do is this:
      Try any other standard shortcode and see whether it works. If not, then the slider and/or theme doesn’t support it. If it does work, then it’s probably something plugin-related, so get back to me.
      Just so you know, it’s always helpful to have a URL to look at :)

  6. Hi,

    I am having a problem with the columns shortcode.

    When I put more than a certain amount of text in the second two thirds column it moves underneath the first third column.

    Here is the code:

    This works and displays as expected.

    [ci-one_third]
    Name
    Elected Director

    [/ci-one_third]
    [ci-two_thirds_last]
    some text here
    [/ci-two_thirds_last]

    This does not.

    [ci-one_third]
    Name
    Elected Director

    [/ci-one_third]
    [ci-two_thirds_last]
    some text here some text here some text here some text here some text here some text here some text here some text here
    [/ci-two_thirds_last]

    I can pm you the link and login details if you want to take a look.

    Thanks.

    • Could I have a link to see the problem at hand? Login details won’t be necessary.

      By the way, try having [/ci-one_third][ci-two_thirds_last] exactly one after the other, no spaces between theme. Sometime it creates problems.

    • This isn’t possible currently, and probably won’t be available in the future too, as it’s not a good practice, and invalid markup according to xHTML and HTML5.

      However you could adapt this jQuery code targeting a.ci-button elements in order to achieve the same result.

      Hope this helps.

  7. Is there a way to ignore the shortcode in the responsive themes? When I style the columns with the shortcode on the desktop they look beautiful, but on the iphone it looks just terrible. Is there a fix around this?

    • Try adding this piece of CSS:

      @media only screen and (max-width: 768px) {
      	.ci-column { float: none; margin-right: 0; width: auto; }
      }
      

      It should make the columns responsive.

      • Any plans on including responsive grid behaviour in this plugin? I notice your themes already have a responsive grid in them.

        • Hello, there are definite plans to make the shortcodes fully responsive but it’s going to be worked on next month. We’re also probably going to use the bootstrap grid for them as our themes.

  8. Can i edit the short code code? e.g. remove the tick from the success box or fiddle with colours or the dimensions( wrap the box around the text) ???

    • You don’t have to change the shortcodes’ code for this kind of changes. You can just create a new theme.

      Duplicate the folder plugins/cssigniter-shortcodes/themes/default/ and rename it as you wish (preferably a single word, or dash or underscore separated, no spaces).

      Then, edit the css3.css file within the css/ folder of your new theme and change it as much as you like. You can also change/add/remove images from the images/ folder.

      Please note that if/when you update the plugin, the themes/ folder is overwritten, so make sure you have a backup of your theme, in order to restore it later.

  9. Hi there, I’ve added a custom icon list for each item and see the regular bullets behind the icons. Any way of only showing the icons? I appreciate any help in the matter. :)

    Abbie

    • That should be a matter of some simple CSS. Probably your theme overrides the plugin’s CSS rules, and that’s why you see the bullets.

      Can you provide us with a link to see the problem at hand?

  10. When I activate the plug-in I get the error “Fatal error: Allowed memory size of 67108864 bytes exhausted (tried to allocate 74 bytes) in /usr/home/mysite.com/web/wp-includes/formatting.php on line 737″

    • Hi there,
      you’ll need to change your PHP’s memory limit, preferably from within the php.ini file.
      This guide might help.

      If you can’t find/edit your php.ini file, please contact your hosting company and they should be able to sort it out for you.

  11. hi ive tried creating the coloumn effect with the shortcodes but its not working, this is what ive written could someone please tell me what ive done wrong.

    [one_third]Rooms-

    Standard Bedroom with double Bed -

    1000 pesos/night

    There are 17 rooms on the Island and we are currently upgrading the rooms for a more comfortable stay at Utopia Beach Resort.[/one_third][one_third]Day Trip

    200 pesos pp/day

    For a day trip at Utopia Island Beach resort you can enjoy the stunning views of Balayan bay from our taverna style Restaurant whilst making the most of the sea life with the Scuba and Snorkeling gear available for rent where you can go for boat trips to other Diving destinations. Other activities include taking a walk up the mountain side, playing volleyball and badminton or simply relaxing by the water front.[/one_third][one_third_last]Package Deals

    2000 pp/day

    The package deal includes the nights accommodation, breakfast, lunch and dinner at our Fusion restaurant.
    The entire resort can be booked on a package basis with a 20% package discount. Minimum 30 people maximum 70 people. If booking the entire resort karaoke is permitted. Otherwise in the interest of all guests there is no karaoke allowed at the beach.[/one_third_last]

    • It looks like you are using the shortcode just fine.
      What exactly seems to be the problem?

      Also, switch the editor to Text mode, and make sure the shortcodes appear fine. Sometimes the Visual editor messes things up.

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>