PHPMatters Help You Better Hosting Your PHP-based Sites
How to Add A WordPress Column Layout for Your Posts and Pages

How to Add A WordPress Column Layout for Your Posts and Pages

In the web design world, the column can be regarded as one of the most basic elements. With it, you can showcase your meaningful information in chunks, which is a visually appealing result for most people. In addition, the column layout can give your site a professional appearance that looks like the newspapers and magazines.

As for the creation of a column layout, you can directly adopt some well-designed column templates. If your current theme does not support the column function, you can surely code your template or website using CSS and HTML. However, this method is pretty tricky that needs a lot of adjustments for each single page and blog post. In this case, we’d like to introduce a much simpler choice of using the plugin or widgets. Now, you can check the below part about how to add a WordPress column layout easily.

Method 1 – Utilize the WP Easy Columns Plugin for Web Contents

This is the typical plugin used by many newbies to achieve a magazine style or grid design to layout their web contents via the simple shortcode that will be generated automatically. One of the main highlights of this plugin is that you can choose among more than 30 unique column variations on any of your post and page. In addition, the WP Easy Columns plugin works fine with any theme so that you do not need to worry about the compatibility issue.

By default, this plugin will achieve a responsive design for your column layout with the standard percentage of width and margin after analyzing your webpage. However, it is possible that you want to control over the column width and margin based on the pixel or percentage level. If so, you need to click the Settings button and then the Easy Columns button in your WordPress admin panel. Here, you can enable the custom column options by deciding these two aspects freely.

Custom Column Options

Now, you can start adding the column to better display your contents. Here, you need to open an existing article or create a new one. In the toolbar of the visual editor, there is a special Easy Columns button available. Just click it.

Here, you can choose a variety of column combinations. In our example, we pick up the typical 1/3, 1/3, 1/3 option. This way, you can display your content using 3 columns, each of which is about 33% in width of the container.

Easy Columns Button

In addition, you can choose to insert the single column that takes up half, a quarter, three quarters or a third of the whole container. There are 9 options for you to choose.

Now, you can click the Insert button, and then, replace the words of “Third Column” with your true contents in the shortcode. Check the final result of this example in the following.

1-Column Example

Method 2 – Utilize the Responsive Column Widgets Plugin for Widgets

In addition to the blog content, some of you may also want to create a custom-column widget box that can be shown on your posts, pages, the footer section and sidebar. If so, this plugin is just your choice that helps you easily display all your wanted widgets horizontally using a grid system.

Based on the installation, the Responsive Column Widgets plugin automatically creates a widget box with the proper label, sidebar ID, description and tag. In this case, you can directly go to Appearance > Widgets in your WordPress admin, and then, drag your wanted widgets into this special box for display.

Responsive Column Widgets Plugin

After that, you can click the Responsive Column Widgets button from the same drop-down list, and then, hit the Manage button from the main menu. Here, you can find your existing widget box, along with the required shortcode to be displayed.

Widget Box

If you do not want to make any further modification, you can directly copy the generated shortcode to your preferred location to showcase these widgets in a column layout. In the following, we’d like to display a 4-column sample with the widgets of affiliate, recent posts, recent comments, calendar, categories, tag cloud and search.

Responsive Column Widgets Sample

However, if you want to customize this widget box, you should edit it. In the edit page, you firstly can modify the widget box. Personally, we suggest you keeping all the fields of this part unchanged, for the default values are properly determined by this plugin.

Next, you should decide some parameter values of this widget box, such as the total number of columns, the maximum number of rows and widgets, the order of the omitting and show-only widgets and the spans of the columns.

Widget Box Parameter Values

Here is a note that you can set the different number of columns for each row. For instance, if you want to showcase 4 widgets in the first row, 2 widgets in the second row and 3 widgets in the third row, then, you need to enter the value of “4, 2, 3” in the right field.

In addition, you can also decide the style of this box for the background color, paddings and the maximum width.

Custom Box Style

Besides, this plugin allows an auto-insert function. If you turn on it, these widget columns will be inserted automatically to your preferred areas and positions. But personally, we recommend you to think twice before enabling this function.