How To Add Columns In WordPress (Without Using Plugin)

WordPress allows you to create content in many different ways and also get creative with how you display content. 

And, columns are a great way to display content in an effective way. Columns can be used in so many different ways to arrange content. 

Needless to say, using columns in your WordPress posts and pages can help you give an effective reading experience to the users. 

In this article, we’ll show you how to add columns in WordPress without installing any WordPress plugin. 

Let’s get started. 

How To Add Columns In WordPress

There are many WordPress plugins that let you add columns to your content. Many shortcode plugins, content plugins, and more let you add multiple columns to your page. 

But, these plugins can slow down your website and having to install a plugin just for adding a column doesn’t sound like a good idea to me. 

Luckily, you don’t need these plugins anymore as the new WordPress block editor has the feature to add columns to your content. 

Gutenberg features many content blocks and one of these blocks is the column block. With the column block, you can create multiple columns in your posts and pages. 

Let’s see how you can do that. 

The first step is to go ahead and create a post. Once you’re in the Block editor, click on the Add (+) icon to add a new block to your content. 

Just search for ‘columns’. You’ll find it under ‘Layout Elements’. Click on it to add the column block. 

Now you need to select a variation. It has 5 variations –

  1. Two columns; equal split
  2. Two columns; one-third, two-third split
  3. Two columns; two-third, one-third split
  4. Three columns; equal split
  5. Three columns; wide center column

If you select the first variation, it shows like this –

You can add content inside the column by click on (+) sign. You can add any type of content inside the column, just like you add content to a regular block.

If you click the whole columns block, you will be able to see the column block settings. 

You can increase the number of columns from the block settings. It allows you add up to six columns in the row. (1)

You can also change the text and background color. (2).

That’s how easy it is to create columns in WordPress without using a plugin. 

How To Make Columns In WordPress Using Classic Editor

We’ve seen how easy it is to add columns in the new WordPress block editor. But, if you are using the classic editor, you know there are no blocks or features that let you add columns easily. 

Usually, people rely on WordPress plugins for adding columns in the classic editor. 

But, let me show you how you can add columns without any plugin in the classic editor. 

The plugins that add columns to your content only add HTML codes to make it possible. So, that is what we are going to do. 

To create a column in the classic editor, you will have to use the <div> HTML tag. 

Here’s an example – 

<div style=”width:50%;padding:0 10px 0 0;float:left;”>

Column #1 content </div>

<div style=”width:50%;padding:0 10px 0 0;float:left;”>

Column #2 content

</div>

This code snippet simply adds two columns in your editor. You can increase the number of columns by adding more <div> tags in the content. 

But, remember to change the width attribute of the tag whenever adding more columns so that all the columns have equal width. 

To add content in the columns, you’ll have to insert your content between the starting (<div>) and the closing (</div>) tag. 

In the above example, the text “Column #1 content” is the content of the first column. 

That is how you can create columns in the classic editor. 

Conclusion 

Adding columns in WordPress is very simple and as seen from this tutorial, you definitely don’t need a plugin to add columns. 

Yes, adding columns in the classic editor is not as easy as compared to adding columns to Gutenberg. But, it’s not rocket science either. 

Once you start adding columns to your content by yourself, you will realize that it’s very simple. 

I hope this article helped you to create columns in WordPress without relying on any WordPress plugin. 

If you have any questions or doubts regarding this tutorial, feel free to ask them in the comments section below. 

Leave a Comment

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

Copy link
Powered by Social Snap