How to Add Responsive Columns in WordPress via Shortcodes

(Last Updated On: March 12, 2015)

Adding columns to individual post or page in WordPress maybe needed while blogging with WordPress. So, I realize that this would be better if I write an article about adding responsive columns in WordPress. I’d published an article for Genesis Framework users before about How to Insert Columns in WordPress Blog Posts/Pages with Genesis Easy Columns? But, in today’s article let me just show you about adding responsive columns in WordPress via shortcodes.

Adding Responsive Columns in WordPress via Shortcodes

WEN’s Responsive Column Layout Shortcodes is WordPress plugin which easily adds responsive columns layout inside of your WordPress blog posts and pages just by wrapping content with a shortcode. To use and add responsive columns in your blog posts/pages you can simply use the plugin’s button in the editor to add columns.

WEN's Responsive Column Layout Shortcodes Screenshot
WEN’s Responsive Column Layout Shortcodes Screenshot

Or you can also add the following shortcodes in the post/page editor to display the columns according to your needs. The columns are responsive and will occupy the whole width of your screen.

  • 2 column layout: – [bscolumns class=”one_half”]Your Content Goes here[/bscolumns] [bscolumns class=”one_half_last”]Your Content Goes here[/bscolumns]
  • 3 column layout: – [bscolumns class=”one_third”]Your Content Goes here[/bscolumns] [bscolumns class=”one_third”]Your Content Goes here[/bscolumns] [bscolumns class=”one_third_last”]Your Content Goes here[/bscolumns]
  • 4 column layout: – [bscolumns class=”one_fourth”]Your Content Goes here[/bscolumns] [bscolumns class=”one_fourth”]Your Content Goes here[/bscolumns] [bscolumns class=”one_fourth”]Your Content Goes here[/bscolumns] [bscolumns class=”one_fourth_last”]Your Content Goes here[/bscolumns]
  • 5 column layout: – [bscolumns class=”one_fifth”]Your Content Goes here[/bscolumns] [bscolumns class=”one_fifth”]Your Content Goes here[/bscolumns] [bscolumns class=”one_fifth”]Your Content Goes here[/bscolumns] [bscolumns class=”one_fifth”]Your Content Goes here[/bscolumns] [bscolumns class=”one_fifth_last”]Your Content Goes here[/bscolumns]
  • 6 column layout: – [bscolumns class=”one_sixth”]Your Content Goes here[/bscolumns] [bscolumns class=”one_sixth”]Your Content Goes here[/bscolumns] [bscolumns class=”one_sixth”]Your Content Goes here[/bscolumns] [bscolumns class=”one_sixth”]Your Content Goes here[/bscolumns] [bscolumns class=”one_sixth”]Your Content Goes here[/bscolumns] [bscolumns class=”one_sixth_last”]Your Content Goes here[/bscolumns]

If you have any questions, leave a comment below…

7 comments

  1. Hi, I am trying to use the plugin to make responsive columns in the theme of twenty thirteen, it seems not working. Can you figure out?

      1. @Cindy, please feel free if you have any bugs regarding this plugin. I have recently updated some bugs which was discussed by other guys in support forum. If you have using this in any site, you can update it again. Also, feel free to rate and comment if you like it.

        Cheers
        Bhuwan

    1. You can use the shortcode in your Php template by using the following snippet on your PHP template:

      < ?php echo do_shortcode( '[bscolumns class="one_half"]' . text_to_be_wrapped_in_shortcode . '[/bscolumns]' ); ?>

      Thanks for commenting the informative question 🙂 I appreciate it.

Leave a Reply

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

4 × two =