Responsive Column Widgets


When you want to display widgets horizontally, I know it’s such a headache to edit the theme and repeat the numerous times of trial and error. If you feel the same way, this would save the time for you.

How It Works




WordPress 3.2 or higher. PHP 5.2.4.

How To Use

Basic Three Steps

  1. Go to Appearance > Widgets. You’ll see a new custom sidebar box named Responsive Custom Widgets.,
  2. Add widgets to it.,
  3. To display the added widgets in a post, there are mainly two means.
    • Option A: add the shortcode in a post.
    • Option B: use the auto-insert feature by enabling the Enable Auto-insert option in the plugin setting page, New / Edit.

Specify Different Number of Columns in Each Row

By default, the widgets are displayed in 3 columns. It can be changed by setting the columns parameter.
[responsive_column_widgets columns="4"]
will display the widgets in 4 columns.

Optionally, if you like to change the number of columns in each row, use sequential numbers separated by commas.

For instance,
[responsive_column_widgets columns="3,2,5"]
will show the widgets in 3 columns in the first row, 2 columns in the second, and 5 to the third. Change the numbers accordingly for your needs.

To set the number of columns for each screen max-width, use the pipe (|) character as the delimiter and place the width in pixel followed by a colon (:). Omit the width for no limitation. For instance,
[responsive_column_widgets columns="5 | 800: 4 | 600 : 2 | 480: 1"]
will show the widgets in 5 columns when the browser widths is greater than 800, and 4 when the browser width is 800 to 601, and 2 when the browser width is 600 to 481, and 1 when the browser width is less than or equal to 480.

Use PHP code for Themes

The widget box can be displayed outside post/pages. Putting a PHP code into the theme is one way of doing it. Use the ResponsiveColumnWidgets() function.

For instance,

will display the widgets in 5 columns.


There are other parameters besides columns.

  • columns – the number of columns to show. Default: 3.If you want to specify the number of columns in each row, put the numbers separated by commas. For instance, 3, 2, 4 would display 3 columns in the first row and 2 columns in the second row and four columns in the third row and so on. The rest rows follow the last set number.

    To set the number of columns by screen max-width, use the colon(:) character after the width, and use the pipe (|) character to delimit each set of number of columns. If the pixel is omitted, it is considered no limit. If the pipe delimiter is not present, the plugin will add 600: 1 internally by default.

    Format: column value | pixel: column value | pixel: column value

    The following example displays widgets in 5 column when the browser width is greater than 800, and four when the width is 601 to 800, and three when the width is 481 to 600, and one when the width is 1 to 480.

    e.g. 5 | 800: 4 | 600: 3 |480: 1

  • sidebar – the ID of the sidebar to show. Default: responsive_column_widgets. For the twenty-twelve theme, sidebar-1, would show the default first sidebar contents.
  • maxwidgets – the allowed number of widgets to display. Set 0 for no limitation. Default: 0.
  • maxrows – the allowed number of rows to display. Set 0 for no limitation. Default: 0.
  • omit – the numbers of the widget order of the items to omit, separated by commas. e.g. 3, 5 would skip the third and fifth registered widgets.
  • showonly – the numbers of the widget order of the items to show, separated by commas. e.g. 2, 7 would only show the second and seventh registered widgets. Other items will be skipped.
  • label – the label name of the widget box. Default: Responsive Column Widgets.
  • colspans – the column spans. This determines how wide the specified widget item is.

    The following parameter value of colspans will set the first widget with 3 column space and the fourth widget with two column space and the seventh takes four column space. Unspecified widget items will have one column span.

    To set them by screen max-width, like the columns parameter, use the colon(:) character after the width in pixel, and use the pipe (|) character to delimit each set of column spans. If the pixel is omitted, it is considered no limit. These widths need to correspond to the value passed to the columns parameter. e.g.

    If the column span exceeds the set number of max column, the column span will follow the max column. Note that the widget index of omitted widgets will not be considered(counted) in the widget index of this parameter.

  • cache_duration – the cache lifespan in seconds which determines how long the cache remains. Default: 0. e.g. 3600
  • call_id – this is for developers. This is used to identify the callback when a plugin hook is used so that the callback method assigned to the hook can know if it is theirs or not. This parameter does not affect the style based on the parameter values.

Render Custom Array in Multiple Columns

If you are a developer, you can render array contents that hold string values in multiple columns with responsive design.

Let’s take a look at an example. First, insert this shortcode in a post or a page.

The value for the call_id parameter can be any string that identifies the call.

Now we need to hook into the RCW_filter_widget_output_array filter so that we can intervene the process of plugin’s rendering widgets. It accepts two parameters. The first one will be the output array and the second one is the parameter array.

In the callback function for the filter, we check if the parameter call_id holds the correct value. You should change the value to suite your needs, which should be unique and not conflict with others.

This will display the days in 7 columns. The plugin will generate the CSS rules based on the parameter values. And the rules will be inserted inside the body tag.

If you like to insert the style in the head tag not the body tag, use the ResponsiveColumnWidgets_EnqueueStyle function. Tell the function which parameters are going to be used.

Note that 'call_id' => 'days' can be omitted. The other parameters should not be omitted.

For cases that the shortcode is not used, you can use the ResponsiveColumnWidets() function.

This will output a, b, c, d in four columns.

Video Tutorials

Sponsored Links


Responsive Column Widgets
(6.6 KiB)


If you find a bug in the program, please report it from the bug report page. For a feature request or a question on how to operate the program, please comment below.

Is it possible to create multiple widget boxes?

Finally, Responsive Column Widgets Pro is out!


If you find the plugin useful, please rate it at so that others can know it.

Do you have a portfolio web site using this plugin?  Let us know if your site can be linked from the plugin description pages ( this page or ) so that people can know how it is used in a live site.

135 thoughts on “Responsive Column Widgets

  1. Amanda

    I have sent a bug report with no response. I have installed the Responsive Column Widgets and it does exactly what I want from a functionality standpoint. BUT it is interfering with the compatibility of other widgets, i.e. – custom menu’s are not displaying any more.
    The plugin does work but I can’t not use it because it effects the basic functionality of a WordPress site by disabling out of the box functions in the widget area and other plugins.
    Is there a way for you to determine why it is interfering with wordpress and plugins?

    1. Michael Uno Post author


      Sounds like a plugin/theme conflict.

      Do you have a test site? If you don’t, I suggest you create one. And try a clean install with the default theme and no other plugin other than Responsive Column Widgets to see if the problem still persists.

      If you don’t see the problem, install and switch to the theme used on your production site and check if the problem appears. If not, add the plugins used on the production site one by one so that you can determine which one causes the conflict.

      If you find which one is the cause, let me know.

  2. Katherine

    Hi there,

    I installed the widget, but I only want a horizontal area on a collection of pages.

    See the secondary nav on the page. Each page that is linked here required the nav code to copied and pasted repeatedly. If there was an update to one, then all pages in the series would have to then be edit individually.

    I’d like to use your plugin to resolve the problem by placing a horizontal widget/column above or below the content, but only for certain pages. And I made another widget for the same function on a completely different set of pages (another event for example).

    When I installed and test the plugin the menu which I copied from the page in my example should up correctly, but at the bottom and on every page on the site.

    How do I edit it to work with my needs. Thanks!

    Is this in the PRO feature?

    1. Michael Uno Post author


      You may examine whether the Auto-insert feature can fill your needs. To disable the auto insert on certain pages, there is an option named “Post / Page ID to Disable Auto-Insert”. You may try setting the post ids of which you do not want the widget box in that field.

      Hope it helps!

  3. Daniele

    I use the free version of responsive column widgets and I was thinking to go to the Pro version,
    but unfortunately it does not work the “set number of columns by screen max-width” function, is not responsive,
    the number of columns remains the same even with smaller screens such as smartphones.

    1. Daniele

      Hi, the option to change the number of columns based on the size of the screen, “eg 5 | 800: 4 | 600: 3 | 480: 1″. This option does not work with a smaller screen as the number of columns remains the same.

    2. Michael Uno Post author

      For testing, try it with a clean installed WordPress site (no plugin except Responsive Column Widgets with the default theme) and see if the same problem occurs. If the problem gets gone with a clean install site, switch the them to your current one to see if the problem occurs. If it does not, activate the plugins one by one and find the one causing the conflict.

      Let me know how it goes.

    3. Michael Uno Post author

      And tried with the default theme Twenty Fifteen 1.1 (without no plugin except Responsive Column Widgets)?

    4. Daniele

      I found the problem: it conflicts with wordpress seo plugin by Yoast, but this plugin is very important for me, how can I do?

    5. Daniele

      *also when the seo plugin is activated, the widget responsive column show the gray borders, even if in the settings is set “no borders”

    6. Michael Uno Post author

      Let me know if the same problem occurs with the WordPress default theme Twenty Fifteen with the SEO plugin.

    7. Michael Uno Post author

      Do you have a test site? I suppose you have been doing this trouble shooting on a test site. If not, create one and install only the SEO plugin and Responsive Column Widgets.

      Then the SEO plugin has a setting that reset the plugin options to default. Try that and see if the problem still persists on a test site.

    8. Michael Uno Post author

      Can you tell me the exact plugin name and the version of the SEO plugin?

      Meanwhile, make sure
      – you are not using a caching plugin
      – no CDN enabled on the site
      – using the Twenty Fifteen theme

    9. Michael Uno Post author

      I cannot confirm the problem.

      How do you display the widget box, with the shortcode or auto-insert?

      Also, post the list indicated in the Numbers of Columns option. Go to Dashboard -> Appearance -> Responsive Column Widget -> New /Edit -> Widget Box Parameter Values -> Numbers of Column. At the very right hand side, you’ll find the list (html table with no border) with the Screen Max Width (pixel) column and Number of Columns column. It lists the widths associated with the set screen size.

    10. Daniele

      We’ve tried various settings:
      – 801 1, 3
      800-601 1, 3
      600-481 1, 3
      480-1 1


      – 801 5
      800-601 4
      600-481 3
      480-1 1

      and other ..

      The settings always work but only if the SEO plugin is disabled.

    11. Michael Uno Post author

      You can send me your test web site url via an email so that I can check if the necessary style tags are properly embedded in the head tag. The address is wpplugins at

      Meanwhile, try restoring the default settings of the SEO plugin on the test site.

  4. Hugo

    Hello Michael Uno:
    I am trying to use the Responsive Column Widgets in the
    This is just a draft of what I am trying to create. At the bottom / footer of the page, I have used the Responsive Column Widget… 3 column and two rows. Total of text areas is 5 for this sample. More will be added in the final draft.
    I have a problem in IE8. You could see that on the second row, an extra left margin is added in IE8. It seems that the text areas (blocks / widgets) are not floating. It adds the margin between text areas (widgets) to the second row (see left margin of the text area (widget) # 4. It seems that it does not create rows. It continues keeping / adding the margin between the Widget / Text area 3 and 4.
    Could you help?
    Thank you.

    1. Hugo

      Hi Michael:
      It seems that I needed to have the latest version of the Responsive Columns Widgets. The Hostmonster / WordPress has version 1.1.12 and you provided version 1.2. It is working fine now in IE8: – The extra left margin of the rows has been eliminated.
      I needed to create a new draft because I downloaded the Footer Putter Plugin in the previous draft to replace the default footer of the theme. It could be that this plugin messed up the Responsive Theme I was using. So, in case you might have a good option: Could you suggest the name of good plugins that could help me with:
      1.- The Footer – Substitute the default footer hook of the template.
      2.- The Navigation Menu – Substitute the top menu with another option or options.
      3.- Text Editor – A good flexible WYSWYG Editor for all the areas. I am using Black Studio TinyMCE Widget – Visual Editor. Do you have a better suggestion?

      I will send this comment through your website.

      Thank you for all your help!

  5. Stan


    Thanks for the responsive column widget. A powerful widget.
    I have a problem , I can’t insert it above the footer, even with the square checked.
    Can you tell which code I can insert in the manuel square.

    Thanks a lot

    1. Michael Uno Post author

      If your theme does not have a hook in the footer, the plugin auto-insert functionality won’t work. Which theme is it? If it is a free one, I can check. If not, buy the Pro version so that you can get email support. Then I’d be happy to examine the code of your theme.

    2. Michael Uno Post author

      Okay. I checked that theme. Try this.

      1. Go to Dashboard -> Appearance -> New/Edit -> Auto-insert -> Enable Auto-insert and set it On.
      2. Uncheck all the items in the Areas option.
      3. Find the Actions option and enter cryout_footer_hook and save the options.

      The cryout_footer_hook action hook is defined by your theme so you can just use that without modifying you theme files.

      Let me know if it works for you. Hope it helps.

    3. Michael Uno Post author

      Glad it helped!

      It would be appreciated if you could take a few minutes to write a comment about the plugin at the review section on

      Happy Christmas to you too!

  6. Jackie

    I have one row with 5 columns. I would like to up a box around each of the columns displayed. Much like Home Widget 1, 2 and 3 in the Responsive Theme. Is this possible?

    1. Michael Uno Post author

      Maybe try setting this in the CSS Rule option at the bottom of the New / Edit page.

  7. Jackie


    I am extremely new to this entire process but found this plugin. I am having a bit of trouble trying to get it to display in the area I want it to and to look the way I want it to. Maybe I need to buy the pro version, and would be happy to do so if I knew for sure it would correct my challenges.

    Sadly, I have purchased a few plugins that didn’t work and then when I ask for support they always say they don’t cover what I am asking about.

    I want the 5 columns to display right after my header loads and would like to show up like small boxes.

    Can you tell me if this is possible?

    1. Michael Uno Post author

      To insert widget boxes in a particular area of your site, you can use the auto=insert or the plugin’s PHP function.

      Are you comfortable with editing a theme file?

    2. Jackie

      Not really. I am currently using the Auto-Insert with the actions set as get_header and the below but it comes out before the header.

    3. Michael Uno Post author

      I see. You would need to find a proper hook for it. Or you can insert your custom hook into your theme file. But it requires you to edit your theme file.

      If you are okay with editing your theme, let me know. I can assist you.

    4. Michael Uno Post author


      1. Find a theme file that defines the head part of your theme. The WordPress default theme names it header.php. You may have a similar file in your theme folder.
      2. Open it and find a line that starts the tag. In the Twenty Thirteen theme, the line looks like

      3. Now insert this line below it.

      So in the Twenty THirteen theme, it will look like this.

      4. Go to Dashboard -> Appearance -> Responsive Column Widgets -> New / Edit. And find the Auto-insert section. Set the Enable Auto-insert option to On. And find the option named Actions. There type my_custom_action and save changes.

      Let me know if it works for you.

    5. Jackie

      I am using the theme called responsive and found the header.php file but don’t see a line that just has > so am not sure where to put the additional line of code?

    6. Michael Uno Post author

      I just checked the Responsive theme and the header.php file and it has the line like this.

      Try inserting your action below it (instructed in the step 3 in the previous reply).

    7. Michael Uno Post author

      Try inserting this to make sure the changes are reflected.

    8. Jackie

      First, THANK you so much for your patience!!! The test line shows up above my logo but when I try to customize my widgets the responsive widgets don’t display anymore.

    9. Michael Uno Post author

      Double check if you are enabling the Auto-insert option in the Edit/New page and the action name my_custom_action is set in the Actions option.

    10. Michael Uno Post author


      1. Upload the modified code of header.php on Gist (or somewhere else).
      2. Upload the screenshot of the New/Edit plugin setting page on Postimage (or somewhere else). Make sure I’ll be able to see the Auto-insert section.
      3. Upload the screenshot of the Widgets (Dashboard -> Appearance -> Widgets) page on Postimage (or somewhere else). Make sure I’ll be able to see what widgets are added to the widget box container.

      And post the urls of them.

    11. Jackie

      You are beyond my understanding of posting this to these websites. Is there an easier way for me to send the information…like via an email?

    12. Michael Uno Post author

      I do provide email support for paid customers. So you may consider purchasing the Pro version. Or you just try using those web sites.

    13. Jackie

      Sorry, it is showing up again but still above the logo and the menu bar. I would like it to show after those items. Any more advice?

    14. Michael Uno Post author

      Try changing the position of the line that calls your custom action.

      In the header.php file of your Responsive theme, find the line like this

      And insert it after that line.

    15. Michael Uno Post author

      Glad to hear it’s working.

      I don’t understand what you mean by “in the shape of a box.” You need to explain it more. Sounds like you want to talk about a new different topic. If so can you start a new comment (by not replying to an existing comment)?

  8. Makenzi

    Hello! This plugin is working beautifully on my computer, but on my mobile site only 3 widgets are displaying. How can I get all 6 widgets to display on my mobile site, instead of just the first 3 showing? Here’s my site: Thanks for any help I can get!

    1. Michael Uno Post author

      The following 6 widgets could be confirmed from a mobile device.

      – LEADS
      – WEBSITE

  9. Sophia


    Great plugin :) I’ve been looking in the support forums and comments for how to put the widgets in the footer, but above the theme footer (copyright, back to top button etc).

    Any help would be great!


    1. Michael Uno Post author


      Go to Dashboard -> Appearance -> Responsive Column Widgets -> Manage -> Operation (column) -> Edit (icon).

      Enable the Enable Auto-Insert option in the Auto-Insert section.

      Check the Footer checkbox in the Areas option.

      That’s it!

      Hope it helps.

    2. Sophia

      Thanks for your response! Another question — when viewing on an iPad the footer box doesn’t adjust to fit the screen. It does when viewing landscape, but profile it cuts short on the right.
      Any help appreciated!

      Thanks, Sophia

    3. Michael Uno Post author

      Hi Sophia,

      Glad that your sorted out the problems you had previously.

      As for the issue that the copyright appears above the widgets in your theme, the inserted position of the widgets depends on how the theme is designed. So most likely you need to edit the theme.

      Are you comfortable with editing theme template files?

    4. Sophia


      Thanks for your quick response :)

      I will look at the theme files and see what I can do from there. Due to secure server I can’t FTP into my files so am trying to do as much as possible without having to create a child theme.

      Thanks again for your help!


  10. Kurt Flint


    Your responsive columns widgets pro product did a great job for us, and we are really happy with it with the exception of one nagging little thing. I was trying to figure out why the site was so darned slow, and started reading through my New Relic reports. It seems that communicating with your website is the slowest thing this website does, out of everything it does. Finally something worse than Jetpack!

    The question is “why is it calling Jp, and how the heck do I make it stop. Shipping this way is clearly not an option.


    1. Michael Uno Post author

      Hi Kurt,

      Sorry for the delay in responding.

      started reading through my New Relic reports.

      I’m not sure what you mean.

      It seems that communicating with your website is the slowest thing this website does, out of everything it does.

      The question is “why is it calling Jp, and how the heck do I make it stop. Shipping this way is clearly not an option.

      What do you mean by “calling Jp”? The Pro version has the update check that runs in the background and accesses the server to see if there is a new version available. Maybe it is what are you talking about?

    1. Michael Uno Post author

      Some p tags are causing bottom margins as I read your web site HTML code. One is at the bottom of your each widget. Another is at the end of the widget box and it is enclosing the plugins’s HTML comment embedded at the end of the widget box.

      How did you display the widget box, with shorcode, PHP function, or auto-insert?

    2. Dave Herries

      I inserted it with shortcode: [responsive_column_widgets columns="5 | 800: 4 | 600 : 2 | 480: 2"]

      This is one of the image HTML that I used to create the widget in Responsive Column Widgets:

    3. Michael Uno Post author

      Check the image widget you are using if it contains an unnecessary p tag at the bottom. Remove any extra lines inserted in the widget. I’m roughly guessing that you are using a plugin or theme that applies a filter to convert line breaks to p tags. I suggest you narrow down the cause of the p tag conversion, that includes switching themes and deactivating some plugins to see the results.

      Meanwhile, you may just try auto-insert. Set Enable Auto-insert On and check Home / Front Page in Limit Auto-Insert to Checked Page Types to only enable it on the home page.

    4. Dave Herries

      The images are all coming from the Media Gallery of the wordpress site with no P-Tags that I can see. The default settings are as you suggested. Nothing has changed. Changing the Theme is out of the question. Any other ideas? I really appreciate your help.

    5. Michael Uno Post author

      Make sure you have the settings as follows.

      Enable Auto-insert: On
      Area(hook) : Post/Page Contents
      Limit Auto-Insert to Checked Page Types: Home / Front Page
      Limit Auto-Insert to Checked Post Types: Post, Page ( check these )

      If the auto insert is working, you don’t need the shortcode.

    1. Michael Uno Post author


      It looks like the issue described here. According to them IE 9 or bellow cannot support more than 32 stylesheets in a page. The first loaded 31 or 32 items take effect and the rest will be ignored. As your site has many stylesheets and since the plugin’s styles are loaded at the end of the head tag, the plugin’s ones are ignored. As I tested with your web page, it applies not only to < link > tags with the stylesheet property but also < style > tags.

      The suggested solution from the linked topic is:

      there is a limit of 31 CSS files in a given page. If you need more, use multiple pages to import them. For example, if you need 60 CSS files, create one file to import the first 30 and a second file to import the next 30.

      So I think you should consult the theme developer if he/she can handle that.

      I’ll keep this issue in mind and see if I can reduce the number of style tags that the plugin generates.

      Hope it helps!

  11. Josh Klauder

    Hi, great plugin, exactly what I was trying to accomplish using TWO other plugins, and a lot of hassle…BUT…I’m so close to getting it to work, but not quite!
    I have three widgets loaded, and using shortcode to display on a page. I have left all column settings at default, and expected the three widgets to split the available width in thirds. Instead, they are very narrow, and all to one side. I have set a grey background color and can see that the box is full width. I have uploaded a screenshot here:

    Can you tell what is going on?

    Thank you!

    1. Michael Uno Post author

      Can I see the live site?

      Looks like the plugin is not working well with your theme. If it is a free theme, you can tell which one and I can test it on my environment.

  12. Don

    I watched the video tutorial about how to exclude certain pages from the auto insert of the widget boxes, but the numbers for the page/post id are not saved when I click the save changes button… What am I doing incorrectly?

  13. Jessica Miriga


    Great Plugin! Will you be updating plugin any time soon so that it is compatible with WordPress 3.6?

    1. Michael Uno Post author

      Hi Jessica,

      It should be already compatible with WordPress 3.6.

      Are you encountering a problem? If so, you can post the issue here.

  14. Sam R

    First of all, this plugin is a brilliant solution to an annoying problem! I’m having one issue though – at low resolutions I have the columns appear on two rows, and the vertical gap created between the two rows is far too large. I haven’t set up any padding in the settings so it should all be zero – how would I go about fixing this please?

    Thank you!

    1. Michael Uno Post author

      I guess,

      You may try putting the above rule in the CSS Rule option textarea field. You mentioned, at low resolutions, so if it should only apply to, for instance, the 600px screen width or lower, change it to,

      ( Change the 600px part accordingly for your needs )

  15. Wanton


    In my responsive pro theme I did’nt have a nice footer so I decided to use column widgets to get it done.
    The footer is ok i just need to center it.
    Setting the .widget margin to something is not an elegant enough solution (when You resize the browser window the footer get’s ugly)
    I tried setting margin to auto in several spots but nogo …
    Can You help ?


    1. Michael Uno Post author


      I think that to center the widget box with desired margins is a common problem the users encounter. I remember that I also needed to do something similar. So I added the settings for it.

      Grab and try the development version:

      Assuming the linked web site in your name is the one you are working, I see you added the background color and the margin-left. Remove those and try the options in the New/Edit page, that are added to the new version.

      Let me know if it works for you.

  16. Adrian

    Can you tell me how to set spaces between the widgets in the rows. At the moment they are running together. I noticed there is an option for additional padding above or below but not side by side? Thanks

    1. Michael Uno Post author


      Are you okay with using margins? If you need to insert white-space characters like &nbsp; between the widgets, it won’t be easy.

      I’m not sure if this is what you are looking for but here is an example. You can put this in the Custom Style section of the New / Edit setting page.

    2. Adrian

      Hi Thanks for the suggestion. In fact I realized the problem was because the settings were at default for 3 columns and there was only really space for 2. When I altered the setting from 3 to 2 it automatically spaced the items out correctly.


  17. Claudio Gonçalves Octa'Linea

    Hello Michael, taking the opportunity to congratulate you for the beautiful work of the plugin
      Responsive Column Widgets 1.1.4. I use wordpress 3.51, and loved the plugIn .. but need to know .. why the toolbar does not appear on my theme .. broke the plugin, or am I broken? and breaking the plugin ..! have any instruction else? / strong hug and wish you lots of light ..
    sorry my english, I’m a fugitive from school here in Brazil .. Sincerely ..

    Claudio Gonçalves Octa’Linea

    1. Michael Uno Post author

      Hi Claudio,

      Thanks for the nice words and the hug!

      The Admin bar (toolbar) should not be disabled with the plugin. Can you test if it occurs only when the plugin is activated?

  18. Mikael Karlsson

    The facebook like box is a widget which I would like to have on top of the column below the like box.
    Thus I would be in heaven if I could manage which column a widget belong to and control position.

    It would be nice if I also could use the parameters for the php function in the shortcode.

    It´s fantastic plugin, btw.

    1. Michael Uno Post author

      Hi, thanks for the complement.

      I’m having hard time understanding what you mean. Can you elaborate?

      For the first request, the widgets are placed in columns in the order of what the widgets are added to the plugin’s custom sidebar box. So basically you are specifying the positions of the widgets when you add them in the sidebar box.

      For the second request, you can pass the parameters to the PHP function, ResponsiveColumnWidgets(), like you do with the shortcode. It accepts the parameters as array. That’s the only thing that differs from the shortcode.

    1. Michael Uno Post author

      You would need to set a custom CSS style for it.

      If the number of columns is three, then you may try setting the following rules in the Custom Styles option. The sum of the total width percentages should not exceed 96.6%.

    2. phillip

      Thank you it helped alot. but now i have a new question. how would i get multiple wedgets in one area and not the other.


      1 widget | 3 widgets | 1 widget

      thanks for your fast response.

    3. Michael Uno Post author

      That’s something I’ve never thought about. It’s going to be a little bit tricky.

      I assume you are a Pro user and can create multiple widget boxes.

      You may try this. You create two widget boxes: one is like, 1 widget | 1 widget | 1 widget; the other one also consists of three widgets (as you desire) 1 widget | 1 widget | 1 widget.

      1. Get and install the Shortcode Exec PHP plugin. and enable the option, Execute shortcodes in (sidebar) widgets in the installed plugin’s setting page.
      2. Create a new widget box A with three widgets with three columns.
      3. Create a new widget box B with three widgets with three columns. ( I say three because you showed 3 widgets in your example )
      4. Create a text widget and insert the shortcode of the widget box B.
      5. Add the text widget to be the widget box A’s second widget.

      I suppose this would do what you are looking for but I have not tested it.

    4. Michael Uno Post author

      With v1.1.3, this can be achieved without a third party plugin. You can use the newly added plugin’s widget.

    1. Michael Uno Post author


      I’m having hard time understanding what you are trying to achieve.

      To indent an HTML element, usually margin-left or padding-left in the CSS rule will be used but you sound that you are not looking for a way with CSS, I guess.

      To use the plugin responsive widgets, we have mainly two ways. One is to use PHP code in the theme. The other is to use the shortcode in a page/post. Which one do you prefer?

    2. Jacqueline

      Hi, Thanks for responding – I thought that it might be achieved through margin or padding, but it seems like that only was putting space between the middle of the columns, as opposed to adding distance between the outer columns and the edge of the screen. Maybe I was typing it in the wrong place… CSS is fine, and that’s great if it would work by typing in a padding number.. would I place it in “styles” or the “index” or maybe you know of an easier way.

      I’m a total noob and this is my first website so thanks for being patient.

    3. Michael Uno Post author

      Hi, I’m really having hard time understanding what you are trying to achieve. Can you upload a screenshot that shows how the site layout should look like along with the current layout which you think it’s not working?

    4. Jacqueline


      that preview is my theme. I’m trying to recreate the area below their full horizontal ad where they have the headings “Recent News” “Our Trainers” “Our classes”

      As you can see, the three columns for their headings are bumped in from the left and right sides of the page.

      On my website , the columns “Upcoming events” “Our Instructors” and “our classes” run the whole way to the left and right edge..

    5. Jacqueline

      Okay – better description. I can modify the margin, and that works, but it is applying the margin to the left and right side of each column. Can I apply a margin to only the outer two columns? The leftmost column would get a margin on the left side, and the rightmost column would have a margin on it’s right side.

    6. Michael Uno Post author

      Try putting the following rule in the style option in the setting page.

      If that doesn’t work, try adding it in your style.css of your theme.

    7. Jacqueline

      that worked PERFECTLY! Do you know how I could make the tan color continue all the way down behind the widget, rather than it’s background being white? If I enter a background color, it colors the widget, but not the outer margins.

      You’re so helpful!

    1. Michael Uno Post author


      Please describe your problem in detail. Was it working before and now it doesn’t with the new version?

      Also make sure you added widgets to the custom sidebar that the plugin creates via Appearance -> Widgets. Then place a shortcode like

  19. chris w

    I am using the theme atahualpa which is wonderful. It lets me design my sidebar widgets to a certain way that I want to and automatically designs my widgets when i choose which ones to use.. However, when i use this plugin and add the widget columns to my home page, they are showing very plainly. Is there any way that I can have them look the same way I have my sidebar widgets look?

    1. Michael Uno Post author

      There is a way but it has to be done manually by adding the rules to your theme’s style.css.

  20. Valerie Adler

    Hi there,

    Terrific plugin – thanks so much. One question, though. Is there a way to increase the space between columns? They seem too close together for me!



    1. Michael Uno Post author


      Adding the following CSS rule in your theme’s style.css will do the job. Change the values set to the margins for your needs.

      Hope it helps!

  21. Mihir

    Hi, I am using responsive column for my main page @
    For some reason, the first text widget (in the first column i mean) is tiny compared to the others. I need help to sort this out ASAP!
    The site is being rolled out in 3 days time. I need a solution quickly. I hope you guys can help.

    1. Michael Uno Post author

      Hi, can you upload a screenshot and mark the part having the problem? I could not get which part of the page you are talking about.

  22. Tony

    Im trying to create two different sets of columns on two different pages using the OMIT and SHOWONLY parameters (i.e. OMIT 1,2,3 on one page and SHOWONLY 1,2,3 on the other. It doesn’t seem to be working – care to give me a hand with the shortcode?

    1. Tony

      Actually I have it all set now – using these two shortcodes:

      [responsive_column_widgets columns="3" showonly="1,2,3"]
      [responsive_column_widgets columns="1,4,1,3" omit="1,2,3"]

      Hope that can help someone!

  23. Emil

    Hi Michael – great plugin…we appreciate it. How do you create multiple Responsive Custom Widgets boxes to control DIFFERENT content column content on DIFFERENT pages? – instead of just being able to add the SAME column content to MULTIPLE pages.

    Thanks ~ Emil

    1. Michael Uno Post author

      Creating multiple widget boxes is currently not supported but it may be implemented in a future release.

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 class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">