Splitting entire posts between columns

  • Resolved foooder

    (@foooder)


    18 years, 10 months ago

    Hello,

    I’m wondering if this is possible or if there is a plug-in for it already that I over looked. I’m using WordPress to build a small ecommerce website for one of my friends, and instead of displaying the products (actually posts), one per row and one on top of another. I would like to display them 2 per row, one on top of another.

    Instead of a post taking up 100% width, and when a new post is generated the new post just slides the first one down, maybe have a post take up 50% of the area, and then when a new post is generated, the first post slides over to the right instead of down. Then when a new (3rd) post is generated now the first post will slide down, and the second post over, and the new one taking top left position.

    The way I’m explaining it might be a little confusion so I added some screenshots to help: https://brianfoder.com/ewb/screen1.jpg. What I would like to accomplish: https://brianfoder.com/ewb/screen2.jpg. Almost similar to the home page at https://www.cssremix.com/ except they go 5 across and let the rest flow down.

    I’ve found a few threads relating to the splitting of a “post” into 2 columns (kinda like the Tabloid or TC Columns plug-in’s) but they seem to split the contents of a post over 2 columns opposed to separating entire posts into 2 columns.

Viewing 9 replies - 1 through 9 (of 9 total)

  • if you’re using css, restrict the width of the box that will encapsulate the entries. then, restrict the widths of the entries themselves, probably half of the main box, and float them to one side, most likely left (if you want the most recent entry on the left side). the two most recent entries will fill the first row with the newest entry on the left and the older one on the right. a third entry older than the first two entries will be forced to move below the first to make the second row.

    .main-box{
    width:600px;
    }

    .entry-box{
    width:300px;
    float:left;
    }

    <div class=”main-box”>

    <div class=”entry-box”>
    most recent entry
    </div>

    <div class=”entry-box”>
    next most recent
    </div>

    <div class=”entry-box”>
    oldest entry
    </div>

    </div>

    Thread Starter foooder

    (@foooder)

    Hi Charle, thank you for your reply. Sorry didnt see the code you put there right before I replied.

    Hi Charle,

    Thanks for your reply. Please excuse my ignorance but I’ve only been using WP for less then a week now so I’m not 100% (or even 50%) familiar with everything.

    I think I know what you mean by restrict the entries but I’m not exactly sure what you mean by restrict the width of the box that will encapsulate the entries themselves. Here’s some more info. I’ve taken bits and pieces of many templates/themes but am using pretty much using the same index.php and post.php from the Connections template as well as the appropriate css so things work. Now what I did for my second screen shot is what I think is restricting the entries which is I did by simply adding this to my code “width:320px”, which made the box 320px across instead of 100%. Code now looks like this:

    .post , .page {
    margin: 2px 0px 0px 0px;
    padding: 10px;
    background: url(“images/table_bg.jpg”) repeat-x;
    border-top: 2px solid #000;
    border-right: 1px solid #696866;
    border-bottom: 1px solid #696866;
    border-left: 1px solid #696866;
    width: 302px;
    }

    And page now looks like this: https://brianfoder.com/ewb/screen3.jpg

    Now the entries (or posts) are the width I want but are still posting one on top of each other. How would I go about restricting the width of the box that encapsulates these entries?

    Thread Starter foooder

    (@foooder)

    Hi Charle,

    I added the css now exactly where do I add the code:

    <div class=”main-box”>

    <div class=”entry-box”>
    most recent entry
    </div>

    <div class=”entry-box”>
    next most recent
    </div>

    <div class=”entry-box”>
    oldest entry
    </div>

    </div>

    to my index.php or post.php?

    Here is the code for my index.php:

    <body>
    <?php get_header(); ?>
    <div id=”main”>
    <div id=”content”>
    <?php if ($posts) : foreach ($posts as $post) : start_wp(); ?>
    <div class=”post”>
    <?php require(‘post.php’); ?>
    <?php comments_template(); // Get wp-comments.php template ?>
    </div>
    <?php endforeach; else: ?>
    <?php _e(‘Sorry, no posts matched your criteria.’); ?>
    <?php endif; ?>
    <p align=”center”><?php posts_nav_link() ?>
    </div>

    <?php get_sidebar(); ?>
    <?php get_footer(); ?>
    </div>
    </body>
    </html>

    And this is my post.php:

    <div class=”post-info”><h2 class=”post-title”></h2>
    <?php the_time(‘D j M Y’); ?>. Posted to <?php the_category(‘ , ‘); ?> <?php edit_post_link(‘(edit)’); ?><br/> </div>
    <div class=”post-content”>
    <?php the_content(); ?>
    <div class=”post-info”>
    <?php wp_link_pages(); ?>
    </div>
    <div class=”post-footer”><span class=”post-info”><?php comments_popup_link(‘No Comments’, ‘1 Comment’, ‘[%] Comments’); ?>
    </span></div>
    </div

    index.php

    what is post.php? are you using a theme as a design foundation?

    Thread Starter foooder

    (@foooder)

    Yes Im sorta using the Connections theme.

    just index.php. you don’t need to touch post.php

    <body>
    <?php get_header(); ?>
    <div id=”main”>
    <div id=”content”>
    <div class = “main-box”> <!–opens main-box–>
    <?php if ($posts) : foreach ($posts as $post) : start_wp(); ?>
    <div class = “entry-box”> <!–opens entry-box–>
    <div class=”post”>
    <?php require(‘post.php’); ?>
    <?php comments_template(); // Get wp-comments.php template ?>
    </div>
    </div> <!–closes entry-box–>
    <?php endforeach; else: ?>
    <?php _e(‘Sorry, no posts matched your criteria.’); ?>
    <?php endif; ?>
    </div> <!–closes main-box–>
    <p align=”center”><?php posts_nav_link() ?>
    </div>

    <?php get_sidebar(); ?>
    <?php get_footer(); ?>
    </div>
    </body>
    </html>

    how are the individual entry pages designed? if the entries are opening into a “regular” sized page, you may have problems.

    Thread Starter foooder

    (@foooder)

    Charle,

    Sorry for the delayed response but I had to tweek things a bit. The code you supplied works great, now the “posts” are splitting into 2 columns as intended (you can see a screen here: https://brianfoder.com/ewb/screen4.jpg). The only thing is it looks like if 2 posts are next to each other, they must be the same height or things get thrown off a little bit, and as a result will “bump” a post into the next row. That shouldn’t be a problem though because I intend to make all the boxes the same size. Thank you very much for your help.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Splitting entire posts between columns’ is closed to new replies.