cre8d design

Nice.

Thanks for the code.

It works fine in FF, but in IE6 the posts do not line up – first few are OK, but post 3 does not line up.

Hi, am I missing something or would it just be easier to give each post a fixed height (bigger than the max excerpt length) and float them? No multiple loops required…

cool, next time you need to paste formated code to anyone else try http://textsnip.com

[...] cre8ed design: How to organize posts into two side-by-side columns in Wordpress I’ve tried and tried to get this to work, but can’t. I’m saving it here for when I know a little bit more about “The Loop”. [...]

Hello Rachel,

Thanks for the post. This will be a great help!

Thanks again!

excellent, this is what I was looking for!
cheers mate

[...] note: Post here Tagged with: 2008 • design • link • personal note • wordpress There is a [...]

[...] Wordpress. Go ahead, subscribe to our feed! You can also receive updates from this blog via email.How to organize posts into two side-by-side columns in WordPress: A quick tutorial on setting up the front page of a WordPress blog to display two side by side [...]

Very nice. This kind of tutorials are showing people that those “premium themes” going around web are simple to develop.

And most important, that there are persons like you teaching these kind of stuff.

I have a similar dilemma with columns. However, I am wanting to be able to just display two columns in a single static Page without having to do anything too complicated or use ‘tables’ like I am doing now, any ideas? The page is http://jaredbares.com/movies

Very interesting.
Thanks a lot for sharing.

I have always liked the two column format. On my blog I display the most recent post at the top and then below it I do a two column format of the past however many posts.

For those that don’t do excerpts (like me) I’ve also seen the “excertpesque” behavior in the post using the_content_rss(”, TRUE, ”, 30)

I’m not a theme author and I’m sure there are merits to excerpts over the_content_rss but it worked on the then I was using then.

Jared, try this plugin. Works great.

http://www.samburdge.co.uk/wordpress/wp-post-columns-plugin

[...] – How to organize posts into two side-by-side columns in Wordpress “The basic idea is to add a “switch” so Wordpress knows if you’re looking at a post [...]

some nice code work there….

[...] How to organize posts into two side-by-side columns in Wordpress (tags: wordpress) [...]

a easy to use code, thanks.

tip: something wrong in

<?php if ($col == 1) echo “”;

is should be:

<?php if ($col == 1) echo “”; ?>

i think.

why not use percent in style.css?

[...] WordPress: comment afficher ses billets sur deux colonnes. [...]

[...] How to organize posts into two side-by-side columns in WordPress: A quick tutorial on setting up the front page of a WordPress blog to display two side by side columns with posts alternating between the two columns. The tutorial does require some simple PHP code that is not included (but should be, pseudo code is provided) but the concept is interesting, especially for theme developers looking for the next new thing. In my experience, side by side posts are more applicable for blogs that are heavy in embedded media and light on text. [...]

[...] kodlar ve ne şekilde kullanılacağı şu sayfada yer alıyor. bu sütunların kullanıldığı bir temanın genel [...]

[...] adýmlar uygulandýðýnda þu demodaki gibi listelenebiliyor. Ýlgili kodlar ve ne þekilde kullanýlacaðý þu sayfada yer alýyor. bu sütunlarýn kullanýldýðý bir temanýn genel görüntüsü Bu tür listelemelerle genellikle magazin [...]

[...] Link to the original site   [...]

[...] İlgili kodlar ve ne şekilde kullanılacağı şu sayfada yer alıyor. [...]

Hi
I’m getting:

Parse error: syntax error, unexpected T_ENDWHILE in /home/.jordan/cakeoff/cake-off.com/wp-content/themes/default/index.php on line 28

Have I got something in the wrong place? Any help appreciated.

Thanks
Lawrence

[...] design has a tutorial on how to organize posts into two side-by-side columns in WordPress. It’s based on adding a “switch” that tells WordPress if a post should appear in [...]

Thanks, I know this probably isn’t the newest thing out there, but it will save me a ton of time and $$$$.

Im so confused as how to use the code you gave within my theme. My themes code seems different then you stated. This is it below. Please help I need it for a school project, trying to make a newspaper

<?php if ($col == 1) echo “”; ?>

<a href=”" rel=”bookmark”>

|

<!–

–>

Comments

[...] How to organize posts into two side-by-side columns in Wordpress Демо-блог: посты в 2 колонки и еще [...]

Hi,

I am having the same problem as first comment, works fine in FF but not in IE, the third post gets messed up. Any chance you can post the complete code for index.php that you are using on your demo?

thanks

http://textsnip.com/3ad768

here is the code, thanks for helping me!

here it is

I’m having a small problem, it is displaying fine in IE but in FF the posts do not line up. Any ideas what I may be doing wrong. Thanks for your help!

Hey Rachel,

Thanks for checking it out. It’s still in development so there are other issues… but here is what we are looking at…

Ah yes should have checked that. Thanks so much for the great code and your help!!

[...] How to organize posts into two side-by-side columns in WordPress: A quick tutorial on setting up the front page of a WordPress blog to display two side by side columns with posts alternating between the two columns. The tutorial does require some simple PHP code that is not included (but should be, pseudo code is provided) but the concept is interesting, especially for theme developers looking for the next new thing. In my experience, side by side posts are more applicable for blogs that are heavy in embedded media and light on text. [...]

he tutorial does require some simple PHP code

[...] İlgili kodlar ve ne şekilde kullanılacağı şu sayfada yer alıyor. [...]

Having some problems with this. Can you show example code for this as I’m working on a dev box.

Thanks.

Can you please help me? I cant figure out what is wrong here!

http://celebrityfashiondirectory.com/

Hello,

How can I change this code to display posts on three colummns ?

Thanks for your help.

Smurf

some nice code work there….

My excerpt doesn’t align. I have only the first col1 excerpt in the right place (left) but all other excerpt in the left coloumn… Can you help me?Thank you!

http://www.yumeshima.net/immobiliareceleste/category/vendita-residenziale/

Hi! Thanks for the tip!

I just face one more problem. Would there be a way to display one post category in one column and another post category in column 2?

Please, I really need help…

nevermind, solved.
Thanks for this great tip!

I’d need to see your website to know what’s going on.

[...] design has a tutorial on how to organize posts into two side-by-side columns in WordPress. It’s based on adding a “switch” that tells WordPress if a post should appear in the first [...]

Hi, me again… i’ve tried the code wid IE and it doesn’t work… (FF,OPERA and even in CHROME it works), can you help me please???

here is the link:
http://www.yumeshima.net/immobiliareceleste/category/vendita-residenziale

Thank you again!

I really need help..

… solved, just for 1 px…

i am having tha same problem as nyo please help me
“My excerpt doesn’t align. I have only the first col1 excerpt in the right place (left) but all other excerpt in the left coloumn… Can you help me?Thank you!”

Thanks, this was just what I was looking for. Everything else just assumed that you want a long list of posts but where you have a dedicated page or want them listed in the footer a more organised presentation is required.

Great post and instructions are easy to follow – I have a question though – is there a way to show one post category in one vertical column and another post category in the second one? Cheers, Amar

[...] design has a tutorial on how to organize posts into two side-by-side columns in WordPress. It’s based on adding a “switch” that tells WordPress if a post should appear in the first [...]

I have implemented you code and can see how it is supposed to work, but something doesn’t seem right.

Your code closes the row div after the first post, rather than the second, so on the last line I changed $col == 1 (close div) to $col == 2 (close div).

Before these changes the code was displaying all col1 divs wrapped in a row div, and all col2 divs seperately.

eg:
content
content
content
content

The only problem i’m having now is if there is an odd number of posts, the last row div isn’t closing, obviously because $col == 1 and never gets to 2 because it’s the last post.

Any Ideas???

sorry, here is the example:

http://textsnip.com/fd6745

Solved it now, I added a $loopcounter to the loop to count the amount of times the loop goes round ($loopcounter++), and if the loopcounter is odd, add an extra closing div to the end.

Here is my final loop:

http://textsnip.com/04dd01

[...] to be posted side by side and rated by viewers. After a few unsuccessful searches, I came across this post from cre8d [...]

Thanks for the info. I really need to experiment with this. Sounds good. Thanks.

Isn’t there a simpler method than this? For example ExpressionEngine has switch method where you basically add values like this {switch=”col1|col2″} and you get the alternative columns. As simple as that!

Hi Rachel,

Many thanks – I have implemented the code and posts now appear side by side but for some reason the footer background graphic now appears at the top of the posts – http://s157574255.websitehome.co.uk/porp/

I’ve spent the last 3 hours trying to work out why this is happening.

Can you give me any hints why this would be (I am a complete newbie to Wordpress)

Thank you,
Ben

Than you Stephen – great job!

version 2 of WP Post Columns is now available.

http://www.samburdge.co.uk/wordpress/wp-post-columns-plugin-2

I created this blog design with a two column post page.
These things I noticed.
You will want to control the length of the article and try to keep in above the fold else too much scrolling. The more tag can mess things up so you need to put in a hard text link to part two of your article and post the rest separately.
ie: Post the rest and then grab the page link from the address bar and install it as a text link in part one.
an example…resurrectionofjesus.org

[...] How to organize posts into two side-by-side columns in Wordpress | cre8d design: blog designer <?php $col = 1; ?> [...]

[...] http://www.cre8d-design.com/2008/03/how-to-organize-posts-into-two-side-by-side-columns-in-wordpress... [...]

What is the process of adapting this code for more than 2 columns?

Hi there, just want to share my way. it duplicates code but works good. check this:

<div class=”post” id=”post-” style=”width:250px;float:left;”>
<a href=”" rel=”bookmark” title=”Permanent Link to “>

<div class=”post” id=”post-” style=”width:250px;float:left;”>
<a href=”" rel=”bookmark” title=”Permanent Link to “>

the tags close my col1-div, but not my col2-div…

Message to people using the arthemia-theme: Stay away from this code!

[...] have received many comments asking how to extend the earlier tutorial on How to organise posts into two side-by-side columns in Wordpress to work with more than just two [...]

72]ÂÕÎÄ íà ÏÎÐÍÎ ÑÀÉÒ

46] ÂÕÎÄ

http://pipiskun.land.ru/xr3/42.jpg http://pipiskun.land.ru/xr3/70.jpg
http://pipiskun.land.ru/xr3/6.jpg http://pipiskun.land.ru/xr3/19.jpg
http://pipiskun.land.ru/xr3/10.jpg http://pipiskun.land.ru/xr3/59.jpg
http://pipiskun.land.ru/xr3/16.jpg http://pipiskun.land.ru/xr3/10.jpg

46] ÏÎÐÍÎ

72]ÑÀÌÎÅ ÑÂÅÆÅÅ ÏÎÐÍÎ

72]âèäåî xxx çàãðóçèòü
72]ïîðíóõà øêîëüíèöû ðîëèê ñêà÷àòü
72]ïîðíî ôîòî ïîñìîòðåòü ïîðíî-ñàéò

âèäåî ýðîòèêà ñêà÷àòü ïîðíî-ñàéò
âèäåî ïîðíî ðîëèê ïîñìîòðåòü ïîðíî-ñàéò
âèäåî ïîðíî çàãðóçèòü
âèäåî xxx ñêà÷àòü
on-line ãîëîå çàãðóçèòü

ïèñÿ ðåáåíêà
ïîëíîìåòðàæíûå ïîðíî ôèëüìû online
ïîðíî ìàðèíà
ôîòî ãàëåðåè ñåêñ âå÷åðèíêè
ïîðíî ìàìî÷êè
÷àñòíàÿ ýðîòèêà îíëàéí
ñàìàÿ æåíùèíà
å ïîðíî âèäåî ìîëîäåíüêèõ äåâî÷åê
ïîðíî âèäåî ïîðòàë ãî – ïîðíî âèäåî ðîëèêè
ïîðíî ôîòî ìîëîäåíüêèõ – ïîðíî ðîëèêè
ìîëîäûå ëåñáèÿíêè îíëàéí
ýðîòèêà âèäåî ðîëèêè
çàãðóçèòü ïîðíî ðîëèêè
ãåé âèäåî îíëàéí áåç ðåãèñòðàöèè
ôîòêè ãîëûõ æåíùèí
ïîðíî ðîëèêè ñ ÿïîíêàìè
ïîðíî êëèïû áåç ðåãèñòðàöèè
ëó÷øèå ôîòî ïîðíî ãàëëåðåè
ðîëèêè ãååâ ñìîòðåòü îíëàéí
ïîðíî áîëüøèå æîïû
ïîðíî âèäåî ñî çâåçäàìè ìèðà
ôîòî ãîëîé êàòè ñòðèæåíîâîé
ãåé ðîëèêè
www ïîðíî ru – ñåêñ ðîëèêè
ñåêñ âèäåî îíëàéí ïðîñìîòð
ãåé ñåêñ âèäåî ñêà÷àòü
ïîðíî online ïðîñìîòð
ñåêñ ãîëûå äåâóøêè
÷àñòíàÿ äîìàøíÿÿ ýðîòèêà – ïîðíî âèäåî ðîëèêè
ðóññêîå ïîðíî ýðîòèêà
ïîðíî ñî çâåçäàìè ñìîòðåòü – ñåêñ âèäåî

ïîðíî ìóëüò êîìèêñû
õîðîøàÿ ýðîòèêà îíëàéí
áîíäàæ áäñì îíëàéí
ìàëåíüêèå ãîëûå àçèàòêè
on line ïîðíî
ïîðíî òâ êàíàëû îíëàéí ñìîòðåòü
ñåêñ ñàéòè – ïîðíî ðîëèêè
ïîðíî îíëàéí ðóññêèå ìîëîäåíüêèå
þëÿ êîâàëü÷óê ïîðíî – ïîðíî ðîëèêè

ãîëàÿ film ïîñìîòðåòü
xxx ðîëèê ïîñìîòðåòü
îíëàéí xxx ïðîñìîòð
ïîðíóõà dvd ñêà÷àòü
èíòåðíåò ñåêñ ïîñìîòðåòü
xxx ðîëèê ïîñìîòðåòü
ãîëûå âèäåî ñêà÷àòü ïîðíî-ïîðòàë
ïîðíóõà ñìîòðåòü
ôèëüì ïîðíî ïîñìîòðåòü
îíëàéí ãîëîå ñêà÷àòü
online ãîëîå film ïðîñìîòð
îí-ëàéí ãîëóþ film ñêà÷àòü
ïîðíî ôîòî ïîñìîòðåòü
îí-ëàéí sex ôîòî ñìîòðåòü ñàéò

[...] with quite some modifications. On the frontpage I used a two collumn post-feed. I got the code at cre8d-design. For the typeface I used mostly “Geosans light” and some css3 code to embed [...]

1) How to make three columns.

2) Make the post go down not side ways.

e..g

right now:

1 2
3 4
5 6

should be:

1 4
2 5
3 6

I’ve tried this and all I got was a white screen. I messed about with it but for some reason the adding of the post class failed. Any help would be so grateful.

[...] order to do this, I found a great post on coding a two column WordPress loop which got me started – unfortunately I found that the container div for the columns [...]

hi, thanks but i didnt it. i use wpeducation theme.

http://textsnip.com/b7c930

this is my archieve file. how can i do?

Hi there, and thanks for your example. I bet you are tired of stupid questions, but I am a bit lost. I have created my own queries and want to display 3 columns, and don’t know where in them to place your code. My querys goes like this (hope I can embed code):
have_posts()) : $coolb->the_post();
$post_image = get_post_meta($post->ID, ‘image’, true);
$post_alt = get_post_meta($post->ID, ‘alt’, true);
?>
<a href="” rel=”bookmark” title=”Permanent url to “>post_title) > 20) {
echo substr(the_title($before = ”, $after = ”, FALSE), 0, 20) . ‘…’; } else {
the_title();
} ?>

<a href="” title=”"><img src="” alt=”" style=”width:250px;height:190px; ” />

Hi John,

See this post for more than two columns.

Sorry, but, did I missed something? Because I don’t get how to create the second column. Please e-mail me. Thanks before.

Hi, i just tried your code, works great, but the thing im doing is that i want to have the top article(newest one) in a single column all alone. i already have the code to customize only the top article, but the two column code breaks because of it.
this is the code im using for that part of the site right now:

<?php if ($col == 1) echo "”; ?>

<div class="post col “>

<a href="” title=”">

can you please take a look at this as soon as possible?(im working on my final exam of my first year at design school)

thanks in advance

hi Rachel
Can I use this same code to have 3 post columns instead of just 2? If yes, what do I need to do?

thanks a ton! (by the way, it works great just the way you have it up there; I just need 3 columns instead )
Diane

Hi Diane,

See this post for more than two columns.

Hi rachel,

I am new to web design and am having a few problems. i understand how to edit the code and i think i have it right but i cant figure how to display the posts on a page. I have been searching for the code i need to input to have them display but am getting bogged down in all the info. anyway you can help with this stupid question. i know its ridiculous because i can do stuff alot more complicated but this is kicking my butt

Hi Sean,

I’ll need a bit more info to be able to help you out – can you link me to your site?

Rachel

i did use recent post plugin to come up with http://www.pennypayday.com/posttest now just need to figure out if i can make columns work with it any ideas would help. i work with y buddies and they fired all the web guys and are expecting me to do this