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.

Download CSSIgniter Shortcodes from the WordPress Plugin Directory.

Button shortcode: [button][/button]

A button to CSSIgniter A button to CSSIgniter A button to CSSIgniter

[button url="http://www.cssigniter.com" size="large"]A button to CSSIgniter[/button]

New window to Google New window to Google New window to Google

[button url="http://www.google.com" target="_blank" scheme="red"]New window to Google[/button]

Download now Download now Download now

[button size="small" scheme="pink" border_color="#c9054f" border_width="2px" icon="fa-download"]Download now[/button]

Refresh Refresh Refresh

[button scheme="green" fg_color="rgb(10, 20, 30)" icon="fa-refresh" spin]Refresh[/button]

Rounded Rounded Rounded

[button icon="fa-spinner" corners="5px" spin]Rounded[/button]


Box shortcode: [box][/box]

Just a box with some content in it.
[box]Just a box with some content in it.[/box]

A red box
[box scheme="red"]A red box[/box]

With a black border and icon
[box scheme="red" border_color="#000000" border_width="thick" icon="fa-download"]With a black border and icon[/box]

Custom foreground color
[box scheme="green" fg_color="rgb(255, 255, 255)" icon="fa-refresh" spin]Custom foreground color[/box]

Rounded corners on a spinning icon.
[box icon="fa-spinner" corners="20px" spin]Rounded corners on a spinning icon.[/box]


Grid shortcodes: [row][/row], [column][/column], [col][/col]

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 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"]Content[/col][col desktop="6" tablet="6"]Content[/col][/row]

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

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="4"]Content[/col][col desktop="4"]Content[/col][col desktop="4"]Content[/col][/row]

Two unequal columns on deskop, equal on tablets.

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. 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][column desktop="4"]Content[/column][column desktop="8"]Content[/column][/row]


Headings shortcodes: [h][/h], [h1][/h1], [h2][/h2], [h3][/h3], [h4][/h4], [h5][/h5], [h6][/h6]

This is set from the options to be H2

[h scheme="green"]This is set from the options to be H2[/h]

A maroon H3 with globe

[h level="3" icon="fa-globe" fg_color="maroon" spin]A maroon H3 with globe[/h]

An H4 with a lemon

[h4 icon="fa-lemon-o" scheme="yellow"]An H4 with a lemon[/h4]

With a bottom border

[h3 icon="fa-globe" border_width="0 0 4px 0" border_color="#444444"]With a bottom border[/h3]


List shortcode: [list][/list]

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.

  • Item 1
  • Item 2
    • Item 2-1
  • Item 3

  • Item 1
  • Item 2
    • Item 2-1
  • Item 3

  • Item 1
  • Item 2
    • Item 2-1
  • Item 3

[list color="red" icon="fa-close"]

  • Item 1
  • Item 2
    • Item 2-1
  • Item 3

[/list]


Blockquote shortcode: [quote][/quote]

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]

Try not to become a man of success, but rather try to become a man of value.

Albert Einstein

[quote title="Albert Einstein" scheme="green" fg_color="#ffffff"]Try not to become a man of success, but rather try to become a man of value.[/quote]


Separator shortcodes: separator , hr


[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" /]


Tooltip shortcode: [tooltip][/tooltip]

Do you know what a CPU is?

[tooltip tip="Central Processing Unit"]CPU[/tooltip]

Just a tooltip on the top.

[tooltip tip="I'm on top!" position="top"]on the top.[/tooltip]

How about an always on, right, tooltip?

[tooltip tip="Cool!" position="right" light alwayson]always on, right, tooltip?[/tooltip]


Map shortcodes: [map][/map] , [googlemap][/googlemap]

[map lat="40.7828649" lon="-73.9653549" zoom="16" /]

[map lat="40.7828649" lon="-73.9653549" title="New York" text="Central Park" /]


Slider shortcode: [slider][/slider] , [slide][/slide]

[slider][slide]Content 1[/slide][slide]Content 2[/slide][slide]Content 3[/slide][/slider]


Tabs shortcodes: [tabs][/tabs] , [tab][/tab]

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]


Accordions shortcodes: [accordion][/accordion], [accordion_tab][/accordion_tab]

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.

Content 1
Content 2
[accordion][accordion_tab title="Tab 1"]Content 1[/accordion_tab][accordion_tab title="Tab 2"]Content 2[/accordion_tab][/accordion]


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!

55 comments

  1. curdaneta says:

    Hello
    As I posted on the forum, it looks like at this time the shortcodes doesn’t work on the widget area. It’s possible to fix this?
    Regards
    curdaneta

    1. Anastis Sourgoutsidis says:

      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');

  2. curdaneta says:

    Thanks, works like a charm!
    BTW this should be documented 😀
    cheerz
    curdaneta

  3. tntonix says:

    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?

  4. Noumaan says:

    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

  5. goodluck says:

    I use pinfinity theme on wp version 3.5.1.

    CSSIgniter Shortcodes plugin doesn’t work.

    Please tell me how to solve?

    1. Anastis Sourgoutsidis says:

      What seems to be the problem?

      1. bubmediainc says:

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

        1. Anastis Sourgoutsidis says:

          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?

  6. R. says:

    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!

    1. Anastis Sourgoutsidis says:

      It looks like you commented on the wrong page. This is a plugin page :)

  7. wesley etheridge says:

    Hi, shortcodes not working for me, im trying to use the colum shortcodes but the appear under eachother rather than side by side. >>>
    http://www.durbanpulsemedical.co.za/alec/

    Also, is there a shortcode for inserting latest news/posts into a page?

  8. Anastis Sourgoutsidis says:

    I can’t seem to find anything remotely related to columns in the link you provided. Perhaps you meant to paste a more specific url?

    Unfortunately, no, there isn’t such a shortcode available.
    Good news is that there is another plugin that does just that: http://wordpress.org/extend/plugins/display-posts-shortcode/

    Hope this helps.

  9. akufelix says:

    Hi is there any pricing table shortcode?

    1. Anastis Sourgoutsidis says:

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

  10. CJ says:

    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

  11. Cj says:

    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

    1. Anastis Sourgoutsidis says:

      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 :)

  12. Phil says:

    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.

    1. Anastis Sourgoutsidis says:

      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.

      1. Phil says:

        Thanks Anastis. The site is still under development and can only be viewed when logged in.

        i tried removing the space but to no avail.

  13. Tomas says:

    hello,

    I ‘ve installed this plugin, but the shortcode did not appear in the post edditing panel. Should it appear ?

    1. Anastis Sourgoutsidis says:

      No, there is no interface for the shortcodes currently. You need to enter the shortcodes manually.

  14. mike reger says:

    Is there a way to get the button shortcodes to use :

    target=”_blank” ?

    I see someone else also asked but I dont see a reply. Thanks.

    1. Anastis Sourgoutsidis says:

      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.

      1. Sven says:

        So you’d rather meddle with some jQuery and regex than to allow a simple target in an a-tag? Sounds like too much red tape to me. Keep it simple maybe?
        Ilove your themes but ‘m uninstalling the plugin because of this.

        1. Anastis Sourgoutsidis says:

          I’m sorry to hear that you are not satisfied with the plugin.
          The jQuery suggestion is a “right now” solution to this issue, as we have plans on re-writing it from scratch to support responsive websites.
          During the rewrite, the target attribute in specific will be reconsidered but I’ll also make sure to make it easy to extend the plugin, by making functions override-able and adding appropriate actions and filters, so if it doesn’t get included, users will still be able to use it with a few lines of code.

          Having said that, if time allows, I’ll try to update the plugins with a few filters so that it will be doable earlier.

          We just don’t want to add every possible option out there, as removing one at a later stage (if something is considered a bad practice in the future) will break some installations.

          Hope this explains things a bit.
          Thanks for giving a try on the plugin though :)

  15. julievic says:

    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?

    1. Anastis Sourgoutsidis says:

      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.

      1. limshengming says:

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

        1. Vassilis Mastorostergios says:

          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.

          1. limshengming says:

            Bootstrap… Music to my ears :)

  16. pkoutrou says:

    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) ???

    1. Anastis Sourgoutsidis says:

      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.

  17. abfriesen says:

    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

    1. Anastis Sourgoutsidis says:

      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?

  18. Helios says:

    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″

    1. Anastis Sourgoutsidis says:

      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.

  19. utopia says:

    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]

    1. Anastis Sourgoutsidis says:

      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.

  20. Susan says:

    I’m using Intrigue in Pink. It would be nice if your the buttons had all of the colors that you use in your themes. Also, it would be nice to have an attribute for size, like small, medium, and large, so that I could use it on the home page widget.

    1. Anastis Sourgoutsidis says:

      Hi there,
      thanks for the suggestions.

      You can always create a custom shortcodes theme by just duplicating the /themes/default/ folder under a different name, and editing it to your heart’s content!

      As far as the button sizes are concerned, we are looking into it, as we have plans to make the plugin play well with responsive websites.

  21. christa says:

    Hi,
    Is there a short code for accordion?

    1. Anastis Sourgoutsidis says:

      Unfortunately, there isn’t such a shortcode available.

  22. Great plugin but it would have filled out my requirements if you can add tabbed shortcode

  23. Brian Mays says:

    Thanks for these! I am using the third-column shortcodes, and I wonder if I might be missing an option. When going down to a mobile size page on responsive designs, the columns squish down to tiny widths, making some things a bit awkward to read. Is there a setting I can set that might allow the columns to stack rather than squish on smaller screens?

    Thanks again!

    1. Anastis Sourgoutsidis says:

      Unfortunately, the plugin isn’t responsive itself, so you get the results you get.
      Depending on your situation, you may be able to fix it by resetting some CSS rules in specific breakpoints.

      1. David Kneale says:

        I am having the same issue when viewing a page featuring the columns shortcode on a mobile device. Could you please elaborate on what CSS may help with this? I’m using a two-thirds and one-thirds columns set up.

        1. Anastis Sourgoutsidis says:

          Assuming you have a responsive theme, you need to locate the correct breakpoint from your existing CSS and insert this code where appropriate:

          .ci-column.one_third, .ci-column.two_thirds { width: 100%; } 

          I don’t really know the specifics of your installation, therefore I can’t really provide the exact css or directions.

  24. Sibusiso says:

    Hello There

    How does the separator work?
    [separator] or [separator type="normal"]

    please provide an example

    1. Anastis Sourgoutsidis says:

      Hi there,
      examples are provided in the article, just like the ones you pasted.
      You just probably need to type one of the shortcodes into a line on its own.

  25. Vladislavs Ovcarovs says:

    Hello,

    I have recently purchased Corner theme, and I have one problem. Is it possible 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?

    Thanks

    1. Anastis Sourgoutsidis says:

      Unfortunately this isn’t possible with the current version of the theme.
      There is however an upcoming update (a complete rewrite actually) which will allow you to do it.

      Just hang in there :)

      1. Vladislavs Ovcarovs says:

        Oh wow, sounds tempting 😀 I just hope the new update won’t mess my current setup, etc… Patiently waiting! Thanks

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=""> <s> <strike> <strong>