[resolved] How to show post horizontally [inline] (4 posts)

  1. zzuum
    Posted 1 year ago #

    I want to show mu post horizontally?
    Can you tlel me how to do that... In default wordpress loop all post goes like


    and i want

  2. salsaturation
    Posted 1 year ago #

    Hi zzuum

    Might be helpfull if you provide a link to your site as your question is too generic

  3. zzuum
    Posted 1 year ago #

    Thank you for answer.

    Well my theme is not online, still... i use classic wordpress loop. If that can help you.

    This one :

    <!-- Start the Loop. -->
     <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
     <!-- Test if the current post is in category 3. -->
     <!-- If it is, the div box is given the CSS class "post-cat-three". -->
     <!-- Otherwise, the div box is given the CSS class "post". -->
     <?php if ( in_category('3') ): ?>
               <div class="post-cat-three">
     <?php else: ?>
               <div class="post">
     <?php endif; ?>
     <!-- Display the Title as a link to the Post's permalink. -->
     <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
     <!-- Display the date (November 16th, 2009 format) and a link to other posts by this posts author. -->
     <small><?php the_time('F jS, Y') ?> by <?php the_author_posts_link() ?></small>
     <!-- Display the Post's content in a div box. -->
     <div class="entry">
       <?php the_content(); ?>
     <!-- Display a comma separated list of the Post's Categories. -->
     <p class="postmetadata">Posted in <?php the_category(', '); ?></p>
     </div> <!-- closes the first div box -->
     <!-- Stop The Loop (but note the "else:" - see next line). -->
     <?php endwhile; else: ?>
     <!-- The very first "if" tested to see if there were any Posts to -->
     <!-- display.  This "else" part tells what do if there weren't any. -->
     <p>Sorry, no posts matched your criteria.</p>
     <!-- REALLY stop The Loop. -->
     <?php endif; ?>
  4. stephencottontail
    Posted 1 year ago #

    A quick way to do it would be to use something like:

    <?php if ( in_category('3') ): ?>
               <div class="post-cat-three two-per-row">
     <?php else: ?>
               <div class="post two-per-row">
     <?php endif; ?>

    and then in your CSS file, put this:

    .two-per-row {
        width: 48%;
        display: inline-block;

    That would give you two posts side-by-side per row. If you wanted three posts side-by-side, change the width to 32% or something like that. For four posts, change the width to 24%, and so on and so forth.

Topic Closed

This topic has been closed to new replies.

About this Topic