Do you want to arrange widgets horizontally? If so, this plugin may be the solution for you.
Add desired widgets to the custom sidebar the plugin creates and set up an auto-insert.
If you are a developer and looking for an easy way to render some outputs in responsive columns, this plugin will be handy. Pass your arrays to the plugin filter. Then the plugin will take care of it for you.
Steps
The plugin will let you display widgets horizontally with a grid system. This is the main feature of the plugin.
When the browser width changes, it automatically adjusts the layout. This is important for tablet and mobile visitors.
You can flexibly set the number of columns in each row.
Flexibly set the number of columns by browser width. In other words, you can control the number of columns for particular screen widths.
Auto-insert
Take advantage of the Auto-insert feature which automatically inserts the defined widget box to your desired location. You don’t have to use the shortcode.
PHP code and Shortcode
Use PHP code in the theme template or the shortcode in posts.
Sidebars defined by your theme also can be displayed in columns.
Achieve more advanced complex design by taking advantage of the options that the plugin provides.
Nesting Sidebars
This is widgets in widget functionality. With the widget that the plugin provides, the whole sidebar contents can be embedded as a widget item into another sidebar.
Column Span
Column spans are configurable so that you can set wider widget areas.
Custom Array
If you can code, you can pass an array to the plugin’s filter so that your array contents can be rendered in multiple columns instead of widgets.
See more.
Option A: add the shortcode in the post.
[responsive_column_widgets]
Option B: use the auto-insert feature by enabling the Enable Auto-insert option in the plugin setting page, New / Edit.
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.
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,
<?php if ( function_exists( 'ResponsiveColumnWidgets' ) ) ResponsiveColumnWidgets( array( 'columns' => 5 ) ); ?> will display the widgets in 5 columns.
There are other parameters besides columns.
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.
5 | 800: 4 | 600: 3 |480: 1
Format:
widget index - column span, widget index - column span, widget index - column span, ...
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.
1-3, 4-2, 7-4
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.
1-3, 4-2, 7-4 | 600: 1-2, 3-2, 7-3 | 480: 1-2
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.
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.
[responsive_column_widgets call_id="days" columns="7"]
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.
add_filter( 'RCW_filter_widget_output_array', 'RCW_CustomArrayOutput', 10, 2 ); function RCW_CustomArrayOutput( $aOutput, $aParams ) { if ( ! isset( $aParams['call_id'] ) ) { return $aOutput; } if ( 'days' === $aParams['call_id'] ) { return array( 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday' ); } return $aOutput; }
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, use the ResponsiveColumnWidgets_EnqueueStyle function. Tell the function that which parameters are going to be used.
add_filter( 'wp_loaded', 'RCW_CustomArrayAddStyle' ); function RCW_CustomArrayAddStyle() { if ( function_exists( 'ResponsiveColumnWidgets_EnqueueStyle' ) ) { ResponsiveColumnWidgets_EnqueueStyle( array( 'columns' => "7" ) ); } }
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.
$aYourArray = array( 'a', 'b', 'c', 'd' ); if ( function_exists( 'ResponsiveColumnWidets' ) ) { ResponsiveColumnWidets( array( 'columns' => 4 ), $aYourArray ); }
This will output a, b, c, d in four columns.
http://en.michaeluno.jp/responsive-column-widgets/tutorials/
Starting from $0 per month.
Rating
Reviewers
20 reviews
Tags
Developed By
Michael Uno
Quick & Easy
Common Ninja has a large selection of powerful Wordpress plugins that are easy to use, fully customizable, mobile-friendly and rich with features — so be sure to check them out!
Testimonial plugins for Wordpress
Galleries plugins for Wordpress
SEO plugins for Wordpress
Contact Form plugins for Wordpress
Forms plugins for Wordpress
Social Feeds plugins for Wordpress
Social Sharing plugins for Wordpress
Events Calendar plugins for Wordpress
Sliders plugins for Wordpress
Analytics plugins for Wordpress
Reviews plugins for Wordpress
Comments plugins for Wordpress
Portfolio plugins for Wordpress
Maps plugins for Wordpress
Security plugins for Wordpress
Translation plugins for Wordpress
Ads plugins for Wordpress
Video Player plugins for Wordpress
Music Player plugins for Wordpress
Backup plugins for Wordpress
Privacy plugins for Wordpress
Optimize plugins for Wordpress
Chat plugins for Wordpress
Countdown plugins for Wordpress
Email Marketing plugins for Wordpress
Tabs plugins for Wordpress
Membership plugins for Wordpress
popup plugins for Wordpress
SiteMap plugins for Wordpress
Payment plugins for Wordpress
Coming Soon plugins for Wordpress
Ecommerce plugins for Wordpress
Customer Support plugins for Wordpress
Inventory plugins for Wordpress
Video Player plugins for Wordpress
Testimonials plugins for Wordpress
Tabs plugins for Wordpress
Social Sharing plugins for Wordpress
Social Feeds plugins for Wordpress
Slider plugins for Wordpress
Reviews plugins for Wordpress
Portfolio plugins for Wordpress
Membership plugins for Wordpress
Forms plugins for Wordpress
Events Calendar plugins for Wordpress
Contact plugins for Wordpress
Comments plugins for Wordpress
Analytics plugins for Wordpress
Common Ninja Apps
Browse our extensive collection of compatible plugins, and easily embed them on any website, blog, online store, e-commerce platform, or site builder.
Create Impressive Vimeo Feeds & Improve User Experience
Explore New Dimensions with Interactive 360 Panoramic Tours
Add Audio Player to Enrich & Promote Your Website Content
Establish Urgency & Boost Conversions With a Countdown Bar
Bring Focus to Products & Increase Conversions With Product Blobs
Easily Gather and Organize Event RSVPs and Registrations
Display LinkedIn Posts in a Stylish and Engaging Slider
Boost Trust and Enhance Credibility to Elevate Sales
Engage Visitors with a Dynamic and Interactive Card Slider
Track scrolling with a customizable progress bar or indicator
Create Interactive, Customizable Maps for Engaging Data Visualization
Free Online Quiz Maker: Create Engaging Quizzes in Minutes
More plugins
The Common Ninja Search Engine platform helps website builders find the best site widgets, apps, plugins, tools, add-ons, and extensions! Compatible with all major website building platforms - big or small - and updated regularly, our Search Engine tool provides you with the business tools your site needs!