How to Add Responsive Columns in WordPress via Shortcodes

No votes yet.
Please wait...

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…

Similar Posts

7 Comments

  1. Thank you for the article regarding the responsive column layout !
    Please download this plugin and use it in your wordpress blog/site. If there’s anything bug found, get back to me on Email: [email protected]

    Cheers !

    No votes yet.
    Please wait...
  2. 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?

    No votes yet.
    Please wait...
    1. Oh, sorry, it is working. Looks very good! Thanks!

      No votes yet.
      Please wait...
      1. Your welcome @Cindy.

        No votes yet.
        Please wait...
      2. @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

        No votes yet.
        Please wait...
  3. Hi,

    I want to put this on php template, is there another shortcode I will use?

    No votes yet.
    Please wait...
    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.

      No votes yet.
      Please wait...

Leave a Reply

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