Show Link Post in two column or more

Show Link Post in two column or more

Just want to share something that i face, when i modify my client’s website. At that site, he want so show list of post title (which have a same category) below every content.

The usual script that i will put to show the list of post will be like this :

<ul>
<?php $recent = new WP_Query("category_name=yourcategoryslugs"); while($recent->have_posts()) : $recent->the_post();?>
<li><a href="<?php the_permalink();?>" target="_blank"><?php the_title();?></a></li>
<?php endwhile; ?>
</ul>

And the result will be like this :

listpost

But, it will be better if i show this list of link as 2 columns or more. Of course you can add it manually with table script, but it will be problems when you add more post, because you need to modify all post.

That will be bad!!

So, the idea is how to show this link (with modify the theme) and using css feature to control it, so it can be shown as two column.

Here is the script that i do :

<ul>
<?php $recent = new WP_Query("category_name=hot-loan-products"); while($recent->have_posts()) : $recent->the_post();?>
 
<div id="news">
<div class="single" id="post-<?php the_ID(); ?>">
 
<li><a href="<?php the_permalink();?>" target="_blank"><?php the_title();?></a></li>
 
</div>
</div>
 
<?php endwhile; ?>
</ul>

In that case above, i add new 2 DIV with id=NEWS and class=SINGLE. The next modifications is the css area, inside style.css file (default)

I add this line :

#news {
     width: 100%;
}
 
.single {
     float: left;
     width: 200px;<!--This can be whatever width you like-->
     margin: 0px 0px 0px 10px;<!--This will create a 10px space between each of your columns.
     padding: 5px;<!--Once again, set this to your preferences-->
}

And the result will be like the screenshot below :

list post two column

You can play trial and error to modify the width at the css (  width: 200px;<!–This can be whatever width you like–> ), try to lower the value or increase the value. You can make it shown as 1 column, 2 column, or more.

Have a nice try….

Facebook comments:

Leave a Reply

Your email address will not be published. Required fields are marked *


seven − = zero

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

AutoBlog Theme located at Indonesia , Malang, East Java . Reviewed by 98 customers rated: 4.4 / 5