Press "Enter" to skip to content

How to Add Columns to WordPress Posts

Adding columns into WordPress posts and pages has never been easy.

With the new Gutenberg editor added in WP 5.0, we now have a solution.

The Gutenberg editor gives us “blocks” to insert different types of content within posts. One of these blocks is the column block.

The column block is quite simple. It is more or less a block container that you place other blocks into. You can easily switch from 2-6 columns and any type of block can be included into each column.

The only annoyance with this new feature is that the column block itself can be very hard to select. Make sure to click on the six dot icon to the left of the block to reliably select it.

Transcript

Hey, this is Ben from WPAnswered.com. In this video, you'll learn how to add columns into WordPress posts. Adding columns in the post has been something frankly, that WordPress users have struggled with for a long time. There was never a built-in way with WordPress. You always had to install a new plugin and they didn't always work so well. With the new WordPress Gutenberg editor, we finally have a native solution for adding columns into posts. What we can do is to add the new column Gutenberg block. And adding it is actually really easy. All you need to do is add a new block and then use this "Add block" button in the left sidebar. Now if you check out my most used section, you'll see the columns box showing up there. You can also always find it in the Layout Elements section or you can simply search for it to make it show up in the block selector. If I click on it, I'll immediately have a two-column layout added to my post. Now what this is doing is adding two blocks for me and placing them side-by-side. By default, I can begin typing to treat them as paragraph blocks. I'll fill in some demo content right now.

Great, so the spelling, nothing like that really matters right now. I'll click update. I just want to show you how this displays on the front-end so you can check this out and you'll see I now have this nice two-column display just like we see in the editor. So far so good. Already, this is a much easier, more intuitive solution than we've ever had before. Now if you want to change this layout to have three, four, five, or even six columns, you need to select the column block. Now what I want you to pay attention to right now is the way we switched between Document and Block settings in the sidebar here. If I click on this paragraph element, you'll see the settings change over to the block settings. I can always click "Document" to return the document or I can click somewhere in the sidebar.

If I switch from a paragraph to a heading element... if you watch the sidebar, you'll see that the settings change to be relevant for the selected block. If I go to the column block, I can select the paragraphs, but there's no obvious way to select the column block, which is the container for these two paragraph blocks. Sometimes if you really carefully click in between here like that, you can get it, but the easiest way to select the column is to hover over here and click on this icon with the six dots. That will select the columns and trust me if you're not aware of that, it can be really, really frustrating as you try to click around and figure out how to select the columns. Again, once you know how to select the column block, it's a lot easier. Now you'll find that there's a way to adjust the number of columns.

You can do that very easily and in the Advanced section, there's just an option for CSS classes, which you probably won't need. Of course, I can add more text in here since it's a paragraph block and once I enter in some text, I can use the block transform button to switch it to any other type of text-based block. But, if I highlight and delete that text, I now have the option to create any kind of block I want. For instance, I could add an image and you'll notice some of these options. These are the same options you normally see when uploading an image and if I want to choose an image from my Media Library, this will open it right up. I'll select one of these images and you'll see it inserted within my three-column layout. If I update the post and view it on the front-end, we'll see it displays just like we saw in the editor.

So with the ability to add any type of block I want, I can add shortcodes, tables, headings, lists. The column block is really, really versatile and you can create some pretty cool layouts. Most importantly, you just need to know that if you want to switch a paragraph block to another type of block, you have to first delete all of the text and then you'll see the "Add block" button. And if you want to edit the column itself, click on this icon on the left side and then you'll be able to adjust the number of columns. If you liked this video, please click the Like button below. If you want more WordPress tutorials, don't forget to subscribe, and if you have any questions, still, please leave them in the comments section below. Thanks for watching.

Ben Sibley
Ben Sibley

After using WordPress for the last 9 years, I've made dozens of websites, designed and developed 20 themes that have been downloaded more than 1.5 million times, and personally helped thousands of WP users with their sites.

Now I'm sharing everything I know to help make WordPress an easier and more rewarding choice for building a website. If you have a question you want answered, submit your question here.