Support » Themes and Templates » create a page with a 2 or 3 column content layout?

  • Is conceivable to make a page with 2 or 3 columns of content that would display like this?
    post1 post2 post3
    post4 post5 post6
    post7 post8 post9

    If it is indeed possible, would it be very difficult to implement?

Viewing 15 replies - 1 through 15 (of 22 total)
  • Yes and yes.

    … ok… would a developer with reasonable php skills be able to do that in 2 or 3 days?

    If that developer understands The_Loop, web design and CSS, yeah, probably.

    Seems like you’d need 3 loops, each doing every 3rd post, but each starting at a different offset. I can’t see how it would be fun, but at first glance it doesn’t look impossible by any stretch. (no, I’m not volunteering!)

    One detail, it’s to post pictures and a rating script that would all have the same format. All the posts would have the exact same size if you see what I mean, not long ones and then short ones… Just a picture and underneath that a rating plugin.

    Could you do it with one loop and use it to generate nine unique <div>s which you could then float left, right etc as you wanted? (Sounds a little to easy so i doubt it 🙂 )

    That’s an interesting approach, IanD. And probably better than mine if the layout is all thought through first!

    Chances are it will be a CSS nightmare though (I struggle with just getting two divs side-by-side..)

    Another way could be to use a home.php with nine get_posts calls each getting one post with varying offsets. This would mean you would need a more conventional page for single view etc (and i dont think paging using home.php would work as you are not using the true ‘loop’.

    I don’t want just 9 posts on the page though, it was just show the layout, which is 3 posts per row.
    So trying to do that would be a “nightmare”?

    Yes.
    There aren’t really “rows” when it comes to design.

    if i understand your problem right, it’s quite simple.
    just use one loop with 9 post, lets say div class=”post” … and in your css you give this class a width and flaot it left.

    Thank you,
    However i’m not trying to get just 9 posts in a page, it was just for the example. I’m trying to have posts display in rows of 3 (each post will have the exact same size).

    Since you want the posts to go three across, drop and start the next three – yeah, you could do this with the regular loop – doing what tIan said up there…float your DIVs. I disagreed with him when he says it would be a nightmare. I haven’t done this with a dynamically generated site, but I’ve done it quite often with static sites. The only difference in them would be the possibility of more divs – but that wouldn’t be a problem.

    I’ll post a quick example here, but you’ll have to make adjustments for your current situation. But it should be enough to get you started.

    Your HTML should look something like this (using a 2-column layout):

    <body>
    <div id="wrapper">
    <div id="sidebar">
    Sidebar stuff here
    </div>
    <div id="content">
    <div class="post<?php whatever the post code is here ?>">
    Post 1 here
    </div>
    <div class="post<?php whatever the post code is here ?>">
    Post 2 here
    </div>
    <div class="post<?php whatever the post code is here ?>">
    Post 3 here
    </div>
    <hr class="clear" />
    </div> <!--closing #content -->
    <hr class="clear" />
    </div> <!-- closing #wrapper -->
    </body>

    Then your CSS should be something along the lines of this:

    * {margin:0; padding:0;border:none;}
    #wrapper {width:700px;}
    #sidebar {width:200px; float:left;}
    #content {width:500px; float:right;}
    #content div {float:left; width:165px;}
    hr.clear {clear:both; visibility:hidden;}

    Now, basically, that’ll make the divs inside the content area float left. Each are 165px, added together *almost*makes 500px. in addition, you need to clear that float each time there’s a “row” of posts, so the next line can start.

    The problem with this, of course, is Internet Explorer. You *will* need conditional comments to adjust for margins and padding. And if you have a word or a link that is longer than the given 165px, IE *will* expand the div in question, and cause the last div (post #3) to drop. So you’ll need to be careful about images sizes, word and URL lengths.

    But it should work just fine. Hope it gets you started.

    Wow! Thanks a lot!
    Just to be sure: I can actually have just one specific page display like that, even though the rest of the site has a regular layout?

    Just to be sure: I can actually have just one specific page display like that, even though the rest of the site has a regular layout?

    Answer: Yes.

    This will help you:
    http://codex.wordpress.org/Templates

    Has anyone seen something similar working on someone’s blog?

Viewing 15 replies - 1 through 15 (of 22 total)
  • The topic ‘create a page with a 2 or 3 column content layout?’ is closed to new replies.