Blog in Columns

Hi,

Thank you for all your support. Is it possible to display the blogs in columns on the front page.

Thanks.

 

Hello amaconline !

Yes, it is possible to display the blogs in columns.
You can do it by customization.

Thanks
Praveen

 

Hi Praveen,

Thank you for your reply. Could you kindly share a solution for that. Thanks.

 

Hello,

You can do it but it may be not responsive friendly in small device.
You have to follow two steps.

Step 1:

PHP:

 <!-- Start the Loop. -->
 
<div class="sixteen columns">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<!--Start post-->
      <div id="post-<?php the_ID(); ?>" <?php post_class();  ?> onmousedown="return false">
        <div class="seven columns">
                <h1 class="post_title"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>
                <ul class="post_meta">
                    <li class="post_date"><span>Posted On</span>&nbsp;&nbsp;<?php the_time(get_option('date_format')); ?></li>
                  <li class="posted_by"><span>Posted by</span>&nbsp;&nbsp;<?php the_author_posts_link(); ?></li>
                  <li class="post_category"><span> Posted in</span>&nbsp;&nbsp;<?php the_category(', '); ?></li>
                  <li class="postc_comment"><span>Comments</span>&nbsp;&nbsp;<?php comments_popup_link('No Comments.', '1 Comment.', '% Comments.'); ?></li>
                </ul>
              <div class="post_content">  <?php the_content(); ?>
                            <div class="clear"></div>
                            <?php if (has_tag()) { ?>
                                <div class="tag">
                                    <?php the_tags(__('Post Tagged with ', ', ', '')); ?>
                                </div>
                            <?php } ?>
                        </div>
                </div>
</div>
              <!--End post-->
              <?php endwhile; ?>
            <?php else: ?>
                <div class="post">
        <p>
            <?php _e('Sorry, no posts matched your criteria.', 'realphotography'); ?>
        </p>
    </div>
<?php endif; ?>
</div>
<!--End Loop-->

Replace all code in loop.php with above code.

Step 2:

Use this code in custom CSS

Code:

.content-bar .post {
float: left;
margin: 10px;
}

Thanks & Regards
Pramod

 

Hey Pramod, Amazing work :-D. Thank you

 

Hello amaconline,

Pleased with your response !
Let me know for further doubts and queries.

Thanks & Regards,
Pramod