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.

The plugin offers twelve different shortcodes for you to create with. Anything from tabs, accordions, headings, sliders, maps, lists, grids, buttons, boxes and more can be created styled and added in a page or post in no time.

We have recently released an update to the plugin which brings an entirely new vanilla JS slider and minor fixes to make sure the plugin continues to work smoothly.

Check out the plugin and grab your copy in the link below.

Happy ShortCoding!

Related Articles


  1. curdaneta says:

    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?

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

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

    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:


    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.

    Elected Director

    some text here

    This does not.

    Elected Director

    some text here some text here some text here some text here some text here some text here some text here some text here

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


    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:


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


    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.


    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:

    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:
          [css].ci-column.one_third, .ci-column.two_thirds { width: 100%; } [/css]

          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:


    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?


    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 :D I just hope the new update won’t mess my current setup, etc… Patiently waiting! Thanks

  26. Tomas says:

    Hi all!

    Can anyone tell me how I can change the color of tabs [tabs][/tabs]? Thanks!

    1. Tomas says:

      sry I already found out how it works :)

    2. Anastis Sourgoutsidis says:

      Glad you figured it out :)

  27. Frode says:

    Is it a way to use the shortcodes in the sidebar widgets?

    1. Frode says:

      Problem solved, just pasted:
      add_filter(‘widget_text’, ‘do_shortcode’);
      into the fuctions.php :-)

  28. Ogobogo says:

    Hello, is ti possible to set an icon instead of text for a [tab] title ? The same way as it works for [button] ?

    Thank you in advance!

    1. Anastis Sourgoutsidis says:

      It’s not possible at the moment.
      We will consider it as a future update though.

  29. Vu Pham says:

    Is there way to add feature for Gradient Color on text or any of Quote content ?


    1. Anastis Sourgoutsidis says:

      Gradients are not supported.

  30. Dex says:

    Hi there, congrats on great themes and utilities.

    First time ever I find problems with this. I’ve built a new site, I installed the plugin, then just copy/paste any shortcode in a text widget (that used to work) and it wont work.

    Am I missing any step? I mean, I don’t think so.

    1. Anastis Sourgoutsidis says:

      Hi there,
      text widgets don’t support shortcodes by default.

      Either you’ve used a plugin that enabled you to do that, or the theme you used enabled it itself.
      You can simply add this line in your functions.php file and they will work:

      Hope this helps.

Leave a Reply

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