How do you create a 2 Column WordPress Page? It’s simple. First, let’s explain a WordPress Page. A WordPress Page is technically a post that lives outside the blog chronology. Examples of Pages are the About, Contact, Archives and Link pages. All you need is a little bit of HTML and CSS code to create a 2 Column Page. Here’s how!
1. Format your WordPress Pages using the following HTML code
<div class='embed'> Left Column Text </div> <div class='embed'> Right Column Text </div> <div style='clear:both;'></div>
2. Add this CSS code to your theme’s stylesheet.
.embed {
width:47%;
float:left;
padding:0 0 0 10px;
margin:0 0 20px 0;
}
3. That’s it!
Example
How About Multiple Columns
No problem. The code is very flexible. You can easily create multiple column pages by slightly modifying both HTML and CSS codes.
1. HTML: Add a 3rd or 4th “embed” class.
2. CSS: for 3 columns, use width of 31px; for 4 columns, use 22px.
Caveat
The WordPress Visual editor removes HTML tags like “div” tags. If you want a 2-column WordPress page, use and save your work using the HTML editor instead. It’s easy to switch to Visual and HTML and vice versa.
That’s it! Enjoy your 2 Column or Multiple Column Pages!
If you enjoyed this article, please share it with others using the social buttons below. If you like to be updated when a new article is published, please subscribe via email, RSS or follow me on Twitter: @ulyssesonline.
Have tried this but failing to create two columns on a specific page – my home page.
Can you elaborate on where the code should go for the css code – i added it to the end = is this the right place?
Thanks
Sorry – sussed it!
The old slanted quotes problem again!
Thanks for this post – it does exactly what I wanted!
Is it possible to create to columns of unequal depth and add a code at the break?
Bill, I think it’s possible to have uneven columns. The ‘clear both’ code you see at the end is just making sure your the text that follows is below the longest column.
I used your code on WP version 3.0.1 and it doesn’t work. I edited the stylesheet and the text. When I preview the page it all comes out in one single column. Any ideas?
Hi,
I used your code on WP version 3.0.1 and it doesn’t work. I edited the stylesheet and the text. When I preview the page it all comes out in one single column. Any ideas?
Make sure you use HTML mode instead of Visual Mode. Visual mode will delete your HTML codes including the divs.
Hi,
Not working on my theme either. It happens as Alex, the two columns are left align one after the other.
I also included the CSS script and the intructions followed also a late WP 3.0.2 version used. ¿Any incompatibility with the theme I use?
Regards
I just updated this post just a few minutes ago. I’m currently running the latest version of WordPress, version 3.1. This tells me that this code works. Please check your code. Make sure you are using quotes instead of slanted quotes that WordPress inserts inside its posts. The big issue people are having is using the Visual editor instead of HTML editor. If you save your post in Visual mode, the div tags will be deleted, and your columns will not render on the screen. Use the HTML editor.
Unfortunately this isn’t working for me either with WordPress 3.1 . I updated the .css sheet of my theme and tested the feature in a post to no effect. (I am using the HTML editor and not the Visual editor, of course.)
Do you have a link so I can take a look at it?
I tried this code and it didn’t work for me. I am trying to make my Contact page 2 columns. I updated the page in HTML and also the style sheet and the content is staying all in one column. Maybe I’m not inserting the CSS in the right place on the style sheet? I put in after #content. Any suggestions on how to make this work?
There are 3 things that could go wrong when trying to implement a 2 column page. First, you must use the HTML editor instead of the Visual editor. Second, WordPress converts the quotes as slanted quotes. Use single quotes instead. Third, people often forget to add the CSS needed to display the columns.
it works perfectly. but how to add vertical line between the two columns? can you help me?
thanks.
You can add border-right to the embed class, but that would display right borders to both left and right columns. If you want to add a border just to the left column only, you will need to add a second class to each divs. Something like class=”embed left” and class=”embed right” would work. You can style .left to have a border-right:1px solid #ccc for example.
I’m having problems getting the code to work. I just stuck the CSS in, and I was working in html editor. The page in question is http://somethingemily.com/portfolio
Thoughts?
Emily,
Thanks for posting your link. It helps out a lot. Your code looks good. The embed divs are there. You added it correctly. The problem is your CSS. It’s not working. It took me a minute or two to realize, you have it commented out. This is your code.
/* Extras emily added
.embed {
width:48%;
float:left;
padding:0 0 0 10px;
margin:0 0 20px 0;
}
/* ======================== */
Everything is commented out between /* and the next */
You need to do this:
/* Extras emily added */
.embed {
width:48%;
float:left;
padding:0 0 0 10px;
margin:0 0 20px 0;
}
Thank you! that was it. Can you tell I’m new to this coding bit? Thanks again for your help.
How do I make the coumns more narrow ?
You can decrease the width to 40% or to whatever you like.
Thanks for this tips,..i ve successfully install on my blog..
I tried this code and it didn’t work for me. I am trying to make my Contact page 2 columns. I updated the page in HTML and also the style sheet and the content is staying all in one column. Maybe I’m not inserting the CSS in the right place on the style sheet? I put in after #content. Any suggestions on how to make this work?
it works perfectly. but how to add vertical line between the two columns
You can add “border-left:1px solid #ccc” to css. However, this will add left borders on both columns. Another option is to add a second class to the right column and add css to it.
Dewi, do you have a link?